Question
Is that possible to set the “Add to Cart” button with the Dynamic Link widget in the Listing Item?
Tutorial requirements:
- JetWooBuilder or JetThemeCore plugin installed and activated;
- WooCommerce plugin installed and activated;
- JetEngine plugin at least 3.0.2 version installed and activated;
- Elementor or Gutenberg editor;
- A created Shop Page Template with JetWooBuilder or Archive Page Template for the Products post type with JetThemeCore (for the Listing Grid placing).
Answer
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.
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.
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.
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.
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.
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.