Snippet: Hook Before Related Products in WooCommerce

I encountered an issue with WooCommerce products where text added via a hook was always inserted after the “Related Products” widget. This solution ensures the content is placed before it.

The Kadence Theme Pro offers an elegant and powerful “Elements” feature to add custom elements to your website.

Usually, the appropriate hook for placing the new element is available in the “Placement” dropdown. However, I recently faced a situation where it wasn’t listed.

Jump to the solution without Kadence.

Objective

Place a new element at the end of the product description, just before the related WooCommerce products.

Solution: Kadence Elements

This feature is only available in the Kadence Theme Pro. Navigate to Design > Kadence > Elements.

To add a hook that isn’t predefined, select the last option, “Custom Hook” under the Placement settings.

A text field labeled “Custom Hook” will appear. Enter the following hook into this field:

woocommerce_after_single_product_summary

Make sure to set the Priority to 19.

Standard Solution

Warning: Always perform a backup first! Even small errors can break your website.

The easiest way to add small snippets is by using a code snippet plugin. You can use either Code Snippets or WPCodeBox.

If you’ve been using WordPress for a while, you might prefer managing your snippets in the functions.php file of your Child Theme.

Here, I’ll demonstrate how to display a paragraph with the text “Example”.

<?php
function custom_add_text_after_product_summary() {
    echo '<p>Example</p>';
}
add_action('woocommerce_after_single_product_summary', 'custom_add_text_after_product_summary', 19);