Woo Data Element Overview

Initially, one should build a query that will be later used as a source for the listing template. It can be done in the WordPress Dashboard > JetEngine > Query Builder directory by pressing the “Add New” button.

In the opened editing page, one should enter the Query Name (for example, “WC Query” in this overview) and set the Query Type to “WC Product Query”.

Next, in the WC Product Query section, one can specify the Product Status (here, “Published (publish)”) and select the Product Type (here, “variable.”) 

Other settings can be adjusted as well if needed, and when the query is ready, the “Add Query” button should be pressed.

Next, one should build a listing based on the added query. To do so, one should proceed to the WordPress Dashboard > JetEngine > Listings/Components page and hit the “Add New Item” button.

In the opened pop-up, the “Query Builder” Listing source should be selected, then the just-built query should be picked in the Query field (here, “WC Query”), the Listing item name should be specified, and the “Bricks” Listing view should be picked. 

Once the pre-editing customizations are made, one should press the “Create Listing Item” button.

In Bricks, one should search for the Woo Data element and add it to the page.

This element’s settings contain only one customization tab, GENERAL.

By default, the Data Type can be selected; it can be either “Hook” or “Template Function.” 

If the “Hook” option is left selected, the following fields are presented for customization:

• Hook Name — a selector that allows selecting the type of hook that will be called. Among options are: “Before product,” “Before product title,” “Product title,” “After product title,” and “After product”;
• Core Callbacks — a toggle that is active by default. When active, it prevents the default Woo callbacks from being rendered on this hook.

If one selects the “Template Function” option, by default, only one field becomes available, Template Function, where one can select the product template function that will be shown with the help of this widget.

Among the Template Function options available for display are:

• Add to cart — a function that adds an “Add to cart/Select options” button to the listing;

• Quantity input — a function that adds the quantity selector to the listing;

• Product thumbnail — a function that adds the product thumbnail to the listing. If selected, it also allows activating the Add link toggle that, when active, will redirect users to the single product page once clicked on the thumbnail image;

• Product title — a function that adds the product title to the listing. It also allows activating the Add link toggle that, when active, will redirect users to the single product page once clicked on the post title;

• Product price — a function that adds the product price to the listing;

• Product rating — a function that adds the product rating to the listing;

• Product sale flash — a function that adds the product sale flash badge to the listing.

• Product meta — a function that adds the product meta to the listing;

• CartFlows Variation Swatches — a function that adds the product variation swatches from the CartFlows Variations Swatches plugin to the listing. Check more about How to Use CartFlows Variations Swatches Inside JetEngine Listing.

When the listing is ready, one can press the “Publish” button to save the result. 

Also, check our Woo Data Widget Overview in Elementor and the Woo Data Block Overview in Gutenberg.