Classes Listing
The Classes Listing shortcode allows you to dynamically display a list of classes on any page or post within your site. It can be customized with several parameters to control the appearance, filtering, and layout of the class listings.
To apply this shortcode in Elementor, search for the 'Classes Listing' widget and add it to your desired section. You can customize the widget settings and enable filters based on your requirements.
Available Parameters
Use the following parameters to customize the appearance and behavior of the [dtlms_class_listing] shortcode:
Parameter
Description
disable-all-filters
true or false – Disables all 7 available filters when set to true.
enable-search-filter
true or false – Enables the Search Class text field.
enable-display-filter
true or false – Enables the Grid/List display toggle filter.
enable-classtype-filter
true or false – Enables filtering by Class Type.
enable-orderby-filter
true or false – Enables the Order By dropdown.
enable-instructor-filter
true or false – Enables the Instructor filter.
enable-cost-filter
true or false – Enables filtering by Cost (Free/Paid).
enable-date-filter
true or false – Enables filtering by Start Date.
listing-output-page
Select a specific page where search results should be displayed. Choose “Default - Ajax Output” for displaying results on the same page.
default-filter
upcoming-classes, recent-classes, highest-rated-classes, most-membered-classes, paid-classes, or free-classes. Requires filters to be off.
default-display-type
list or grid – Set the default display type (only applies if “Default - Ajax Output” is selected).
class-item-ids
Enter specific class IDs (comma-separated) to include (only for non-Ajax output pages).
instructor-ids
Enter specific Instructor IDs (comma-separated) to include (only for non-Ajax output pages).
apply-isotope
true or false – Enables Isotope layout (not compatible with carousel). Only applies when not using “Default - Ajax Output”.
post-per-page
Number of classes to display per page (non-Ajax output only).
columns
1, 2, or 3 – Number of columns to display. “3 Columns” requires enable-fullwidth=true and is valid only when all filters are disabled.
enable-fullwidth
true or false – Enable full-width layout (non-Ajax output only).
type
type1, type2, or type3 – Choose from available display design types. Please note that these types are predefined styles and cannot be customized.
class
Custom class for additional styling.
Carousel Specific Parameters
Parameter
Description
enable-carousel
true or false – Enables carousel display (not compatible with isotope).
carousel-autoplay
Set autoplay delay in milliseconds (e.g., 1000 for 1 second). Leave empty to disable autoplay.
carousel-slidesperview
Number of slides to show (1, 2, or 3). When display type is set to "List", only 1 works.
carousel-loopmode
true or false – Enables continuous looping of carousel items.
carousel-mousewheelcontrol
true or false – Enables mouse wheel navigation.
carousel-bulletpagination
true or false – Enables bullet-style pagination.
carousel-arrowpagination
true or false – Enables arrow-based pagination.
carousel-spacebetween
Space (in px) between slides. Example: 15px.
Last updated