Edit GeoDirectory Card Layout

GeoDirectory Edit Card Layout: How to Customize Listing Cards Without Breaking Your Design

GeoDirectory gives you a lot of control over your directory website, but one of the first things most people want to change is the listing card layout.

The default layout works, but in most cases it is too generic. It often shows too much information, puts the wrong details first, and creates cards that are too tall or hard to scan.

If you run a local business directory, restaurant guide, service directory, or property website, the card layout is one of the most important parts of the page. Visitors usually decide in just a few seconds whether they want to click.

A good card layout should:

  • Show the most important information first
  • Keep all cards the same size
  • Look good on mobile
  • Make the call-to-action button easy to see
  • Help users compare listings quickly

In this guide, you will learn how to edit the GeoDirectory card layout, remove or move fields, add custom details, and improve the design with CSS and PHP.

What Is the GeoDirectory Card Layout?

The card layout is the small block used for each listing inside:

  • Search results pages
  • Category archives
  • Featured listings sections
  • Homepage listing blocks
  • Map results

A default GeoDirectory card usually contains:

  • Featured image
  • Listing title
  • Category
  • Address
  • Rating
  • Description
  • Button

The problem is that the default layout tries to work for every type of directory. A restaurant directory needs a different layout than a property site or local business directory.

For example:

  • A restaurant card should show rating, cuisine, and opening hours
  • A real estate card should show price, bedrooms, and location
  • A service directory should show the business name, phone number, and a button

That is why most GeoDirectory sites need custom card layouts.

Before You Start

Before changing anything, create a child theme or use the Code Snippets plugin. Do not edit your main theme files directly.

If you update the theme later, your changes may disappear.

You should also test changes on a staging site first.

Tools that help:

  • GeoDirectory block editor
  • Elementor or Gutenberg
  • Browser inspect tool
  • Code Snippets plugin

How to Edit the GeoDirectory Card Layout in the Builder

The easiest way to change the card layout is with the GeoDirectory builder.

  1. Open the page that contains your listings
  2. Edit the page with Elementor or Gutenberg
  3. Find the GeoDirectory listing card block
  4. Open the card settings
  5. Drag and reorder the fields

A common mistake is leaving the title too low in the card.

Bad order:

Image
Category
Address
Title
Button

Better order:

Image
Title
Rating
Category
Address
Button

The listing title should almost always appear near the top. It is usually the first thing users want to read.

You can also remove fields that are not important.

For example, many people remove:

  • Full address
  • Fax number
  • Long description
  • Too many icons
  • Social links

The shorter the card, the easier it is to scan.

How to Add Custom Fields to the Card

Many directories need custom fields.

For example, you may want to show:

  • Opening hours
  • Starting price
  • Delivery available
  • Pet friendly
  • Free parking
  • Bedrooms
  • Bathrooms

You can add these fields in GeoDirectory, then display them on the card.

Example:

add_filter( 'geodir_custom_fields_output', function( $output, $field ) {

    if ( $field['htmlvar_name'] === 'price_range' ) {
        $output = '<div class="gd-price-range">From $' . esc_html( $field['value'] ) . '</div>';
    }

    return $output;

}, 10, 2 );

This changes the custom field called price_range and displays it as:

From $49

You can style it with CSS:

.gd-price-range {
    font-size: 18px;
    font-weight: 700;
    color: #2d7d32;
    margin-bottom: 10px;
}

GeoDirectory Edit Card Layout

How to Make All GeoDirectory Cards the Same Height

One of the biggest design problems is uneven card height.

When one listing has a long title or more text, that card becomes taller than the others. The result looks messy.

You can fix this with flexbox:

.geodir-category-listing li {
    display: flex;
}

.geodir-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

Now every card will stretch to the same height.

To keep the button at the bottom:

.geodir-post-card .gd-card-footer {
    margin-top: auto;
}

This small change makes a big difference.

How to Create a Two-Column GeoDirectory Card Layout

Many business directories look better with the image on the left and the content on the right.

Example:

.geodir-post-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: start;
}

.geodir-post-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
}

This works well for:

  • Business directories
  • Service directories
  • Doctors
  • Lawyers
  • Restaurants

The image stays small, while the right side contains the title, rating, phone number, and button.

How to Fix the Mobile Layout

Many GeoDirectory cards look fine on desktop but break on mobile.

Common problems:

  • Image too wide
  • Text pushed off screen
  • Button too small
  • Two-column layout still active on phones

Use this CSS:

@media (max-width: 767px) {

    .geodir-post-card {
        grid-template-columns: 1fr;
        display: block;
    }

    .geodir-post-card img {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .geodir-post-card .gd-card-footer a {
        display: block;
        width: 100%;
        text-align: center;
    }
}

On mobile, it is usually better to stack the image above the text.

Example 1: Local Business Directory Card Layout

If you run a local business directory, the card should stay simple.

The best layout is usually:

  1. Image
  2. Business name
  3. Star rating
  4. Phone number
  5. Button

Example HTML:

<div class="business-card">
    <img src="business.jpg" alt="Joe's Pizza">

    <div class="business-card-content">
        <h3>Joe's Pizza</h3>
        <div class="rating">★★★★★</div>
        <div class="phone">(555) 123-4567</div>
        <a href="#" class="button">View Details</a>
    </div>
</div>

Example CSS:

.business-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}

.business-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.business-card .button {
    display: inline-block;
    margin-top: 12px;
    background: #1f5eff;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
}

Example 2: Real Estate Listing Card Layout

Property directories need a very different layout.

The price should appear first.

Best order:

  1. Large image
  2. Price
  3. Property title
  4. Bedrooms and bathrooms
  5. City
  6. Button

Example:

.gd-property-price {
    font-size: 28px;
    font-weight: 700;
    color: #2e7d32;
    margin-bottom: 8px;
}

.gd-property-meta {
    display: flex;
    gap: 12px;
    color: #666;
    margin-bottom: 10px;
}

Example output:

$425,000
3 Beds · 2 Baths
Austin, TX

This is much easier to scan than a long description.

Using GeoDirectory Hooks for Full Control

The builder is useful, but sometimes it is not enough.

GeoDirectory has hooks that let you add or remove content.

For example, you can add a badge above the title:

add_action( 'geodir_before_listing_title', function() {
    echo '<span class="custom-badge">Featured</span>';
} );

CSS:

.custom-badge {
    display: inline-block;
    background: #ff9800;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

You can also add extra text after the card:

add_action( 'geodir_after_listing_content', function() {
    echo '<div class="custom-note">Free delivery available</div>';
} );

Or remove an existing element:

remove_action( 'geodir_listing_card_content', 'geodir_listing_price', 20 );

This removes the default price block.

Common Problems and Fixes

Changes Do Not Appear

Usually this happens because of cache.

Try:

  • Clear your caching plugin
  • Clear server cache
  • Regenerate Elementor CSS
  • Hard refresh the browser

CSS Works on One Page but Not Another

Some GeoDirectory pages use different wrappers.

For example:

.geodir-post-card

may work on the category page, but not on featured listings.

Use the browser inspect tool and find the correct class.

The Card Looks Broken on Mobile

This usually happens because:

  • Fixed image width
  • Too much text
  • Too many columns
  • Buttons wider than the screen

Always test on mobile before publishing.

Best Practices for Better GeoDirectory Cards

The best GeoDirectory cards follow a few simple rules:

  • Keep them short
  • Use only the most important information
  • Put the title near the top
  • Use one clear button
  • Keep spacing consistent
  • Make all cards the same height
  • Test on mobile and desktop

In most cases, the best card formula is:

  1. Image
  2. Title
  3. Rating or category
  4. One important detail
  5. Button

If you try to show too much information, people stop reading.

Comparison Table: Good vs Bad GeoDirectory Card Layout

ElementBad LayoutBetter Layout
TitleHidden below addressNear the top
DescriptionFull paragraphOne short line
AddressFull street addressCity only
ButtonSmall and hard to findLarge and clear
Card HeightDifferent sizesEqual height
Mobile LayoutTwo columnsStacked layout

GeoDirectory Card Layout CSS Starter Template

If you want a simple design that works on most sites, start with this:

.geodir-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.2s ease;
}

.geodir-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.geodir-post-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.geodir-post-card .gd-card-content {
    padding: 18px;
}

.geodir-post-card .gd-card-footer {
    margin-top: auto;
    padding: 18px;
}

Frequently Asked Questions

How do I edit the GeoDirectory listing card layout?

Open the listing page with Elementor or Gutenberg, select the GeoDirectory listing card block, and drag the fields into the order you want.

Can I change the order of fields in GeoDirectory?

Yes. You can move the title, rating, address, category, and custom fields into a different order inside the builder.

Where do I add custom CSS for GeoDirectory cards?

You can add it inside:

  • Appearance → Customize → Additional CSS
  • Your child theme stylesheet
  • Elementor custom CSS

Why is my GeoDirectory card layout broken on mobile?

Most mobile problems happen because the card uses fixed widths or too many columns. Add a mobile media query to stack everything vertically.

Can I use Elementor to edit GeoDirectory cards?

Yes. GeoDirectory works with Elementor and lets you customize the listing card layout visually.

How do I show custom fields on GeoDirectory cards?

Add the custom field in GeoDirectory, then include it in the card layout or output it with a hook or filter.

Which GeoDirectory hook controls the listing title?

A common hook is:

geodir_before_listing_title

You can use it to add badges or custom content above the title.

How do I make all GeoDirectory cards the same height?

Use flexbox and set the card height to 100%.

.geodir-post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

Need Help Customizing GeoDirectory?

GeoDirectory card layouts often look simple at first, but it can become difficult once you need custom fields, mobile fixes, custom PHP hooks, equal card heights, or Elementor integration.

If you want a professional to build the layout for you, it is often faster to hire an experienced WordPress developer.

I recommend getting a free estimate from the experts at Codeable. They are known for working only with experienced WordPress developers, and you can explain your project and receive a few different estimates with no obligation.

You can request a free estimate here:

Codeable

There is no pressure to hire anyone, but it is a good way to see how much work your GeoDirectory changes may require and what the best approach would be.