Choose the List + Grid skin in your shortcode settings if you want to allow both types of views. This skin will render a toggle on the front-end, enabling users to flip between a traditional list format and a multi-column grid format for the same set of listings. It’s useful when you want to cater to user preference – some may like a compact list, others a visual grid.
When List + Grid skin is active, you will have additional settings to control the default view and behavior of each view.
In the Style tab for List + Grid, you can customize the appearance of listings in both list and grid modes. Similar to the individual skins, you’ll choose a style variation and which elements to display on the listing cards.
First, select a Style for the combined skin. The style you pick will apply to both views (list and grid) in terms of design template. You can choose Style 1, 2, 3, or 4 – each style defines how listing information is structured in both list item and grid card.
Display Image: Toggle to show listing images in the results. (Pro feature Pro.) If enabled, listings will show a featured image or image slider whether in list or grid view.
Image Method: Choose Cover to show a single featured image cover, or Slider to show all images as a slider for each listing.
Image Fit: Choose Cover to have images cover the frame or Contain to fit them fully within the frame.
These image settings apply to how images appear in both the list and grid layouts of this combined skin.
If Display Image is turned off (in Pro), neither view will show images for listings (useful if you want a very compact text-only list).
Display Description: Toggle to show a short description/excerpt for each listing. This will affect both the list item and grid card (whenever the chosen style supports it).
When on, you can configure:
Content Length: The number of words from the listing description/excerpt to display (default might be 12 words).
Content Type: Whether to pull from the full Description or the Excerpt field for that text.
This option is particularly effective in styles that include a text blurb (e.g., Style 2 and Style 3). In styles that are more minimal (like Style 1 or Style 4), a description may not be part of the design.
If a style doesn’t usually show description text, the content might not appear even if enabled. The UI will automatically hide or show these fields depending on style (Style 2 and Style 3 typically allow description content).
Configure which elements to display on the listing previews. For List + Grid skin, these toggles affect both views (the list view entries and the grid view cards):
Contact Info: Show contact details or a contact button in the listing entry. (This appears in styles that support it – Style 1 and Style 4 layouts.)
Location: Show the location name of the listing. (Supported in Style 2 layouts.)
Price Class: Show the price classification label (if used, e.g., dollar signs). (Requires pricing component; shown in Style 3 layouts.)
Price: Display the listing’s price field. (Requires pricing enabled; visible in Style 1, Style 2, and Style 4.)
Display Matched Bookables: If the Listdom Booking add-on is active, show matched bookable items on the listing preview so users can see what can be booked from the list or grid card.
Share Buttons: Include social share icons on the listing preview. (Requires social component; available in Style 1, Style 2, and Style 4.)
Address: Show the address of the listing. (Requires Map component; visible in Style 1, Style 3, and Style 4 for this combined layout.)
Work Hours: Show open/closed or working hours information. (Requires work hours feature; included in Style 2 and Style 3.)
Categories: Display the listing’s categories. (Available in Style 2 and Style 3 for List + Grid skin.)
Labels: Show any labels (like “Featured”) on the listing. By default, this is enabled if the style supports it (commonly yes).
Title: Toggle the listing title. Normally left on (so each listing shows its title). If turned off, neither view will display listing titles, which is generally not recommended.
Favorite Icon: Show the favorite heart icon for saving listings. (Requires Favorite add-on Favorite.)
Compare Icon: Show the compare icon for adding to comparison list. (Requires Compare add-on Compare.)
Review Stars: Show star rating indicators if listings have reviews. (Requires Reviews add-on Reviews.)
Claim Status: Show a claimed badge on listings that have been claimed by owners. (Requires Claim add-on Claim; appears in Style 3 and Style 4 when Title is enabled.)
The List + Grid skin also supports an optional map, though typically if you want a map alongside results, you might choose a Half Map or similar skin. Still, you can configure a map to display with this combined view.
Map Provider: Select the map provider (e.g., Leaflet or Google Maps) for the map if used. This defaults to your global map setting.
Position: Decide where the map should appear:
Top – above the toggleable list/grid content.
Bottom – below the listings.
Left – to the left (with listing content to the right).
Right – to the right (with listing content to the left).
Map Style: (Google Maps only) choose a custom style theme for the map, or leave blank for default.
Map Height: Set the height of the map container (e.g., 500px). This can be left blank to use the default height.
Mouse Wheel Zoom: Enable or disable zooming the map via mouse wheel/trackpad scroll. Disabled is the default to prevent accidental zooming while scrolling the page. Toggle to Enabled when you want scroll-to-zoom behavior.
Marker/Shape On Click: Choose what happens when a map marker is clicked:
Open Infowindow – Show an info bubble on the map (default).
Redirect to Single Listing Page – Go directly to the listing’s page.
Open Single Listing in a Lightbox – Show listing details in a lightbox overlay.
None – No action on click.
This works the same as with other skins, providing interactive ways to view listing info from the map.
Info Window Trigger: Appears when Marker/Shape On Click is set to Open Infowindow. Choose Show on click (default) or Show on hover to control how the infowindow opens. This applies to markers only (not shapes).
Map Search: Enable to let the map’s viewport filter the listings (so the list/grid only shows what’s on the map). (Pro feature: requires Pro.)
When enabled, panning or zooming the map will dynamically update the listings shown, which can be a powerful way for users to explore.
(If an Auto GPS or geolocation option is provided by an add-on, it can be integrated here to center the map on the user’s location, but by default List + Grid doesn’t include that without an add-on.)
Map Limit: Set a maximum number of listing markers for the map (default 300). Keep this at a reasonable number to avoid performance issues. With List + Grid, since users can toggle views, you’ll usually want the map to reflect whichever view is active.
(Note: List + Grid toggling uses the same set of listings; the map will typically display markers for all loaded listings, regardless of whether the user is currently viewing the list or grid. It’s one combined shortcode.)
The Layout settings for List + Grid skin have some unique options because this skin encompasses two layouts in one:
Default View: Choose which view is shown first when the page loads. Options:
Grid View – Display the grid layout first (multiple columns).
List View – Display the list layout first (single column list).
By default, this may be set to Grid. If you know your audience prefers lists, you can set it to List instead. The user will still have a toggle to switch views manually.
Listings Per Row (Grid): Choose how many columns to use in the grid view (when users switch to Grid). Options are 2, 3, 4, 6, with 3 per row as the default. This setting affects only the grid layout; the list layout is always 1 per row.
Limit: Set the number of listings to display per “page” or initial load. Default is 12. As with the Grid skin, using a multiple of the columns (if possible) is ideal for the grid’s last row to be filled. For example, if 3 per row, a limit of 12 shows 4 full rows.
Pagination Method: Select how to load additional listings beyond the first set:
Load More – Show a Load More button below the listings (works for both list and grid views; clicking will load more in whichever view is active).
Numeric Pagination – Show page numbers (will reload the shortcode for the new page; the user will remain in whichever view they were using).
Disabled – No pagination; only the first {Limit} listings are ever shown.
By default, Load More is active. If you switch to numeric pagination or disable it, it applies to both views.
Listing Link: Choose how listing detail pages open on click. (Pro feature.) Options are the same:
Normal (open in current page), - Lightbox, Right/Left/Bottom Panel, etc. If any pop-up or panel is chosen, the Listing Style in Lightbox dropdown will appear to select the single listing layout.
This setting covers both list and grid items since they are the same listings. For example, if you choose Lightbox, clicking a listing title or image in either list or grid view will open the lightbox detail view.
Choose the initial sort field and order (e.g., date descending, or price ascending) that will be applied when the listings load. For instance, you might sort by Newest first by default.
This default sort will be in effect regardless of whether the user is looking at the list or grid view.
Display Sort Options: Toggle on to show sort controls to the user. Typically, the sort dropdown or list will appear above the view toggle, so users can sort the results.
Sort Style: Choose Drop Down or List style for the sort UI.
Available Sort Options: Enable/disable and reorder the criteria as described for the Grid skin. You can allow sorting by various fields (Date, Title, Price, Rating, etc.) and rename them if needed.
The sort options, when used by the user, will affect the ordering of listings in whichever view is active at the time (and if they switch views after sorting, the order remains, because it’s the same listing set).
For example, if you enable sorting by Price and Rating, a user could sort by Price (Low to High) while in grid view, then toggle to list view and see the listings still in that price order.
Use the Search tab to embed a search/filter form directly with your List + Grid shortcode. This is useful if you want users to narrow down the listings they see in the List + Grid shortcode:
Searchable: Toggle to enable or disable search for this shortcode. When enabled, the List + Grid shortcode can be filtered by a search form. When disabled, the shortcode shows fixed results that do not change based on search queries.
Search Form: Select which Listdom search form to display with this List + Grid shortcode. This dropdown will list any search forms you have created by their titles. Choose a form that has fields relevant to these listings.
Search Form Position: Choose where the search form appears in relation to the List + Grid shortcode:
Show on top
Show on bottom
Show on left
Show on right
Show before the listings
Top or bottom placement usually works best. Left or right can be used as a sidebar, and “Show before the listings” places the form ahead of the listing content. In List + Grid layouts, top or bottom placement usually leaves more room for the view toggle and the listings themselves.
Sticky Search Form: When using Show on left or Show on right, enable this option to keep the sidebar form visible while scrolling. If the form is taller than the viewport, Listdom automatically adds a vertical scrollbar.
Sticky Offset (px): Set the top spacing for sticky sidebar forms. This helps prevent overlap with fixed headers. Leave it empty to use default spacing.
Disabled: Submit normally with a full page reload.
On Submit: Apply filters via AJAX when the user submits the form.
On The Fly: Update results as the user changes fields.
The fields users see come from the selected search form itself. The Search settings here only control placement and behavior.
Usually, you will create a custom search form tailored to the listings shown in the List + Grid shortcode and select it here. That way, users can refine what they see without leaving the page. The filtered result set stays the same when visitors switch between the list and grid views.
To build and configure those forms, see Create Search & Filter Form and Search Form Fields and Options. For a practical walkthrough, see Listdom Search Forms.
The Filter Options tab lets you predefine criteria to limit which listings are shown in this List + Grid shortcode, even before any user search or interaction. These filters work behind the scenes to include or exclude listings based on taxonomy terms or other attributes.
For each filter type below, you can configure an Include list or Exclude list of terms. “Include” means only show listings that have those terms. “Exclude” means hide any listings that have those terms. If you leave a filter category blank, it imposes no restriction on that aspect.
Categories: Filter by listing categories.
Include Categories: Choose one or more categories; only listings in those categories will appear in this List + Grid shortcode.
Exclude CategoriesPro: Choose categories to omit; any listing in those categories will be left out.
Locations: Filter by location taxonomy.
Include Locations: Only show listings that are in the selected location(s).
Exclude LocationsPro: Omit listings that are in the selected location(s).
Tags: Filter by listing tags.
Include Tags: Show listings that have at least one of these tags.
Exclude TagsPro: Do not show listings that have any of these tags.
Features: Filter by features (these are like amenities or boolean attributes of a listing).
Include Features: Listings that have any of the selected feature(s) will be included.
Exclude FeaturesPro: Exclude listings that have any of the selected features.
Labels: Filter by label terms.
Include Labels: Show only listings that have one of these label(s) (for example, only “Featured” listings).
Exclude LabelsPro: Hide listings that have any of these labels.
Author (Listing Owner): You can restrict by listing author (the user who posted the listing).
Select one or more authors under Include to show only listings by those user accounts.
Or select authors under Exclude Pro to hide listings by those users.
Custom Fields: If you have custom fields associated with listings, they appear here for filtering based on the field type. Use these to include listings based on custom metadata (exclude options are not available for custom fields).
Checkbox: Enter the checkbox value to match.
Time: Pick a time value.
Date: Select a date.
Tel: Enter a phone value.
Textarea: Enter text to match the textarea content.
Text: Enter text to match the field value.
Number: Set a minimum and/or maximum range (two numeric inputs).
Dropdown: Choose one or more values from the dropdown list (multi-select).
Radio: Enter the radio value to match.
Datetime: Select a date and time value.
URL: Enter a URL value.
Email: Enter an email value.
Image: Image fields are not available as filters in this section.
Rank AddonRank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
MembershipsMembership: Added by the Listdom Membership add-on. Filter listings by membership packages using checkboxes.
You can combine multiple filters. A listing must satisfy all the Include filters and none of the Exclude filters to appear. Within a single filter type, if multiple terms are included, a listing that has any one of those terms will pass (logical OR for included terms within one filter type). Exclusions work similarly: if a listing has any one of the excluded terms, it will be filtered out.
If no Filter Options are set, the shortcode shows all eligible listings by default.
These pre-filters form the base dataset for the shortcode. If you also attach a search form, that search refines this pre-filtered set rather than replacing it.
Using Filter Options, you can create a List + Grid shortcode that is targeted to a specific subset of listings. For example, you might include one category and one location, or exclude one tag, label, or author, to keep the output focused on exactly the content you want.
Dual-View Directory: A business directory site implements the List + Grid skin so that users can choose their view. By default, the grid view is shown (3 cards per row). Users can click a “List/Grid” toggle to switch to a full-width list view if they prefer reading descriptions. The site owner enabled the map on top, showing pins for all businesses. This gives a very flexible browsing experience: map + list or map + grid.
Property Listings Toggle: A real estate portal uses List + Grid to satisfy both detail-oriented and visual users. The default view is set to List (so it starts as a vertical list with lots of details like address and description). However, a toggle at the top lets users switch to Grid view, which shows larger photos in a gallery style. The shortcode is filtered to include only “For Sale” properties (using Filter Options) and has a search form on the left side to refine by price range and bedrooms. This one shortcode page effectively serves multiple user preferences in one place.
Listdom on WordPress.orgLearn more about the Listdom plugin, read reviews, and find the download on the official WordPress repository.
