A WooCommerce product card needs its own fields – price, sale badge, Add to Cart button – that a generic blog-post card design doesn’t carry.
Dynamic Listing’s Smart Loop Builder (Beta) works the same way for WooCommerce products as for any other post type: a raw HTML/CSS card you write yourself, with WooCommerce’s own markup and shortcodes placed alongside the title and featured image.
For the full settings tour of the Dynamic Listing widget, see Dynamic Listing Widget Settings Overview.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Prerequisite: Elementor (free) installed and active.
- Edition: Dynamic Listing is a Pro widget – it needs The Plus Addons for Elementor Pro installed and its license activated. It will not appear in the free plugin.
- Widget to enable: go to The Plus Addons > Widgets, search for Dynamic Listing and turn its toggle on.
- Also needed: WooCommerce installed and active, with at least one published product.
Steps
- Add the Dynamic Listing widget, set Post Type to Product.
Set Style to Smart Loop Builder (Beta) and write the card’s markup in the HTML field, including price and Add to Cart markup, with the paired CSS field for styling.
Taxonomies under Content Source also exposes WooCommerce’s own product_cat, product_tag and product_brand taxonomies, so Category Wise Filter can filter the product grid the same way it would a blog listing.
Settings Overview
| Setting | What it does | Default |
|---|---|---|
| Post Type | Set to Product to query WooCommerce products. | post |
| Style | Smart Loop Builder for a raw-HTML/CSS product card. | style-1 |
| Taxonomies | product_cat / product_tag / product_brand available for filtering. | category |
Related Docs
- How to Create a Custom Post Type Loop Skin in Elementor Using Smart Loop Builder?
- How to Filter Custom Post Types by Taxonomy in Elementor?
Not verified
So you know exactly what has and has not been checked:
- Add to Cart’s AJAX behavior (adding without a page reload) when hand-written inside a Smart Loop Builder HTML card specifically was not click-tested.
