Standard hooks and template functions are relied upon by classic WooCommerce functionality. This approach is being changed as Block Editor integration expands, but standard template hooks and functions are still used by many 3rd-party plugins for WooCommerce integration. Therefore, a rendering method within JetEngine listings must be provided.

Compatibility with third-party solutions like the Variations Swatches plugin is enabled by this widget. Additionally, design consistency between listings and other WooCommerce components is facilitated when standard template functions are used.

To implement these capabilities, one can use the Woo Data widget that is available in the Listing Elements section of the widgets panel in Elementor.

Using the Woo Data Widget

This widget enables standard WooCommerce hooks and template functions within a listing. Previously, this capability was only accessible programmatically through code snippets or shortcodes.

Differences from Dynamic Field and the types of WooCommerce data that can be rendered by the Woo Data widget include:

• the hooks cannot be called by the Dynamic Field widget, so third-party element integration is prevented;
• lower-level elements are output by the Dynamic Field widget — for example, a product’s add-to-cart URL can be provided, whereas the full button is rendered by this widget;
• no styling settings for output data are included in Woo Data; thus, a lightweight method for WooCommerce template element rendering is offered — essentially equivalent to code-based calling, the styling will be derived from the current theme.

Availability of the widget is extended to Elementor, Bricks, and the Block Editor.

Woo Data Widget Settings

The Content settings tab of the widget contains the following settings:

• Data Type — a field that allows one to select the type of WooCommerce data that needs to be rendered. Two options are available: “Hook” and “Template Function”. If the “Hook” option is selected, the following fields are revealed:
  • Hook Name — a field that allows one to select the type of hook to call: “Before product,” “Before product title,” “Product title,” “After product title,” and “After product”;
  • Core Callbacks — a field that allows for including/removing standard WooCommerce callbacks on this hook. This option is useful for integrating third-party functionality (which is not a part of WooCommerce core) added via hooks.

• If the “Template Function” option is selected in the Data Type field, the following fields are revealed:
  • Template Function — a field that allows one to select which function to call: “Add to cart,” “Quantity input,” “Product thumbnail,” “Product title,” “Product price,” “Product rating,” “Product sale flash,” “Product meta”;
  • Add Link — a switch that allows one to add a link to the “Product thumbnail” and “Product title” functions, allowing wrapping the function’s output in a link to the product’s single page (deactivated by default).

Displaying the Variation Swatches

Product variation swatches from the Variations Swatches plugin can be displayed inside JetEngine listings when the complementary JetEngine CartFlows Swatches plugin is installed and activated. In the Woo Data widget settings, the following configurations should be applied: 

• Data Type — in this field, the “Template Function” option should be selected;
• Template Function — in this field, the “Cartflow Variation Swatches” option should be selected.

In order to display the “Add to Cart” button, another Woo Data widget should be added to the listing, and the following configurations should be applied:

• Data Type — in this field, the “Template Function” option should be selected;
• Template Function — in this field, the “Add to cart” option should be selected.

Thus allowing the display of the product variation swatches on the front-end.

That’s all; now you know how to display product variation swatches using the Woo Data widget from JetEngine on a WooCommerce store.