Getting StartedTheme Options Page OptionsPost TypesElementorWPBakeryTemplates BuilderExtrasDynamic Content How To
TheGem Documentation
Single Product Builder
Third-Party Plugins

Third-Party Plugins

If you manage a WooCommerce shop with product, cart, and checkout templates created using TheGem templates builder, achieving 100% compatibility with third-party plugins becomes essential.

Many WooCommerce plugins utilize WooCommerce Hooks to present their content and functionality within WooCommerce templates.

Imagine your online shop incorporates single product templates designed with TheGem template builder. Now let's assume you would like to add "Compare Products" button using the third-party plugin "YITH WooCommerce Compare".

If you would use the built-in product layout options for your product pages, all you would need to do is to install this plugin, make the desired configuration and that's it - the "Compare" button would be automatically shown on product page.

This seamless integration is facilitated by the "woocommerce_single_product_summary" WooCommerce hook used by the YITH WooCommerce Compare plugin and presented in the standard WooCommerce product page.

However, if you've crafted your unique custom product page template within TheGem templates builder, the "Compare" button might not appear due to the absence of the "woocommerce_single_product_summary" hook:


Why is this the case? When you create a custom product page template, you assemble it with selected content elements, such as "Product Title" and "Product Add to Cart." However, this approach might eliminate the standard PHP hooks that WooCommerce offers by default, often causing issues with compatibility of third-party plugins that rely on these hooks. In our example, the YITH WooCommerce Compare plugin fails to locate the expected hook on the product page, resulting in the inability to present its functionality.

This is where the "WordPress Hook" content element proves invaluable. This element empowers you to seamlessly integrate any WooCommerce hook into your page, post, product, or template.

So, to address this situation, simply insert the "WordPress Hook" element into your single product template using the page builder and choose "WooCommerce Hooks" in the "Hook Type" field.


Following this, you can specify:

WooCommerce Hook Type

In this section, you can select from three primary categories of WooCommerce hooks:

  • hooks for product pages
  • hooks for the cart page
  • and hooks for the checkout page.

Hook

In this section, you can select the specific hook from the list of available WooCommerce hooks. The default value is "Default for plugins compatibility," which is recommended to ensure compatibility with most WooCommerce third-party plugins (like in the "YITH WooCommerce Compare" example).

Note: in some cases, the "Default for plugins compatibility" option might not yield the desired result. In such cases, consult the documentation of the respective third-party plugin to determine the specific WooCommerce hook it employs. Afterward, you can select the corresponding hook in the "Hook" field. For example, if you would need to add "Request a Quote" button using YITH Request a Quote plugin, you would need to insert following hooks:

  • in the beginning of the product template you need to insert "woocommerce_before_single_product" hook
  • and then, in the position where you need to display the "Request a Quote" button, you need to insert "woocommerce_single_product_summary" hook

The WordPress Hook element also provides an option to "Clean actions." Enabling this option is typically advisable to eliminate the default elements hooked by WooCommerce itself. You can display these elements using appropriate widgets, thereby bypassing the need for their display via hooks. Hooks generally serve the purpose of ensuring compatibility with third-party plugins or incorporating your own custom PHP code.