Stand with Ukraine. Fight for freedom and democracy

Troubleshooting //
Displaying Add to Cart Dynamic Link in the Listing Item

Displaying Add to Cart Dynamic Link in the Listing Item


Is that possible to set the “Add to Cart” button with the Dynamic Link widget in the Listing Item?

Tutorial requirements:


The “Add to Cart” Source of the Dynamic Link widget will allow displaying the “Add to Cart” button on the single product page (for simple products) and in the listing of products.

To add the Add to Cart Dynamic Link to the Listing Item, follow these steps:

Create the WC Product Query

Proceed to the JetEngine > Query Builder tab on the WordPress Dashboard and hit the “Add New” button.

Type the query Name and pick the “WC Product Query” Query Type.

WC product query

You can learn more about the other settings from the Query Builder WC Product Query Type tutorial.

When you finish customizing, push the “Add/Update Query” button.

Create a Listing Item

To learn more about the listing items, go to the What is a Listing Template? tutorial.

Go to JetEngine > Listings and click the “Add New” button.

In the Setup Listing Item pop-up, choose the “Query Builder” Listing source and the recently created Query, type the Listing item name, and pick the “Elementor” or “Blocks (Gutenberg)” Listing view. Then, hit the “Create Listing Item” button.

setup listing item

Fill the Listing Item with the widget like the Archive Thumbnail, Archive Categories, Archive Title, Archive Price, etc.

Drag-n-drop the Dynamic Link widget and pick the “Add to Cart” Source. In the Label field, hit the “Dynamic Tags” button and choose the “WooCommerce Product Field” option. In the Settings pop-up, set the “Add to Cart Text” Field.

dynamic link widget source add to cart

Proceed to the Advanced tab of the Dynamic Link widget. For applying the WooCommerce “Add to Cart” button styles, add the “woocommerce” class to the CSS Classes field.

dynamic link CSS classes

After you finish, hit the “Update” button.

Display the Listing Item with the Listing Grid widget

Navigate to the JetWooBuilder template (e.g., Shop Page), where you want to display the listing item, and click to edit it with the Elementor editor.

Place the Listing Grid widget and select the needed Listing in the General settings. To learn more about this widget, move to the Listing Grid Widget Overview.

listing grid

Finally, hit the “Update” button and observe the page with the Listing Grid on the front end.

That’s all. Now you know how to set the Add to Cart Dynamic Link in the JetEngine Listing Item with the WooCommerce “Add to Cart” button styles.

Was this article helpful?
Still need help?
Submit a request