How to change the display of WooCommerce variation prices in your store

WooCommerce variation prices plugin

If a product has variations with different prices then WooCommerce always displays the price as a range. This could be losing you sales. That's why you need the WooCommerce Variation Prices plugin.

Imagine that a product has variations that are priced between $10 and $25. WooCommerce will display the price as $10.00 – $25.00 throughout your store. The problem is that this often isn’t the best way to sell your products and can put customers off, resulting in lost sales.

Keep reading to discover the easy way to take control over how variation prices are displayed in your store. You'll learn how to list all variation prices separately, replace the price range with a "From" or "To" price, or even create your custom variation price format.

What's the best way to set different prices for product variations in WooCommerce?

Out of the box, if a product has variations that have different prices then WooCommerce will always display the price as a range. There's absolutely nothing you can do to change this, short of writing custom PHP code. It doesn't matter that displaying a price range might not be the best way to attract customers - that's the only option.

Fortunately, you can easily fix this by installing the WooCommerce Variation Prices plugin. This lets you replace the default variation price range with an alternate price format of your choosing.

You can choose to display the minimum variation price only, maximum variation price only, list all variation prices, or choose a custom format. Here's a list of all the different variation price formats that you can choose from:

  • Price range e.g. $50 - $100.
  • Starting price (long) e.g. From $50.
  • Starting price (short) e.g. $50+.
  • Maximum price e.g. Up to $100.
  • List all variation prices at once.
  • Hide the price at the top of the product page until a variation is selected.
  • Create your own custom variation price display format, with whatever wording you choose. As part of this, you can also change the price range separator from a dash to anything else, such as colon or other symbol.

As you can see, this variation price plugin for WooCommerce gives online store owners complete flexibility in how to display variable prices. You can even hide the price for variable products on the front-end. It also has extras such as automatically updating the main product price when the customer selects a variation.

Step-by-step: How to set up variable prices in WooCommerce

In this tutorial, I'm going to show you exactly how to change how your variable product prices are displayed. The new price format will be used wherever WooCommerce normally displays the default price range. This includes on your main Shop page, category pages, related products, and on individual product pages.

1. Set up the WooCommerce Variation Prices plugin

To start using WooCommerce Variation Prices straight away, watch the video at the start of this article. Alternatively, follow the step-by-step instructions below:

  1. Get the WooCommerce Variation Prices plugin. You’ll receive the plugin files and license key in a confirmation email. Install the plugin on your WordPress website and activate it.
  2. Once that’s done, the plugin setup wizard will open automatically. Activate your license key on the first page.
  3. Next, you can start changing the format for your variation prices. You can do this in the setup wizard, or do it later on the settings page at WooCommerce → Settings → Products → Variation prices.

2. Set the price display format

Use the Options dropdown to select a price format. The available options include:

  • Price range
  • Starting price (short)
  • Starting price (long)
  • Maximum price
  • List all variation prices
  • Hide the price until a variation is selected
  • Custom

If you choose the Price range option, you'll see the Price range separator field.

WooCommerce Variation Prices range separator

Here, you can enter a character to use as the price range separator. By default, this is set to a hyphen/dash character.

And, if you choose the Custom option, you'll see a Custom format field.

Custom variable product price format in WooCommerce

You can add any text you'd like to display here. It supports %min% and %max% tags. For example, from %min% to %max% + VAT would display the price as: "from $50 to $100 + VAT".

3. Choose product types

The option lets you choose the products types you want to apply the variation price format to.

Grouped product variation price format

You can choose to apply it to variable products, grouped products, or both.

4. Show selected variation price

Normally, the price range at the top of the WooCommerce product page remains visible even after the customer selects a variation. That's pretty limited, so you can use the WooCommerce Variation Prices plugin to change this.

When the Show selected variation price option is enabled, the main price of the product page is updated to show the price of the selected variation. This is much more user-friendly than always showing the low and high prices.

5. Bonus: Change the variation price format in the WordPress admin

So far, we've only looked at how to change the variation price format in the front end of your e-commerce store. You can also choose to show the modified variation price formats in the WordPress admin dashboard. This option is enabled by default, but you can disable it if you prefer.

Custom format preview in admin view

When is it a good idea to change the variation price format?

To help you decide whether you need the WooCommerce Variation Prices plugin, let’s take a look at some use case scenarios. These are examples of products that can benefit from displaying variation prices in a different type of price format:

Show the lowest variation price instead of the range

Online courses and other subscription products that have plenty of add-on option fields might want to show the lowest price (the base cost) only on the front-end. This is especially useful for anyone that has add-ons that significantly increase the cost of the base product.

For example, if the online course costs $99 and you give customers several add-ons such as:

  • A one-on-one session for $39 per month.
  • Access to the Discord community for $9.99 per month.

Then you wouldn’t want to display the online course’s price in a range like $99 – $147.99. That’s a huge difference. Potential learners might be put off by the highest price thinking they can’t afford the online course.

Using a WooCommerce variation prices plugin, you can instead use wording like ‘Starting at $99’ or ‘Starts from $99’.

Show the highest variation price instead of the range

Restaurants might want to display the highest price instead of the range for each item. This is particularly useful for pizzerias that sell single slices, half pies, and full pies as options. This way, the customer won’t be led to believe that a full pizza pie costs $5 when that’s the price of a single slice.

In this sort of scenario, you’d be better of displaying the prices using a separator like ‘$5 / $11.99 / $23’ to display the prices of single slices, half pies, and full pies.

Sell variations by weight

Stores that sell products by weight might want to list all variation prices or choose a custom format depending on the product. For example, meat shops that sell meat in pre-packaged variations might want to display the cost of each variation.

You can list prices on the front-end:

  • 500 grams - $5.40
  • 1 kilogram - $10.20
  • 1.5 kilogram - $15.99
  • 2.0 kilograms - $20.00

You can list the prices of all variations on the single product page.

List all variation prices WooCommerce

This is particularly useful if you want to sell product variations at different prices or offer a discount on specific variations.

Display the maximum price

Some stores might want to display the maximum price because the lowest variation price might be the price of a sample rather than the actual, full-size product. In this scenario, only the highest price matters.

For example, bakeries that sell cookies by the dozen might want to display the price of a full dozen instead of a price range that shows the price of one cookie and a dozen cookies. You could show the price as ‘Up to $25’ indicating that lower price options are also available.

Hide the WooCommerce variation price display

Other store owners want to hide or remove the WooCommerce variation price display from the product page. For example, maybe you want to hide the variation price range when customers first visit the product page. The price of the selected variation then appears when they choose a variation.

WooCommerce variable price FAQs

What's a WooCommerce variable product?

So far in this article, I've assumed you already know what is a product variation. Sorry about that!

In case you don't already know, WooCommerce comes with a choice of product types. One of these is called 'Variable product'. It allows you to create two or more options for customers to choose from.

WooCommerce product variations are useful for any type of product that is sold with a defined list of choices. For example, a t-shirt might be sold in a range of sizes and colors - so you would create a variation for each combination.

What’s wrong with the way WooCommerce normally displays variation prices?

As I mentioned earlier, WooCommerce displays product variation prices in a range that lists the lowest and the highest price. Here’s what’s wrong with this:

Showing the highest possible price

The problem with showing a range that includes the highest possible price is that it can be bad for buyer psychology. This is because you’re drawing attention to the highest possible price.

As a result, it can lose you sales and reduce your conversion rate – a disaster for any store owner!

Think of it this way: if the top of the range is above budget, the customer is likely to leave your store. Unless they select a variation with a lower price, they’ll never know which options are within their budget.

The solution is to use the WooCommerce Variation Prices plugin to change the variation price format into something more buyer-friendly.

Select a variation to see the actual price

WooCommerce requires customers to select a variation to see the actual price. If you sell products that have lots of variations, customers might be clicking around for a long time to find one with a price they’re happy with.

The solution is to use WooCommerce Variation Prices to list all variation prices at once.

Not suitable for all types of products

The default way WooCommerce displays variable product prices may simply not fit with the nature of the products you sell. For example, the lowest or highest price may be the norm and you only want to display this. Or, you might sell products by weight and need to add a ‘per KG’ price or something similar.

In this case, you’re better off using the WooCommerce Variation Prices plugin to create a custom price format that meets your exact requirements.

How many variations are allowed in WooCommerce?

WooCommerce works with unlimited numbers of variations. Once you get above a certain number of variations, they are loaded using AJAX to ensure fast load times regardless of the number.

However, I find that variations can be a pain to work with if you have a lot per product. That's because to create variations, you need to add your product attributes first (e.g. size and color). Next, you create a separate variation for every possible combination of attributes, and add a price, image, stock level etc. for each one. The number of variations quickly multiplies up exponentially if you have lots of attributes and variations.

In some cases, it's easier to use the WooCommerce Product Options option instead of variations. This provides an alternative way of adding options to products, and is much simpler than working with variations. It's also more flexible because instead of just displaying the options as dropdowns, you can choose from a wide range of styles such as checkboxes, file upload fields and clickable image buttons.

How to set different prices for product variations in WooCommerce?

When you create a variation for a WooCommerce product, it will have its own price field. Use this to add a different price for each product variation.

If you have lots of variations, then consider using the WooCommerce Bulk Variations plugin to bulk-select variations and set the price in bulk. For example, you can select all products with a 'Large' size attribute and set the price for all the large variations at once.

Next steps: Take your WooCommerce variation pricing to the next level

WooCommerce Variation Prices is perfect for store owners that don’t want to display variable product prices in the default range. It lets you choose from different options including displaying the minimum (or maximum) price only, listing all variation prices, and choosing a custom format.

Like all Barn2 plugins, WooCommerce Variation Prices comes with a full 30-day money back guarantee. This lets you try it risk-free on your store and get a refund if you're not happy for any reason.

This super-simple plugin only takes a few minutes to set up. Install it on your WordPress site and follow the simple instructions in the setup wizard to improve the way variable product prices are displayed in your store. It's a simple but important change that will change how customers perceive your pricing, helping to generate more sales for you 🔥

4 Comments

  1. Hello,

    I have a use case where my products has 5 different attributes but only 2 of them have an impact on the price. Currently the price only displays when the 5 attributes have been selected.
    Would your plugin be able to display the price when the 2 mandatory attributes have been selected?
    Thanks

    • Hi Nicolas, thank you for the comment. The plugin is mainly designed to improve the way that variation prices are displayed. It does not affect how the prices are displayed in terms of how many attributes are chosen. All the attributes have to be specified for the relevant price to be displayed. If you have further questions, feel free to reach through our Support Center. Cheers

  2. I want to know if your plugin can do that :
    So here I am selling products by the gram and the gram costs less and less depending on the quantity
    So I created gram variations with prices :
    Ex:
    1gr = 5€
    5gr = 3€
    10gr = 2€
    100gr = 1.40€

    I want to display on my product in the shop and every where “From €1.40” the lowest price per gram instead of displaying €5that is the lowest price, but not the lowest price per grams.

Please share your thoughts...

Your email address will not be published. Required fields are marked *