WordPress Hook

The "WordPress Hook" element empowers you to seamlessly integrate any WordPress or WooCommerce hook into your page, post, product, or template.

Hooks provide developers with the ability to modify or enhance WordPress’ functionality without the need to directly edit the core code of WordPress. For more insights into WordPress Hooks and their usage, refer to this article: https://www.wpbeginner.com/glossary/hooks/

In This Article

Selecting Hook Type: Manual Input

Selecting Hook Type: WooCommerce Hooks

You can easily locate the "WordPress Hook" element in the content elements overview:

Selecting Hook TypeCopy link

After adding the " WordPress Hook" element to your post, page, or template, you can specify the type of hook. You have two options to choose from:
In this section, you can specify the hook name that you intend to incorporate into your page, post, or template. For example, consider the scenario where you create a custom function called example_callback and connect it to the example_action action hook: 
function example_callback(  ) {
// (maybe) do something like:
echo 'Test Message';
}
add_action( 'example_action', 'example_callback' );
Once you've defined this function, you can easily display it anywhere on your website by adding the " WordPress Hook" element to your post, page, or template and specifying " example_action" in the " Hook Name" field:

WooCommerce Hooks

This option is particularly crucial 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.
Let's delve into this in greater detail:
Imagine your online shop incorporates single product templates designed with TheGem template builder. You can learn more about single product templates in this article.
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. 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.