As a WordPress website developer catering to a global clientele, you’re well aware of the importance of providing a seamless and user-friendly shopping experience on your WooCommerce site. One common challenge you might encounter is the need to hide the price range and regular price for variable products. In this article, we’ll guide you through the steps to achieve this while maintaining the professional appearance of your e-commerce platform.
Why Hide Price Range and Regular Price?
Variable products in WooCommerce often come with different pricing options, resulting in price ranges and regular prices being displayed on the product page. However, certain scenarios may call for a simplified presentation, such as when you want to focus on a single price point or when displaying the price range isn’t relevant to your target audience.
Step-by-Step Guide
1. Child Theme Setup (Recommended)
Before diving into code changes, create a child theme if you haven’t already. This safeguards your customizations from being overwritten when the main theme is updated.
3. Customize the Functions File
Open the function.php file and add this code. The goal is to replace the default code that outputs the price range and regular price with a code that displays only a single price.
Here’s a code snippet :
//Hide Price Range for WooCommerce Variable Products
add_filter( 'woocommerce_variable_sale_price_html',
'techitdev_variable_product_price', 10, 2 );
add_filter( 'woocommerce_variable_price_html',
'techitdev_variable_product_price', 10, 2 );
function techitdev_variable_product_price( $v_price, $v_product ) {
// Product Price
$product_prices = array( $v_product->get_variation_price( 'min', true ),
$v_product->get_variation_price( 'max', true ) );
$product_price = $product_prices[0]!==$product_prices[1] ? sprintf(__('%1$s', 'woocommerce'),
wc_price( $product_prices[0] ) ) : wc_price( $product_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(__('%1$s','woocommerce')
, wc_price( $regular_prices[0] ) ) : wc_price( $regular_prices[0] );
if ( $product_price !== $regular_price ) {
$product_price = '<del>'.$regular_price.$v_product->get_price_suffix() . '</del> <ins>' .
$product_price . $v_product->get_price_suffix() . '</ins>';
}
return $product_price;
}
4. Test Your Changes
After implementing the code modifications, it’s crucial to test your changes extensively. Use a staging environment to ensure that everything functions as expected. Check different variable products and variations to confirm that the price display is now showing a single price.
5. Update Your Theme
Once you’ve thoroughly tested the changes and are satisfied with the results, save the modified template file and upload it to the appropriate location within your child theme directory. This action will override the default behavior of the parent theme and display only the single price for variable products.
Conclusion
As a proficient WordPress website developer, you have the power to tailor your WooCommerce site to meet the unique preferences of your clients and their target audience. By following this step-by-step guide, you can effectively hide the price range and regular price for variable products, ensuring a cleaner and more focused shopping experience that resonates with your site’s design and goals. Remember to always keep backups and test thoroughly to ensure a smooth transition from development to live site. Happy customizing!
