Quick Tutorial: woocommerce_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_single_product_summary hook for your Woocommerce product pages.

Type of hook: Action

The woocommerce_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 in the summary section / (div) of the product page which is typically found on the right side of the product page.

When is this hook executed:

This hook is executed after: woocommerce_after_single_product_summary hook.

This hook is executed before: woocommerce_before_single_product_summary hook

Default actions that use woocommerce_single_product_summary hook

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );

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_single_product_summary Example:

Lets say I wanted to highlight each product that was tagged “Editor’s Choice”

Before woocommerce_single_product_summary Hook update

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

// By using priority 15 the following function will execute after the display price function
add_action( ‘woocommerce_single_product_summary’, ‘update_product_summary’, 15 );
function update_product_summary (){

$editors_choice_slug_str = ‘editors-choice’;
$editors_choice_html = ‘<span class=”editor-product”><img width=”40″ src=”https://dev.whoisrichardknight.com/wp-content/uploads/2020/02/check-mark.jpg”>Editor\’s Choice (10% Off)‘;
// 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 “editors-choice” then add Editor’s Choice text to product summary
if ($tag_obj->slug == $editors_choice_slug_str) :

echo $editors_choice_html;

endif;

endforeach;

endif;

}

After woocommerce_single_product_summary Hook

woocommerce_single_product_summary Links

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

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