How To

How to Hide the Price Range for WooCommerce Variable Products

- Do you want to hide the price of all the WooCommerce variable products listed in your online store? The information mentioned below will help you do that.

Suppose, a customer is surfing your WooCommerce store for a red colored hoody. However, they come across two different price tags for the same product due to the available color. This situation arises when you as the online store owner add what is known as a WooCommerce variable products. So, if you do not want to turn away the customer solely on the basis of price, you should hide the price range and make it visible when the customer selects that particular variation.

The question is – How do you do that? Now

There are 3 different methods you can go about it. Let’s check them out one by one,

Method#1 – Install a Plugin

It is the easiest method to hide the price range for a WooCommerce variable product listing. All you need to do is download the Variation Price Display Range for WooCommerce plugin. Here’s how you can do it.

Steps to Install WooCommerce Variable Product Plugin

Go to the Plugin Select Add New from the WordPress dashboard.
Search for the Price Display Range for WooCommerce plugin in the search bar.
Click on the Install Now
Once installed, activate the plugin from the WordPress dashboard.

That’s not all! You also need to configure the plugin correctly to get the desired result. Here’s how you can do that.

Plugin Configuration Process

From the WordPress Dashboard, go to WPXtension, then Price Display.
Enable the Hide Default Price slider to hide the price range for the WooCommerce variable product.
Finally, click on Save Settings option to save the configuration.

Let’s now check out the second method.

Method#2 – Code Snippets

For this method, you will have utilize the Code Snippets plugin to hide the price range for the variable product.

Step#1 – Installing the Plugin

Open the WordPress Dashboard.
Search for the Code Snippets plugin in the WordPress directory.
Now, Install and Activate the plugin.

Step#2 – Add the Script

Go to Snippets, then Add New.
Add in a Snippet Title. For example: enter Hide Price Range for WooCommerce Variable Product”.
The Functions tabs should be selected in the code menu.
Now, copy the code below and paste it in the given code field.

//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;
}
Code FIELD

Go down to the bottom and click on Save Changes and Activate.
Now, go to the product page for any variable product in your WooCommerce store.
Check if the price range has been removed from the product page.
You will see a From price as the starting price.

Method#3 – Hide Price Range With Theme File Editor

You can hide the price range for WooCommerce variable product from your online store without using any plugins or coding. This method will help you do that.

Go to Appearance then Theme File
Choose Theme Functions (functions.php) listed on the right side under the Theme Files menu bar.

Note: If you are doing this process for the first time, a warning message will pop-up stating that editing the theme file can break the website and it is not recommended.

Choose the I Understand option, scroll down to the end of the functions.php section and paste the code snippet mentioned in the 2nd process above.
Click on the Update option to save the settings. Doing this will hide the price range for all variable products in your WooCommerce store.

Now, there are some sellers who might not agree with the idea of hiding the price of a product. However, it does offer two major benefits including:

Advantages of Hiding WooCommerce Variable Product Range

It lets you display the minimum price for a product as the starting price. Customers will be able to view the price range once they choose that specific variation of the product.
Hiding the price range for the WooCommerce variable products help you keep the product page simple and avoid giving out too many details.

Conclusion

If your online store has too many WooCommerce variable product listing, you can use any of the methods described above to hide the price. Doing this can also help increase traffic to your online store as customers would have to click on the product page to know more about it, including the price.

Also, if you are finding it hard to add a payment method for your WooCommerce store, do check out our guide on How to Add Payment Method in WooCommerce store.