Adding Custom Elements in WooCommerce Using Visual Hooks

Learn how to insert Clerk.io elements using Visual Hooks in WooCommerce.

Within WooCommerce, certain website pages are created using Visual Hooks instead of being rendered from an HTML file. In order to add content to pages created via Visual Hooks, you will need to insert the Clerk.io content within the webshop's active functions.php file.

The functions.php file is usually located at the following path:

/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php

For example, to add a Recommendations slider with the Content @product-page-alternatives to your Product Page, you would include the following code within the main <php? ?> tags in functions.php:

// CLERK ADD PRODUCT PAGE SLIDER

add_action ( 'woocommerce_after_single_product', 'clerk_alternatives',5
);

function clerk_alternatives() {
$clerk_id = wc_get_product()->get_id();
echo "<span class='clerk'
data-template='@product-page-alternatives'
data-products='[$clerk_id]'>
</span>";
}

And, another example to add a Recommendations slider to the Add-to-Cart Page:

// CLERK ADD CART SLIDER
add_action ( 'woocommerce_after_cart_contents', 'clerk_cart_slider',5);

function clerk_cart_slider() {
 $clerk_id = get_queried_object()->term_id;
 echo "<span class="clerk"
data-template="@cart-others-also-bought"
data-products="[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ",";} } ?>]"></span>";
}

To add your own Recommendation sliders to the above pages, remember to replace the code within <span> </span> tags with the embed code provided in your Recommendations Content in my.clerk.io, like below:

The value set in add_action(), 5 in this example, tells WooCommerce the priority of the Content being added, which in turn influences how early the Content will be displayed in that Visual Hook. Note: When setting priority, WooCommerce only accepts multiples of 5.

More info about WooCommerce website pages that use Visual Hooks:

https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/