Help Center

Displaying Add to Cart Dynamic Link in the Listing Item

Displaying Add to Cart Dynamic Link in the Listing Item

Learn how to insert Add to Cart link with the JetEngine dynamic link widget to the WooCommerce product listings.

Before you start, check the tutorial requirements:

Things to know

Optionally, instead of JetWooBuilder, the JetThemeCore plugin can be installed and activated with Archive Page Template for the Products post type (for the Listing Grid placing) created.

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 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 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 Listing Item with 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?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.