June 7, 2023

How to Create a Dynamic Service List with JetEngine and Elementor

Play Video

This is a tutorial for creating a dynamic service list for your Custom Post Type (CPT) using JetEngine and Elementor, two powerful tools for WordPress website development. Moxet Khan will be replicating a feature similar to Airbnb’s amenities list, a feature that enhances user experience by providing detailed, interactive information about each property.

Steps to Create a Dynamic Service List

  1. Create a Taxonomy
    Navigate to JetEngine and create a new taxonomy. For instance, you can name it “Services” and associate it with your post type, which could be “Properties”.
  2. Add Meta Field for Icon
    While creating the taxonomy, you can add a new meta field named “Icon”. Set the type to “Media” and keep the format as “Media ID”.
  3. Add Services
    Go to your post type (e.g., Properties) and find the “Services” taxonomy. Here, you can add different services along with their icons. For example, you can add “Wi-Fi” and upload an appropriate icon.
  4. Assign Services to Properties
    Open a property and on the right side, you’ll find “Services”. Here, you can select the services offered by the property.
  5. Create a Listing
    Go to JetEngine > Listings and create a new listing. Set the listing source to “Term” and select your term (e.g., “Services”). Design the listing as per your needs.
  6. Insert the Listing in Single Property Page
    Go to Templates > Theme Builder and edit the single post instance for your post type (e.g., “Properties”). Insert the listing you created in the desired location.
  7. Create a Query
    Go to JetEngine > Query Builder and create a new query. Name it (e.g., “Services Query”), set the type to “Term”, and select your term (e.g., “Services”). In the “Include” section, select “Include with Term ID”, choose “Current Terms”, and set the taxonomy to “Services”.
  8. Apply the Query
    Go back to your single property page in the Theme Builder and apply the custom query to the listing grid.

By following these steps, you can create a dynamic services list for your properties, which can be easily managed and filtered in the future.

Why You Should Use a Dynamic List

A Dynamic Service List allows you to display relevant information in a structured and visually appealing manner. Moreover, using taxonomies for this purpose provides better manageability and filterability in the future.

Use Cases for This Tutorial

  • Real Estate Websites
    Display amenities offered by different properties.
  • Hospital Websites
    Showcase the specialties offered by different hospitals.
  • Service Provider Websites
    List the services provided by the business.

Common Issues

  1. Services not appearing on the property page
    Ensure that you have assigned the services to the property and that you have inserted the listing on the single property page.
  2. Icons not displaying correctly
    Make sure that you have uploaded the icons correctly while adding the services.

Required Resources

JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Moxet Khan
Moxet Khan is a YouTuber who specializes in solving complex WordPress scenarios with simple logic. He provides tutorials and walkthroughs on how to resolve various WordPress issues and challenges, such as fixing common errors, troubleshooting plugin conflicts, optimizing website performance, and more.
How to Create a Dynamic Service List with JetEngine and Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.