Quick Tutorial: woocommerce_before_single_product_summary Hook

Are you trying to update your Woocommerce single product pages?

In the next few minutes you will discover how to dynamically update, edit and change the woocommerce_before_single_product_summary hook for your Woocommerce product pages.

Type of hook: Action

The woocommerce_before_single_product_summary hook is an action hook. This means it allows you to call a function at a specific point in time that “does or modifies something” when it is executed.

In this case as the Woocommerce product page is being loaded.

Best use(s) of this hook:

When you want to update, modify or add something before the summary section / (div) of the product page.

The exact placement and div that encloses this hook depends on your theme but this hook typically controls the left side of the product page.

This usually consists of the product images, product thumbnails and the “SALE” image.

When is this hook executed:

This hook is executed after: woocommerce_before_single_product hook.

This hook is executed before: woocommerce_single_product_summary hook

Default actions that use woocommerce_before_single_product_summary hook

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );
add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_thumbnails’, 20 );

How to use this hook

You can easily update this hook by adding the following code to your functions.php file in your theme (hopefully you’re using a child theme)

woocommerce_before_single_product_summary Example:

Lets say I wanted to highlight each product that was tagged “WordPress Essential Service” by having text that appeared before the product image.

Before woocommerce_before_single_product_summary Hook update

Here is an example of how you would use the woocommerce_before_single_product_summary Hook to do it

// By using priority 5 the following function will execute after the display price function
add_action( ‘woocommerce_before_single_product_summary’, ‘update_before_product_summary’, 5 );
function update_before_product_summary (){
$wp_essential_slug_str = ‘wordpress-essential-service’;
$wp_essential_html = ‘<span class=”wp-essential-service”><img width=”40″ src=”https://www.whoisrichardknight.com/wp-content/uploads/2020/02/check-mark.jpg”>Wordpress Essential Service
// Get product tags
$prod_tags_array = get_terms( ‘product_tag’ );
if ( !empty( $prod_tags_array ) && !is_wp_error( $prod_tags_array ) ) :
foreach ( $prod_tags_array as $tag_obj ) :
// If the product has a tag with the slug set to “wordpress-essential-service” then add text to product page
if ($tag_obj->slug == $wp_essential_slug_str) :
echo $wp_essential_html;

After woocommerce_before_single_product_summary Hook

** There is an endless number of customizations you can do with this hook as well as any of the other woocommerce product page hooks… this is just one “tiny” example.

woocommerce_before_single_product_summary Links

Github Link: https://github.com/woocommerce/woocommerce/search?utf8=%E2%9C%93&q=woocommerce_before_single_product_summary

Woocommerce Hooks Reference Link: https://docs.woocommerce.com/wc-apidocs/hook-docs.html