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.
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 pageswoocommerce_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:
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? 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.
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
Along with the shop to edit 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 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.
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:
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.
