{"id":48146,"date":"2025-06-10T06:42:43","date_gmt":"2025-06-10T06:42:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=48146"},"modified":"2025-06-10T08:11:42","modified_gmt":"2025-06-10T08:11:42","slug":"woo-data-element-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/woo-data-element-overview\/","title":{"rendered":"Woo Data Element Overview"},"content":{"rendered":"\n

With the help of the JetEngine<\/em><\/a>\u2019s Woo Data <\/strong>element, one can display WooCommerce <\/em>variable product data in the listing templates<\/a> so it can later be displayed in the Listing Grid<\/strong><\/a> element.<\/p>\n\n\n\n

Building a Query<\/h2>\n\n\n\n
\n

Initially, one should build a query<\/a> that will be later used as a source for the listing template. It can be done in the WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>directory by pressing the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

In the opened editing page, one should enter the Query Name <\/strong>(for example, \u201cWC Query\u201d in this overview) and set the Query Type <\/strong>to \u201cWC Product Query<\/a>\u201d.<\/p>\n\n\n\n

Next, in the WC Product Query<\/strong> section, one can specify the Product Status <\/strong>(here, \u201cPublished (publish)\u201d) and select the Product Type <\/strong>(here, \u201cvariable.\u201d) <\/p>\n\n\n\n

Other settings can be adjusted as well if needed, and when the query is ready, the \u201cAdd Query<\/strong>\u201d button should be pressed.<\/p>\n\n\n\n

\"wc<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Creating a Listing<\/h2>\n\n\n\n
\n

Next, one should build a listing based on the added query. To do so, one should proceed to the WordPress Dashboard > JetEngine > Listings\/Components <\/em><\/strong>page and hit the \u201cAdd New Item<\/strong>\u201d button.<\/p>\n\n\n\n

In the opened pop-up, the \u201cQuery Builder<\/a>\u201d Listing source <\/strong>should be selected, then the just-built query should be picked in the Query <\/strong>field (here, \u201cWC Query\u201d), the Listing item name <\/strong>should be specified, and the \u201cBricks\u201d Listing view <\/strong>should be picked. <\/p>\n\n\n\n

Once the pre-editing customizations are made, one should press the \u201cCreate Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

\"setup<\/a><\/div>\n\n\n\n

In Bricks, one should search for the Woo Data <\/strong>element and add it to the page.<\/p>\n\n\n\n

This element\u2019s settings contain only one customization tab, GENERAL<\/strong>.<\/p>\n\n\n\n

By default, the Data Type <\/strong>can be selected; it can be either \u201cHook\u201d or \u201cTemplate Function.\u201d <\/p>\n\n\n\n

If the \u201cHook\u201d option is left selected, the following fields are presented for customization:<\/p>\n\n\n\n

\"woo<\/a><\/div>\n\n\n\n