How to Change the Way WooCommerce Variation Price Ranges Display

Searching for a way to control how WooCommerce variation price ranges are displayed on your store?

By default, WooCommerce will display the full range of variation prices on your shop and single product pages. So if your variations range from $10 to $100, WooCommerce will show the initial variation price as “$10 – $100”.

For a lot of stores, this approach can be confusing for shoppers and bad for sales and conversion rates, for several reasons that we’ll discuss in a second.

To fix those issues, you might want to only show the cheapest price at first, hide prices until a shopper makes a selection, or implement some other custom pricing strategy for your store.

In this post, we’re going to show you a code-free way to make all those changes via an easy-to-use plugin. Here’s everything that you’ll learn how to accomplish:

1. How to change the variation price range.
2. How to show just the cheapest variation price – e.g. “From $10” or “$10+”.
3. How to show a list of all your variants/prices right away.
4. How to hide the price until a shopper chooses a variant.
5. How to update the product price when a variation is selected.

But first, let’s start with a quick discussion of why the default WooCommerce variation price display behavior might not be optimal and what you should do instead.

Why Is It Bad to Display the Variation Price Range?

In case you’re still a little confused regarding what we’re talking about, the default way that WooCommerce displays variation prices is in a low-high price range like below:

The lowest price in the range is the price of the cheapest variant while the highest price is the price of the most expensive variant.

There can be a few big drawbacks to this…

Showing the Highest Price Can Scare Away Shoppers

If you have a wide range of variant prices – like $10 – $100 – showing the full price range can scare away shoppers because you’re drawing attention to the highest price.

A lot of shoppers will anchor to that high price, which might make them leave even though they could afford one of the cheaper variants. That hurts your conversion rates and loses you sales.

A better option is to show something like “From $10” or “$10+”. That way, shoppers can anchor to the lower price, even though you still communicate that some variants are more expensive.

It’s Hard for Shoppers to Figure Out What They’ll Actually Pay

Beyond giving people sticker shock, only displaying a range can make it hard for shoppers to figure out what they’ll actually pay because they need to go in and select a specific variant before they see a price.

One solution here would be to list the prices of all variations right away so that shoppers can quickly see exactly what they’ll pay.

Your Variable Product Might Have Unique Needs (e.g. Selling By the Kilogram)

Showing a range just flat out doesn’t make sense for some types of variable products.

For example, let’s say you have a variable product where the vast majority of people purchase the cheapest variant, but you still include the expensive variant that a few shoppers choose. Maybe it’s an online course with an optional (and expensive) VIP coaching upgrade. If 98% of shoppers choose just the online course and only 2% add the VIP upgrade, it doesn’t make sense to give equal weight to both prices.

Instead, you might want to just display the price for the course itself and then shoppers can see the VIP coaching price if they select that variant.

Or, maybe you sell per KG. In this case, it might be better to just list all of the variation prices so that shoppers can instantly see how the price changes based on the weight that they purchase:

Or, for a last example use case, let’s say you sell a product where it actually makes more sense to display the maximum price. For example, maybe you typically sell your product in a bulk box that includes 100 items and costs $75, but you also offer a cheap sampler that costs $4 so that people can try it out.

If you want to encourage people to buy the full box, you might prefer only showing the maximum price, while still letting shoppers manually select the cheap sampler option if needed.

These are just a few ideas – your store might have totally unique situations. The nice thing about the plugin that we’ll show you below is that it will let you create your own custom variation price templates. Let’s go through it…

How to Control Your WooCommerce Variation Prices Without Code

If you searched Google for keywords about changing WooCommerce variation price display, like “how to show just the cheapest variation price on WooCommerce”, you probably noticed a ton of results that use custom code to achieve this.

Those solutions do kind of work, but they’re complex and difficult to customize to your needs unless you have a developer working with you.

If you want more control without the complexity, you can use the WooCommerce Variation Prices plugin from Barn2.

This plugin lets you easily implement a number of different variation pricing strategies including the following:

• Only showing the starting price (aka the cheapest variant price).
• Listing all variation prices.
• Hiding the main price on the single product page until the shopper selects a variant.
• Only showing the maximum variation price (this might be useful for some niche use cases).
• Creating your own custom template that includes the minimum and/or maximum price. You can use simple placeholders to control where to insert the prices.

WooCommerce Variation Prices lets you change how the prices display on both the shop page and the single product page.

It also integrates with other plugins that might display variable prices, including some plugins that we’ve written about such as WooCommerce Product Table (our tutorial) and Quick View Pro. Basically, if the plugin displays the variation price, it should work fine.

WooCommerce Variation Prices is a premium plugin, but it only costs $49.

To get started, purchase a copy from the Barn2 website. Then, follow along to learn how to set it up…

1. Install WooCommerce Variation Prices and Activate With a License Key

To begin, install and activate the plugin. You can download a zip copy of the plugin from the Barn2 website after making your purchase.

Once you’ve activated the plugin in WordPress, head to WooCommerce → Settings → Products → Variation prices and enter your license key to activate its features:

2. Configure Your Price Display Format

Now, you’re ready to configure how you want to display your variation prices. You have six different options:

• Price range – the default WooCommerce variation price behavior. You can choose which price range separator to use, though.
• Starting price (long) – show a message that says “From [cheapest_price]”. E.g. “From $25”.
• Starting price (short) – show the cheapest price with a plus sign after it to indicate that prices go up from there. E.g. “$25+”.
• Maximum price – show a message that says “Up to [highest_price]”. E.g. “Up to $50”.
• List all variation prices – show a list of each possible price, along with the name of the variation.
• Custom – create your own custom variation price display template that includes the minimum and/or maximum price. 

The first four options are pretty self-explanatory, but let’s take a quick look at the options to list all variation prices or create a custom message.

If you choose the Custom option, you can create your own custom template by entering some static text along with one or both of the following placeholders:

• %min% – inserts the price of that product’s cheapest variant.
• %max% – inserts the price of that product’s most expensive variant.

For example, let’s say you’re creating a restaurant ordering system for your pizza shop and you sell pizzas as full pies or by the slice (with a variant for each option).

You could create a custom template like this:

%min% per slice or %max% for the whole pizza.

Here’s how that would look on the front-end:

Much clearer than just showing the price range, right?

Or, another way would be to just list the prices.

If you choose the List all variation prices option, the plugin will replace the price range with an actual list that includes the name of each variant and its price. Here’s an example:

In addition to controlling how to display your prices, you also have the option to completely hide prices until a shopper selects a variant by checking the Hide the price until a variation is selected box. 

Below, you can see that the price is completely hidden when a shopper first lands on the page. Once a shopper chooses the size of the pizza they want, they’ll see the price for that variant:

3. Choose Product Types

Next, you can choose whether you want to apply your display format to variable products, grouped products, or both:

4. Choose Whether to Show the Currently Selected Variant Price

By default, the plugin will show your price display format until a user selects a variant. Then, it will replace the price display format with the price of the selected variant like this:

However, you might have situations where you want to always display the same variation price range at the top, even after a shopper selects a variant.

To set this up, all you need to do is uncheck the Show selected variation price setting. Note – this setting won’t be visible if you chose to hide the variation price.

With this box unchecked, your store will always display your chosen price range at the top and then display the price of the variant near the add to cart button like this:

5. Enable Variation Price Display in the WooCommerce Admin Dashboard

The last configuration option has to do with the backend WooCommerce admin.

If you check the Use in admin box, WooCommerce will use the same price display format when you’re browsing products in the Products list.

For example, if you set your price display format to Starting price (short) and enable the Use in admin setting:

Then you’ll only see the starting price in the Price column when you’re working in your dashboard, like so:

Get More Control Over Your WooCommerce Variation Price Ranges

For a lot of WooCommerce stores, the default way that WooCommerce displays product variation price ranges isn’t optimal.

With the WooCommerce Variation Prices plugin, you can easily adjust how your variation price ranges display to create a better configuration for your store.

If you want to get started, click the button below:

For some other ways to improve your variable products, check out our four tips for optimizing WooCommerce variations.

Do you still have any questions about how to configure WooCommerce variation price ranges on your store? Let us know in the comments

Adblock test (Why?)

SHARE

Unknown

• 
• 
• 
• 
•