How To Add Extra Text To WooCommerce Price Field Without Using A Plugin

By default, WooCommerce only shows the price of the product on the product page (a long with the currency symbol). In most case, this info is enough. However, there are cases you want to add some extra details to the price field. For example in the case below, you want to add “per kg” after the price:

woocommerce add extra text to price field

If you think that you can enter text into the price field of the product, you will be surprised to find out that is not possible. We can only input number in the price field of the product. This is for a good reason.

So, what can you do?

The easy way to add extra HTML content to WooCommerce price field, without using a plugin

Let me show you how to achieve this. First, you will need to create a child theme. If you don’t know how, read my post on how to create child theme here. It’s short and to the point.

Why do you need a child theme? It’s because we are going to add some custom code and using child theme is the best way to add additional code to your WordPress website.

Now, let’s go to Appearance->Theme Editor and select the functions.php file of your child theme. Make sure it’s the active theme.

Here is the code we are going to add at the end of the file:

add_filter( 'woocommerce_get_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );
add_filter( 'woocommerce_get_variation_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );

function binary_carpenter_add_extra_price_content($price, $product)
{
  return ($price) . " per kg";	
}

Or, what is it look like on my site:

adding custom code to add extra content to woocommerce price field

And that’s done! That’s how I added the “per kg” text after the price. Make sure you don’t forget the dot (.). Without it, the code will not work.

As you can see, you can add the text before or after the price. It’s all depend on you.

Conclusion

This is a quick method to add additional text to the price field on your WooCommerce product page. This method is suitable for a quick fix or a store that have few products, or that all the products share a common way to calculate the price. The text you add here will appear on EVERY product page so be careful when you use this method.

If you want a per product approach, it’s probably best to use a plugin. If you need for advanced functions that the plugin I mentioned doesn’t cover, please let me know.

Thanks for your interest in the post. Have a good day!

 

 

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!

How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin

WooCommerce shop page is like a category page in WordPress, there is no built in tool (like the editor) to customize its look. If you have been trying to customize WooCommerce shop page without any success, you are at the right place.  At the end of this post, you will know everything you need to customize your shop page to your liking. Let’s get started.

Here are the steps we are going to do to customize the shop page:

  1. Create a child theme of your current theme (if you haven’t)
  2. Create the folder structure for the WooCommerce shop page template in your child theme
  3. Creating content for your WooCommerce shop page

Create a child theme of your current theme (if you haven’t)

Creating a child theme is necessary to customize woocommerce shop page. Actually, if you want to do any customization to your theme or other plugins (such as WooCommerce), create a child theme. It is the safest way to add functions or change styles in WordPress. Creating a child theme isn’t hard. I’ve made a tutorial here so you can follow easily. It will not take you more than a few minutes to read:

Step by step guide to create child theme in WordPress

Create the folder structure for the WooCommerce shop page template in your child theme

So I assume that you have created the child theme. In this example, I’ll use a child theme that I’ve created for storefront. The theme folder is storefront-child-theme:

create child theme folder

Let’s navigate to the theme folder and create a folder named woocommerce:

create woocommerce folder inside child theme

Inside that folder, we are going to create a file called archive-product.php

 

create shop page templete in woocommerce folder

This archive-product.php is the WooCommerce shop page template file.

Now, if you have followed and done all the steps mentioned above (with the child theme activated), when you visit your shop page, you should see a blank page.

Congratulations, you have successfully customized your WooCommerce shop page.

Creating content for your WooCommerce shop page

Now, it is totally up to you to customize the design of the shop page. If I open the file archive-product.php in a text editor and put the following content:

<h1>Hello this is the shop page</h1>

Then, if I go back to the shop page, sure enough, I’ll see this:

It doesn’t look really attractive though. If you are confident in your design and HTML skills, you can stop reading here and start working on your shop page. However, if you just need something that has similar layout to your post’s and allows you to control the products that display on it, read on.

Create shop page template from post’s template

Now, let’s see how quickly you can customize your store shop page using your post’s template. Let’s go to the parent theme of the child theme you’ve created and copy a file named single.php. If that isn’t available, you can copy index.php instead. In my case, I have both single.php and index.php available so I’ll choose single.php.

Let’s go to our child theme folder, paste the file into woocommerce folder:

paste the single file in woocommerce folder

Now, let’s delete the archive-product.php file and rename the single.php file to archive-product.php. Basically, we’ve replaced the archive-product.php file with the post’s template file.

If I go to the shop page now, I’ll see something like this:

new shop page design from post template

The products are listed basically displayed as posts are.

We are going to use the power of WooCommerce shortcodes to make it looks like a real shop page. You can grab woocommerce shortcodes here to match your need.

So, for example, I want to display products from all categories in 3 columns, 12 products max. The shortcode will be:

[products limit="12" columns="3"]

But where do you put the shortcode? In the archive-product.php file of course.

Let’s open archive-product.php file (inside your child theme folder/woocommerce). Different theme has different structure. This is mine:

content of archive product

You should delete the part between <main and </main. Then, put the following code right at the position of the code you deleted:

<?php echo do_shortcode('[products limit="12" columns="3"]') ?>

The content of archive-product.php looks like this:

display the woocommerce shortcode in the shop page

Save the file and go to the shop page, here is what I got:

customize woocommerce shop page

You can see, it looks a lot like a shop page now. If you know HTML, you can add additional code in to make the page more lively. In my experience, I just need to play with shortcodes to accomplish my desired design.

Conclusion

That’s it! That’s how you customize WooCommerce shop page. As always, I hope you find the tutorial helpful. Don’t hesitate to ask if you have questions.

 

 

 

Want One More WooCommerce Secrets?

I never spam, only quality info that benefits you!