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!

 

 

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

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

Want to customize the shop page using page builders such as Elementor, Beaver? Check this guide out. 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: 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.      

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Disable Magnifying Glass Effects On WooCommerce Products’ Images Without Using Plugin

If you go to any stores, you can find that if you hover the product’s images, there is a magnifier appears to help you view the products better (the product image is zoomed in so you can see a specific area better). WooCommerce supports this feature too. However, I personally don’t like the default effects of WooCommerce: Original image: woocommerce original image Product image on hover: woocommerce with magnifier when hover So, if you are like me, you may wonder: how can I disabled product zoom feature in woocommerce?

How To Disable Magnifying Glass Effects On WooCommerce

Disabling the zoom effect in WooCommerce is quite simple. However, you need to do something first.

First thing first, create a child theme if you haven’t got one

If this is the first time you’ve heard of WooCommerce child theme, let me introduce it quickly. A child theme is an extension of your current theme that lets you add additional functionalities to your site without changing your current theme’s code. Why is it beneficial and how to create one? Check out my post on creating child theme here. Now, I assume that you have created and activated the child theme. However, if you are in a rush, you can proceed without one. All you need to do is to go to Appearance -> Editor and put the following code at the bottom of your functions.php file
add_action( 'after_setup_theme', 'bc_remove_magnifier', 100 );

function bc_remove_magnifier() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
If you view the product image now and hover over the image, the effects are now removed.

Conclusion

As you can see, if you don’t like the default behavior that WooCommerce gives to products image on being hovered, removing it is quite simple. This tip is also useful if you are making a custom plugin to add a better magnifying effect to the products’ images.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin

The WooCommerce add to cart buttons are often designed by the theme developer. Sometimes, the default button styles provided by the theme doesn’t suit your need. That’s when you need to do something to change the add to cart button styles. But how?

Customize your add to cart button using plugin

We are going to use a plugin called  Ultimate Custom Add To Cart Button to customize the buttons on your WooCommerce store. This is the plugin I develop so I would love to have your feedback. The plugin is free to use and there is a pro version available here which has additional cool features (Which also has a $20 discount at this time). Now, we are going to learn how to customize the add to cart button for your site.

Change the add to cart text

I have covered how to change the add to cart, read more, view products… text on the buttons in this post. You can have  a look at that for more details.

Add shopping cart icon to the button

We are going to add the cart icon to the add to cart button. As you can see now, my buttons don’t have any icon. add to cart button without an icon Now, we go to Ultimate ATC Button to add a cart icon to that. I’m going to use a shopping cart icon. So, I enter the text shopping and you can see that, the list of suggestions shows: I select the last option, fa-shopping-cart and scroll down to the bottom then click on save changes. Now, if I reload the product page, I will see the cart icon in the button: add to cart button with shopping cart

Change button’s background color and text color

With this plugin, you can easily change the background color of the button too. change add to cart button background color The options are straightforward. You can pick whatever color you want for the button’s background. For example, I’m going to use the blue color for the button: select color for the button Now, I click on save changes and view the results: view button color changed As you can see, the text color doesn’t work really well with this background. You can change that too with the text color option in the plugin:      
change add to cart button’s text color
If I reload the product page, I can see the text color has changed: button text color has changed If you are using the pro version, you can change the background to use a gradient or an image too.

Change button’s padding and margin

The last section in the plugin allows you to customize the add to cart button’s padding and margin. You can enter your desired values here (in px) to adjust the button’s style. For example, I set the margin and padding for the button to 20px as in the image below: change add to cart button padding and margin woocommerce Now, if I view the product page, the button has changed accordingly: add to cart button changed padding and margin In addition to let you change button’s styles, you can do the following in the pro version:
  • Set an image as the buttons’ background. That means you can use an image to replace your add to cart button
  • Remove the up and down arrows in the quantity input box
  • Completely change the style of the input box (add plus and minus buttons to increase and decrease order’s quantity)
Click here to find out more about Ultimate ATC Buttons PRO

Change the add to cart button’s styles with CSS

As the time I write this post, almost all themes support a section called Additional CSS (You can access this panel by clicking on Appearance->Customize). This is the place you can add additional CSS to your site. If you know CSS and confident in your CSS skills, it’s not a big problem to add background color, hover color or even gradient on the background. The important thing is to get the selector of the button. The trick is to use the inspection tool of your browser. Let me show you how: As you can see, if you know a bit of front end web development, this is the easiest way.   However, not all people can do that. I would recommend you use my plugin above to achieve the designs much quicker and easier.

Conclusion

As you can see, there are quite many options for you to change to tweak the styles of the button. If there are settings you need that aren’t available in the plugin, please let me know and I’ll add that to the plugin.

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content

How To Change Add To Cart, View Products, Select Options Button Text In WooCommerce

WooCommerce provides default text for their add to cart buttons. Here are the default text for all types of products in WooCommerce:
  1. Simple product – add to cart
  2. Variable product – select options
  3. Grouped product – View products
While those default text make sense, you often want to change it to something more attractive to boost your sales. If you know PHP, you can easily change the text as you like. You can stop reading the post now. However, if you don’t know how to edit the WooCommerce functions, this post is for you. Good news is, we are not going to mess with WooCommerce code today. That’s too risky. We are going to use a plugin that I created specifically for this purpose. Let’s download the ultimate add to cart button customizer for WooCommerce plugin here Now, we are going to change the WooCommerce button text for each case:

How to change add to cart text for simple product

Now, I assume that you have installed the plugin and activated it. If you click on Ultimate ATC Button->Configure buttons link on the left, you’ll see this interface:
ultimate add to cart configure buttons
ultimate add to cart configure buttons
Now you can see that at the top left section, there are three text boxes. If you want to change the add to cart text on simple products, simply add your desired text in the first box. For example, I’ll use the text “buy now”. Make sure you scroll down and click on save changes. Now, if I view the shop page or the product page of a simple product, I’ll see “Buy Now” instead of the default Add To Cart. It’s simple, isn’t it? Well, now you can guess how we can change the text for variable and grouped products.

How to change “select options”, “view products” on variable and grouped products

At this point, you will not need more hand-holding. I’ll change the text for variable and grouped products as below: After clicking on save changes, I see the following results:

Conclusion

As you can see, changing the button text for your WooCommerce product can be very easy using the plugin. I hope you enjoy it. The plugin has a tons more options for you to fully customize your buttons.    

Get Quality WooCommerce Tutorials Delivered To Your Emails Daily

No spam, only quality content