How to Add Description after Price in WooCommerce

WooCommerce Add Description after Price

If you want to add a WooCommerce description after the price of the product on the product page, you can achieve this using a filter hook.

Previously, we looked at how to add a WooCommerce price suffix and how to add text before price in WooCommerce.

Adding the description is no different from these two tutorials. Let us break down the process step by step and accomplish it with a practical example.

How to Add Description after Price in WooCommerce

To add the WooCommerce description after the price, you need to understand that the description on your WooCommerce product page is the product custom post type excerpt.

This product description that is added in the product description as shown below; is the excerpt of the product custom post type.WooCommerce Add Description after Price

 

In the front the WooCommerce product description is added to the single page after the price in the storefront WooCommerce theme as shown below:

 

WooCommerce Add Description after Price

 

If you have a WooCommerce theme that does not have the description after the price and that is where you want to add it, you can use a filter to add the description after the price.

Steps to Add Description after Price

  1. Log in to your WooCommerce site you can access the WordPress dashboard using the guide here.
  2. Add the action hook to the place you want to display the description, for example, you can have this filter hook : add_filter( 'woocommerce_get_price_html', 'njengah_add_description_after_price' );
  3. Create a callback function that had the_excerpt() along with the price in the return of the callback function.
  4. Add this code to the functions.php and update the changes.
  5. Check the front and you should see if the new changes are working.

Add WooCommerce Description After and Before Price

As we have seen in the image above, the Storefront theme comes with the WooCommerce description placed after the price. In this tutorial, we will try and move it before the price to illustrate how you can add a description after the price or on any other place on the single product page.

WooCommerce Get Price Hook

For the filter we will add hooks on the woocommerce_get_price_html The wooCommerce hook and the callback function will have the_excerpt() a function joined to the price either before or after to display it respectively.

The following is the code that you should add to display the description either before or after the price.

You can move the $price return function before or after  $description to display it either way.

/**
 * Add description before the  price
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_add_description_after_or_after_price' );

function njengah_add_description_after_or_after_price($price){

    $description = the_excerpt(); 
		  
		  
	return $description . $price   ;
		  
}

When you add the code you should see the description displayed either, before or after the price as shown on the image below:

WooCommerce Add Description after Price

You can also use this approach to add the product description in any other place in the WooCommerce theme. For example, the following code should add the product description after the title on the shop page.

/**
 * Add description after title in shop page
 */   

add_action( 'woocommerce_after_shop_loop_item_title', 'njengah_product_description_shop_titles', 40 );
 
function njengah_product_description_shop_titles() {
	
	   the_excerpt();
 }

When you add this code to the functions.php you will see the description is added to the product in the shop page as you can see in the image below:

WooCommerce Add Description after Price

Conclusion 

In WooCommerce you can add the product description after the price or before the price using hooks that attach to specific places on the single page or any other WooCommerce theme page.

The most important thing that you should always remember is that description is equivalent to the_excerpt() the default WordPress function that prints out excerpts. Using this function, you can change where the product is displayed in the WooCommerce pages as I have illustrated in this tutorial.

Similar Articles

Comments are closed.