Suppose, you are surfing different online stores for buying a new hoody. Luckily, you have found the one you have been looking for. So, what's the next thing you will notice? The PRICE!

Now, if you see a price range higher than your budget, you will hesitate to buy that product. The seller provided a range because the product has variations. For example, the hoody you liked has 2 colors red and black. The seller is charging more for the red one. Some buyers like you might want to buy the black one, but they would be confused because of the price range. Unless you select the color, you will never know the actual price!

When you are a store owner, you can guess a similar scenario using reverse psychology. So, when you place a higher range, customers will surely bounce from your product page and you lose your potential sales.

Thus, a common strategy would be to show the minimum price of the range. If you are a WooCommerce store owner, you cannot modify the price range format of variable products, sad but true!

WooCommerce is one of the most popular eCommerce solutions for WordPress. Currently, it powers almost 28% of all the online stores around the world. Impressive, right? To amaze you more – WooCommerce held 41% of the 2017 market share. And it is still increasing!

Today, we are not going to discuss that. Instead, we are here with a valuable piece of tutorial for store owners using WooCommerce. We will show you – how easily you can change the behavior of the price range format that WooCommerce stores display for Variable Products.

Price Range in WooCommerce Store for Variable Products

In WooComerce, there are many types of products. Variable products are one of them and play a vital role when you are trying to sell products with different variations.

Thanks to WooCommerce, you can create variations of the same product. This means it is possible to create a single product with multiple sizes, colors, weight,s etc. Besides that, you can set different prices for the variations of your product. So, when you create a variable product with multiple prices, the price of the product is shown as a range on the product page. If you create a variable product with different prices, you would see the price range on the product page as something like the following screenshot.

It is common for vendors not to share the price range that he has set for a variable product. Unfortunately, WooCommerce does not let you modify the price range from its settings. So, what would you do in such a scenario?

In that case, you need to make some modifications. You don't have to worry or be scared as this modification is very simple. Also, it's not difficult at all. You can easily change the price range with a few lines of coding.

Here, we will provide you a simple piece of code that you can use. This will show only one price on the product page.

How to Modify WooCommerce Variable Product Price Range

For the modification, you will need to do some custom coding. If you are confused about the file location and have less concept of coding it is better to add the code to your child theme function.php file.

Now, if you do not have a child theme then you will need to create one on your website. A child theme is also safe in case you want to override the template or function. you need to follow the steps below–

Install a child theme and activate it.
Create a file called help.php and insert the file into your child-theme folder.
Now, open the functions.php file of your child-theme and then insert below code in the file.

If you are having difficulties in creating the child theme, you can use this free plugin.

The Simple & Easy Code that You Need to Insert :

function wc_varb_price_range( $wcv_price, $product ) {
 
    $prefix = sprintf('%s: ', __('From', 'wcvp_range'));
 
    $wcv_reg_min_price = $product->get_variation_regular_price( 'min', true );
    $wcv_min_sale_price    = $product->get_variation_sale_price( 'min', true );
    $wcv_max_price = $product->get_variation_price( 'max', true );
    $wcv_min_price = $product->get_variation_price( 'min', true );
 
    $wcv_price = ( $wcv_min_sale_price == $wcv_reg_min_price ) ?
        wc_price( $wcv_reg_min_price ) :
        '<del>' . wc_price( $wcv_reg_min_price ) . '</del>' . '<ins>' . wc_price( $wcv_min_sale_price ) . '</ins>';
 
    return ( $wcv_min_price == $wcv_max_price ) ?
        $wcv_price :
        sprintf('%s%s', $prefix, $wcv_price);
}
 
add_filter( 'woocommerce_variable_sale_price_html', 'wc_varb_price_range', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_varb_price_range', 10, 2 );

Modified Price Range in WooCommerce

After you use the code, you will get the outcome as the picture below:

You will now have a single price. When a customer will choose a different variation of a different price it will be shown above the Add to Cart button.

This is a really easy process. Just follow the instructions and control your price range on WooCommerce stores. If you face any difficulties, don't hesitate to comment.

Tag Archives: variable product

How To Disable WooCommerce Variable Product Price