Are you looking for a way to hide the price range for variable WooCommerce products? By default, prices for variable products are displayed as a range. In some circumstances, you may want to hide the price range and display the product price only when the respective variant is selected.
Unfortunately, there are no built-in features in WooCommerce to help you with this. In this guide, we’ll show you how to hide the price range for variable products in WooCommerce with a few simple codes.
What is the price range for WooCommerce variable products?
Variable products allow you to sell the same product in different sizes, colors, weights, etc. You can also set different prices for each variant. By default, the prices for variations are displayed as a range on the product page.
However, displaying price ranges is not always preferred by WooCommerce store owners.
Let’s say your customers are searching for a jacket on your store page with a budget of $20. If your variable product displays the price range of $20 to $30, customers are likely to bounce from your product page and you will lose your potential sale. In this case, consider displaying only the minimum price of the range.
In other cases, you should hide the price of your variable products completely. Only when visitors select a specific variant will the price be displayed. This will entice your visitors to click on the variations to find out more details, increasing the chance of converting visitors into customers.
How to hide the price range for variable products in WooCommerce?
To hide the price range from variable product pages, you need to do some coding. But don’t worry, it’s pretty simple.
To do this, open the functions.php file of the (child) theme. You can find this file under Appearance > Theme Editor in your admin dashboard. If you’re having trouble creating a child theme, you can use this free Code Snippets plugin instead.
Hide the maximum price for variable WooCommerce products
As mentioned above, sometimes you only want to display the minimum price. This code will help you achieve that.
Simply add the following code snippet to the function.php file of your (child) theme.
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_sales_price_html', 'wc_varb_price_range', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_varb_price_range', 10, 2 );
Your variable products now have individual prices. The exact price for each variant is displayed when you select it via the “Add to cart” button.
Completely hide the price for variable products in WooCommerce
You can also completely remove the “From: $X” which indicates the starting price of the variation.
To do this, insert the following code snippet at the end of the functions.php file.
//Hide "From:$X"
add_filter('woocommerce_get_price_html', 'lw_hide_variation_price', 10, 2);
function lw_hide_variation_price( $v_price, $v_product ) {
$v_product_types = array( 'variable');
if ( in_array ( $v_product->product_type, $v_product_types ) && !(is_shop()) ) {
return '';
}
// return regular price
return $v_price;
}Now you can change the prices displayed on variable product pages with a few custom codes. What if you want to protect your product pages so that only certain visitors can access them?
In the next section, we’ll introduce you to a powerful plugin that gives you full control over the visibility of your store pages.
Password protection for WooCommerce store
PPWP Pro is one of the most popular plugins for password protection. The plugin helps you protect pages and posts, and also allows you to hide WooCommerce product pages, “Add to cart” buttons and the entire store.
PPWP Pro proves useful when creating customized products or building private wholesale stores. Customers must use the correct passwords to access and pay for your products.
Before you can use PPWP Pro to secure your products, you need to install and activate it on your website. Now, follow the steps below to secure your WooCommerce product pages, add to cart buttons and store page.
Password protection for WooCommerce product pages
It is possible to lock individual product pages with just a few clicks. All you need to do is the following.
- In your WordPress admin, go to the settings in the Password protection for WordPress section
- Select Products in the Post Type Protection field
- Go to Products in your admin navigation menu and find the desired product page
- Click on Protect under the product name
PPWP Pro will now automatically generate a new random and secure password for your WooCommerce product page. You can click on the “Manage password” option to add new passwords or manage your passwords.
The Auto-generate new password button allows you to add a new random password instantly. On the New password tab, you can set your own passwords, and each product page can have an unlimited number of passwords.
You can assign user roles to the passwords so that users have to log in before they can access your products. Limiting the usage of passwords is no longer a complex task thanks to the Usage Limit and Password Expiration features. Once you have set the values in these 2 options, your password will expire after a certain time or a certain number of uses.
Password protection for the “Add to cart” button in WooCommerce
It’s super easy to protect individual product pages. If you only want to hide the WooCommerce “add to cart” button, you may need to change some codes.
- In the WordPress administration, go to Appearance > Theme Editor
- Select functions.php in the menu on the right-hand side
- Enter the following code in the file
/*
* Hide the "Add to cart" function on all password-protected pages.
*/
function ppwp_replace_add_to_card() {
echo get_the_password_form();
}
add_filter(
'post_password_required',
function ( $required, $post ) {
global $post;
if ( ! $post->ID ) {
return $required;
}
if ( ! function_exists( 'is_product' ) ) {
return $required;
}
if ( $required && is_product() ) {
add_filter( 'woocommerce_is_purchasable', '__return_false' );
add_action( 'woocommerce_simple_add_to_cart', 'ppwp_replace_add_to_card' );
add_action( 'woocommerce_grouped_add_to_cart', 'ppwp_replace_add_to_card' );
add_action( 'woocommerce_variable_add_to_cart', 'ppwp_replace_add_to_card' );
add_filter(
'woocommerce_available_variation',
function () {
return [];
}
);
add_filter(
'woocommerce_out_of_stock_message',
function () {
return '';
}
);
return false;
}
return $required;
},
200,
2
);
Make sure you create a child theme and make changes there, otherwise this will affect the performance of the entire website.
Password protection for the entire WooCommerce store
Another way to hide the price range is to lock the entire store page. Once protected, all product pages underneath will also become private. To achieve this, you need the WooCommerce integration via the PPWP Pro plugin.
In the next step, go to Pages and search for the Shop page. What you need to do now is exactly the same as blocking individual WooCommerce products above.
Each product page of your store will now be assigned a password. If customers enter a password for any page, they will be able to access the rest of the store.
Conclusion
Hiding the price range for variable WooCommerce products encourages users to click on the variants to see details. This way, you can increase customer engagement in your store and thus increase the conversion rate and sales accordingly.
You can cover the maximum price of a variable product or hide the variable price completely using code snippets. We recommend that you protect your products with a password if you want to hide the complete product pages. With the PPWP Pro plugin, you can protect individual products, the “add to cart” button or even the entire store.
The truth is that most store owners find that hiding price ranges works particularly well for products with significant price differences between variants. When someone sees “$20 – $200” they might assume the cheaper option won’t meet their needs, but when they only see the starting price, they’re more likely to explore the options.
