How Add Text Before the Price in WooCommerce

Table of Contents

Do you want to add text before the price in WooCommerce?

If this is the solution you are looking for, I will show you how to quickly and easily add text before the price in WooCommerce using a simple code snippet like the one I shared in the tutorial on how to add text after the price in WooCommerce.

Ideally, as we mentioned in that tutorial, to add text or content to a WooCommerce page or a WordPress page, you should make use of the WordPress filter hooks.

WooCommerce & WordPress Hooks

Essentially, filter hooks are designed to filter the content displayed on WooCommerce or WordPress pages like an ordinary ‘filter’ but in this case, there are the specific points where the new modifications are added and the content returned together for display.

To add text before the price in WooCommerce is not different, we will use the filter hook at the same event we used in the previous tutorial – how to add WooCommerce price suffix.

Add WooCommerce Price Prefix

For illustration, I will use the same setup I have used in all my WooCommerce tutorials – I have Storefront the default WooCommerce theme installed on the localhost.

I will add the pre-text before the price on the part indicated in the diagram above.

Steps to Add Text Before Price in WooCommerce

There are about three steps you can take to create the code that will add the text before the price on the WooCommerce product page. Let us outline these steps below:

Log into your WooCommerce site and navigate to the theme editor and open the functions.php file where we will add the code snippet.
Create a filter hook that hooks on the WooCommerce price ‘event’ which is ‘’woocommerce_get_price_html’ so the filter hook can be add_filter( ‘woocommerce_get_price_html’, ‘njengah_text_before_price’ );
Create a callback function with the text you want to add before the price. The callback function should pass the $price parameter and add the new text before returning the new price
Save these changes and check the front end if it works.

Now, it is time to illustrate with some code. Let us presume the text you want to add before the price is the ‘Recommended Retail Price’ we will abbreviate it as RRP.

The following code when added to the functions.php file of your WooCommerce theme, should add the text before the price:

/**
 * Add text before the  price
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );

function njengah_text_before_price($price){

    $text_to_add_before_price  = ' RRP '; //change text in bracket to your preferred text 
		  
		  
	return $text_to_add_before_price . $price   ;
		  
}

After adding this code to the functions.php file and saving the changes.

Check the front end, if the text is added before the price as seen in the image below:

We have successfully added the text before the price on the WooCommerce product page as shown above.

But a common question that may arise is how to add the text in between the two prices since the product is on sale price.

We can achieve this by checking if the product is on sale and we modify the code as follows:

/**
 * Add text before the sales price
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_onsale_price', 100, 2  );

function njengah_text_onsale_price( $price, $product ) {
  
  if ( $product->is_on_sale() ) {
    
	  $text_to_add_before_price  =  str_replace( '<ins>', '<ins><br>RRP ', $price);
	  
			return $text_to_add_before_price ;
    
	    }else{
     
	 return $price;
  
   }
  
}

After adding this code, you should see the text displayed before the sales price as shown in the image below:

Finally, we can combine the filter we added in the previous tutorial – how to add text before price in WooCommerce and this filter we have created so that we have a complete solution to add text before and after WooCommerce price.

The complete code to add the text before and after the price on the WooCommerce product page should be as follows:

/**
 * Add text before and after the price
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_and_after_price', 100, 2  );

function njengah_text_before_and_after_price( $price) {
  
    $text_to_add_before_price  = '  RRP '; //change text in quotes to your preferred text 
    
       $text_to_add_after_price   = '  for a pair of brakers '; //change text in quotes to your preferred text
	  
    return $text_to_add_before_price . $price . $text_to_add_after_price   ;
  
  
}

As you can see we just need one filter hook but we combine the variables in the return of the callback function to output the text before and after the price.

Conclusion

In this WooCommerce tutorial, we outlined how you can add text before the price on the product page and we have also demonstrated that you can combine the previous filter to add text before and after the price on a WooCommerce product.

This code should be placed on the child theme functions.php file and updated for the changes to be effective.

If you need more customization on this code snippet, you can always feel free to get in touch.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How Add Text Before the Price in WooCommerce

WooCommerce & WordPress Hooks

Add WooCommerce Price Prefix

Steps to Add Text Before Price in WooCommerce

Conclusion

Similar Articles

Related