How to add custom HTML or image above WooCommerce product short description

The WooCommerce product page contains a lot of information related to the product, its title, price, description, etc. But sometimes we may want to add some additional information for our products. We may want to add some custom HTML on the product page. In this post, we will see how we can add custom content above the product short description using WooCommerce hooks.

WooCommerce has lots of hooks & filters to add custom content to our website. One such hook is ‘woocommerce_single_product_summary‘ which can be found in the content-single-product.php template file.

The product title & short description is attached to woocommerce_single_product_summary action hook. And as we want our HTML between title & short description, we will use this hook.

Let’s create a simple function where we will simply display “Hello World” on the product page.

You won’t see anything on the product page just yet. We need to attach this function to the woocommerce_single_product_summary action hook. Our function will run whenever this action hook gets called from the content-single-product.php. 

The title & short description in the content-single-product.php have different priorities of 5 & 20 respectively. If we want to add any content in between them, we need to set the priority between 5 and 20. So let’s set it to 15.

If you go to any product page, you will see “Hello World” displayed just above the product short description.

This is just a simple example. Now let’s add some HTML content. Many eCommerce stores display a size chart for their products. So let’s create a function where we will define our HTML for the size chart.

As you can see, the chart is displayed just above our product description.

This chart will show up on all the product pages. There can be several scenarios for displaying custom HTML.

You may want to add the chart for products of a particular category, a single product or all products.

Let’s create a product category called ‘Men’ and display this chart for products of men’s category. We can get all the categories for a product with get_the_terms() function. The get_the_terms() function takes two arguments – post ID and taxonomy name. The taxonomy name for product categories is ‘product_cat’. 

After we have all the categories for a product, we loop over them and check if  ‘men’ is one of them. If ‘men’ is one of the categories, we display the content. If there are no categories in the product, we just return back from the function. We can do this using the category ID or category slug.

Show custom text above Short Description by Category ID

If we want to select the categories by ID, we use the term_id property of a category. Here the category ID for ‘Men’ is 15. So, we check if the current product has a category with the ID of 15. If yes, then we display the content.

Show custom text above Short Description by Category Slug

We can also select the categories by a slug. Instead of using term_id property, we use slug property of the category.

Show custom text above Short Description by Product ID

If we want to display the chart on selected products, we can do it by getting their IDs and looping over them. If we want to display some content for just one product, we will put a condition to check the ID of the current product against the id we want and if they match, we display the content.

Show custom text above Short Description by Product Tag

If we want to show the table for the products of a particular tag, the method will be same as a category. We just have to replace the taxonomy name from ‘product_cat‘ to ‘product_tag‘. Here we are checking if one of the tag slugs for the product is ‘men’. We can also check it with the tag IDs using the term_id property, similar to the category method.

Now let’s add an image of the size chart in place of the table. We just have to replace our table with <img> tag. Add the image URL in the src attribute and it will now be displayed on the product page.

Show custom text above Short Description from an HTML file

Our code currently contains HTML & PHP in one file. But you may want your views to be separate from your logic. In that case, move all the HTML code in the separate .html file. Include the file in your main PHP file using include() or include_once() function. In this case, if we put our table in a custom.html file, we include it in the PHP file and display it.

woocommerce_single_product_summary can be really helpful if you want to add any specifications, highlights, size charts, etc for your WooCommerce items. You can change the position of the content by changing the priority in our action hook.

Go on, give it a try. 

Through this post, you have seen the various ways in which you can add images, text or any HTML above the short description. Sometimes you may want to add content below the short description too. In order to learn how you can do this, check out this post.