When selling variable products on your WooCommerce store, you may want to hide the price range on the product page. Well, you don’t need to be a coding geek to do that. 

In this article, we will be sharing three different methods to hide the price range for WooCommerce variable products.

Before we begin, let’s see what are the benefits of hiding the price range for variable products on your WooCommerce store.

  • Show minimum pricing – You can display the minimum price for the product as the starting price when you hide the price for variable products in your WooCommerce store. Customers can view the price only after they select a specific variation of the product.
  • Avoid complexity in pricing – When there are multiple variations for a product like size and color, the price range will make it a bit complicated.
  • Keep the product page simple – People who prefer to keep the product page simple and avoid adding too many details would like to remove the price range.
  • Helps in marketing and conversion – Users are likely to click on the product page to know more about the detailed pricing of the product. This will increase traffic to your product page and the conversion rate on your WooCommerce store.

Now let’s see how the default price range looks for variable products in WooCommerce.

Nike White Walking Shoes price range from $35 - $50

That being said, let’s dive in.

Method 1: Hide price range using a plugin

This is one of the easiest methods to hide the price range for WooCommerce variable products. We will use the Variation Price Display Range for the WooCommerce plugin to hide the price range.

Step 1: Install the plugin

Navigate to Plugins > Add New from your WordPress dashboard. 

Search for Variation Price Display Range for WooCommerce plugin on the search bar.

Variation Price Display Range for WooCommerce plugin

Click on the Install Now button to install the plugin. Then activate the plugin on your WordPress dashboard. 

Step 2: Configuring the plugin settings

From your WordPress dashboard go to WPXtension > Price Display.

Navigate to Price Display from the WordPress dashboard

Enable the Hide Default Price slider to hide the price range for variable products.

Hide default price for variable products

Now click on Save Settings to save the settings.

Price range hidden for a sample product

This will hide the price range for variable products on your store site.

Method 2: Hide price range using Code Snippets

In this method, we will use the Code Snippets plugin to hide the price range for variable products

Step 1: Plugin installation

Open your WordPress dashboard.

Go to Plugins > Add New.

Search for the Code Snippets plugin in the WordPress plugin directory.

Code Snippets plugin from the WordPress plugin directory.

Install and Activate the plugin.

Step 2: Adding the script

Go to Snippets > Add New.

Adding new snippets to WordPress

Add a Snippet title. I will add ‘Hide price range for WooCommerce variable products’ as the snippet title.

Make sure the Functions tab is selected in the code menu.

Copy the following code and paste it into the code field provided.

//Hide Price Range for WooCommerce Variable Products
add_filter( 'woocommerce_variable_sale_price_html', 
'lw_variable_product_price', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 
'lw_variable_product_price', 10, 2 );

function lw_variable_product_price( $v_price, $v_product ) {

// Product Price
$prod_prices = array( $v_product->get_variation_price( 'min', true ), 
                            $v_product->get_variation_price( 'max', true ) );
$prod_price = $prod_prices[0]!==$prod_prices[1] ? sprintf(__('From: %1$s', 'woocommerce'), 
                       wc_price( $prod_prices[0] ) ) : wc_price( $prod_prices[0] );

// Regular Price
$regular_prices = array( $v_product->get_variation_regular_price( 'min', true ), 
                          $v_product->get_variation_regular_price( 'max', true ) );
sort( $regular_prices );
$regular_price = $regular_prices[0]!==$regular_prices[1] ? sprintf(__('From: %1$s','woocommerce')
                      , wc_price( $regular_prices[0] ) ) : wc_price( $regular_prices[0] );

if ( $prod_price !== $regular_price ) {
$prod_price = '<del>'.$regular_price.$v_product->get_price_suffix() . '</del> <ins>' . 
                       $prod_price . $v_product->get_price_suffix() . '</ins>';
}
return $prod_price;
}

Source: Learnwoo

Snippets added in the Code Snippets plugin to hide the price range

Scroll down to the bottom and click on Save Changes and Activate.

Now let’s test it. 

Go to the product page of any variable product in your store.

Price range removed for Nike White Walking Shoes

There you can see the price range has been removed from the product page, instead, you can see a ‘From’ price as the starting price. 

Re-enabling the price range

If you want to enable the price range for variable products on your WooCommerce, follow these steps.

Go to Snippets > All Snippets on your WordPress dashboard.

Disabling the snippets to show the price range anytime

Disable the snippet we added to show the price range.

Method 3: Hide price range using theme file editor

You can hide the price range for variable products on your WooCommerce store without adding any plugins. We suggested the plugin just to simplify the process. You can use the default options to hide the price range. 

Go to Appearance > Theme file editor

Go to Appearance > Theme File Editor

Select Theme Functions (functions.php) listed on the right side under the Theme Files menu bar.

If it is your first time editing the theme files of your website directly, you will encounter the following popup warning that editing the files directly may break your website and that it is not recommended. So, it is best to have the recommended fallbacks in place just in case anything goes wrong.

Warning message before editing the theme files.

After you click the ‘I understand’ button, scroll down to the end of the functions.php section. Simply paste the code snippet we mentioned earlier in this article. 

Adding the code snippet to the theme files (functions.php)

Click on Update File to save the settings. This will hide the price range for variable products on your WooCommerce store.

To show the price range again, all you need to do is comment on the code snippet or remove it altogether from the functions.php file.

Summing up

You can use the plugin method or use the default options to hide the price range for variable products on your WooCommerce store. All these methods work flawlessly but, the first method will be easier for beginners. 

Did you find this article to be helpful? Please leave a comment below.

Leave a Reply

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

Latest Posts

How to Find & Delete Unused Images on WordPress Sites in 2024

Imagine you are running an online shop with thousands of products, eac...

The Power of Personalization: Driving Sales with Strategic Product Recommendations

Today’s customers appreciate and value online personalization. Onlin...

How Can I Optimize eCommerce Product Pages for Increased Conversions?

The eCommerce landscape is booming, and online shopping is becoming an...