How To Edit WooCommerce Price Display

Learn how to change and edit the WooCommerce price display so you can show different things on your shop page using Woo WordPress plugin

By Claudio Pires
Updated on July 25, 2022
How To Edit WooCommerce Price Display

See in this tutorial how to change and edit the WooCommerce price display so you can show different things on your shop page using the 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 changes the right amount.

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

How To Edit WooCommerce Price Display
How To Edit WooCommerce Price Display

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

  • woocommerce_get_price_html: changes the way price is present on the product and shop pages
  • woocommerce_cart_item_price: changes the way product prices are appearing in the cart table (not at checkout since only quantity / total price are present here, not the unit price).

Filter WooCommerce Price Display for All Products

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:

The woocommerce_get_price_html filter will change this on your shop pages:

How To Edit WooCommerce Price Display

and on your single product pages:

How To Edit WooCommerce Price Display

The woocommerce_cart_item_price filter will adjust this display within the cart as well:

The woocommerce_cart_item_price filter will adjust this display within the cart as well:

Filter WooCommerce Price Display for a Single Product

What if you want to specifically change the price display for a particular product? So, we can do it 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 in individual sale at $2 per skewer, we want to show “$15 per kg” as the price instead so customers can compare different products.

WooCommerce What
WooCommerce price display

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 in order to edit WooCommerce price display

The first function will change my product page
WooCommerce price display

Along with the shop to edit WooCommerce price display

Along with the shop to edit
WooCommerce price display

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

adjust my cart display

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 every product 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-codings since we’ll pull the field in programmatically.

Filter WooCommerce Based on Product Fields

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.

You can add a unit_price custom field to each product that requires it, then add the unit price value here.

WooCommerce price display

Add custom field To Edit WooCommerce Price Display

Once you already add this, you can then retrieve the unit price. So, if one is ready for the product, adjust the pricing display to use that unit price and your custom label now:

(wc_price() is a handy little function to format numbers with the shop pricing display settings, use it!)

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

WooCommerce price display

The same will happen with items in the cart. The WooCommerce price display will be conditionally adjusted depending on the item. So, has a unit_price set or not in the custom field:

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. How the product is packaged, or it can allow customers to more easily compare products.

All Visualmodo WordPress themes are fully compatible with the WooCommerce WordPress plugin and also add amazing special features to it.

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.