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.

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

 

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

  • woocommerce_get_price_html: changes the way price is shown on the product and shop pages
  • woocommerce_cart_item_price: changes the way product prices are shown in the cart table (not at checkout since only quantity / total price are shown 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:

 

and on your single product pages:

 

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? 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.

WooCommerce
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:

WooCommerce price display

 

Along with the shop display:

WooCommerce price 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.

Filter WooCommerce Price Display 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

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:

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

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:

WooCommerce price display

 

The same will happen with items in the cart — the WooCommerce price display will be conditionally adjusted depending on whether the item 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 about how the product is packaged, or it can allow customers to more easily compare products.

All Visualmodo WordPress themes are fully compatible with WooCommerce WordPress plugin and also add amazing special feature on it.