How To Edit WooCommerce Price Display

See in this tutorial how to change the WooCommerce price display so you can show different things on your shop page using WooCommerce WordPress plugin

As prices are based on skewer quantity, we want the “product” to represent one skewer, and the price to be the skewer price. That way, customers can order 3 skewers and be charged the right amount.

You can definitely change the pricing display so it’s easier for customers to compare unit price across products. If several products will have different unit prices, you’d need a more advanced way to do this, but here are a couple methods to get you started with adjusting the WooCommerce price display.

For either method, there are a couple important filters we’ll need to use:

Let’s say you want to add a label to the end of all of your product prices, such as “per package” (helpful if your products are bundles of something or come in pre-packaged sets). You can change the pricing display to append this label to the price with the product and cart price filters:

and on your single product pages:

What if you want to specifically change the price display for a particular product? This can be done with the same filters, as they’ll also pass additional arguments for you to conditionally change the price. For example, let’s return to our skewer example from the question. While skewers are sold individually at $2 per skewer, we want to show “$15 per kg” as the price instead so customers can compare different products.

This time we’ll separate out these filters and use two functions to modify the product and cart prices. We’ll first check for the product ID, then change the pricing display for that product alone.

The first function will change my product page:

Along with the shop display:

While the second function will adjust my cart display with my new pricing:

However, if you have multiple products with unit prices, this method will be very cumbersome, and we probably don’t want to have a switch / if statements for everyproduct ID. Instead, I’d recommend using a product custom field to adjust the price display. We can use the ID to get this field, then save ourselves a lot of hard-coding since we’ll pull the field in programmatically.

If you have to change the pricing display for some products but not all of them, or each product would have a different unit price, using a custom field will give us a far simpler code snippet to implement, as we can add the field for each product, then just retrieve this field with our snippet.

Add custom field

Once you’ve added this, you can then retrieve the unit price, and if one is set for the product, adjust the pricing display to use that unit price and your custom label instead:

In this case, pricing display on the product / shop page will only be changed if a unit price is set. If not, they price will remain the same:

Just because you price items in one way doesn’t mean you need to display that price to customers. Sometimes changing the price display can give customers more information about how the product is packaged, or it can allow customers to more easily compare products.

Related posts:

Custody solutions are critical for the token economy to move into its next phase of growth. And they were needed yesterday. As reported by Bloomberg, Bitfinex is the latest exchange to suffer…

Daniel was sitting there, not really sure what to expect. If anyone else had walked into the room they would have assumed we didn’t even know each other. He was wearing nice dress shoes and pants, a…

I talk a lot about the Cloud. In fact if I were doing shots every time I mentioned the word, I’d probably be facedown on my desk by 9AM. Like many buzzwords in the C-Suite there’s a lot of excitement…