How To Remove Price Range On Woocommerce Variations

How to Remove Price Range on WooCommerce Variations: A Comprehensive Guide

Introduction:

WooCommerce is a powerful platform for creating online stores, and product variations allow you to offer multiple options for a single product, like size, color, or material. By default, when a product has variations with different prices, WooCommerce displays a price range on the product page (e.g., “$10 – $25”). While this can be informative, sometimes you might prefer to hide this range and only show the price of the selected variation. Perhaps you have promotions running on specific variations and want to highlight those prices. Or, maybe you find the range visually cluttered. This article will guide you through the process of removing the WooCommerce price range on product variations, providing several methods to achieve this.

Understanding the Default WooCommerce Price Display

Before diving into solutions, it’s important to understand why WooCommerce displays a price range. It’s designed to inform customers about the potential price spectrum of the available variations *before* they make a selection. This functionality is built into the core WooCommerce plugin, but it’s customizable. We will explore methods that involve code snippets and plugins to remove this range effectively.

Removing the Price Range: Multiple Methods

There are several ways to remove the price range from your WooCommerce variable products. Each method has its advantages and disadvantages, so choose the one that best suits your technical skills and comfort level.

1. Using a Code Snippet (Recommended for Developers)

This method involves adding a small piece of PHP code to your theme’s `functions.php` file or using a code snippets plugin. This is generally the most efficient and lightweight method. However, it requires a basic understanding of PHP and how WordPress themes work.

Steps:

1. Access your `functions.php` file: You can find this file in your WordPress dashboard under Appearance > Theme Editor. Important: Always back up your theme before making any changes! A child theme is highly recommended to preserve these changes during theme updates.

2. Add the following code snippet: Paste the following code snippet at the end of your `functions.php` file:

 add_filter( 'woocommerce_variable_sale_price_html', 'remove_variable_price_range', 9999 ); add_filter( 'woocommerce_variable_price_html', 'remove_variable_price_range', 9999 ); 

function remove_variable_price_range( $price ) {

$product = wc_get_product();

// Only hide the range if prices are different and the min price is not 0.

if ( $product->is_type( ‘variable’ ) && (float) $product->get_variation_price(‘min’, true) !== (float) $product->get_variation_price(‘max’, true) && (float) $product->get_variation_price(‘min’, true) > 0 ) {

$price = wc_price( $product->get_variation_price(‘min’, true) ); //Display the minimum price

}

return $price;

}

3. Save the changes: Click the “Update File” button.

Explanation of the Code:

• `add_filter()`: This function hooks into WooCommerce’s filters that control the display of the sale price and the regular price for variable products.
• `remove_variable_price_range()`: This is the custom function that will modify the price display.
• `wc_get_product()`: Retrieves the current product object.
• `$product->is_type( ‘variable’ )`: Checks if the product is a variable product.
• `(float) $product->get_variation_price(‘min’, true) !== (float) $product->get_variation_price(‘max’, true)`: Compares the minimum and maximum variation prices. It only removes the range if they are different.
• `wc_price( $product->get_variation_price(‘min’, true) )`: Gets Read more about How To Get Product View Count Woocommerce On Custom Template the minimum variation price and formats it using WooCommerce’s built-in currency formatting.

Using a Code Snippets Plugin:

If you’re not comfortable editing your theme’s `functions.php` file directly, you can use a plugin like “Code Snippets.” This allows you to add and manage code snippets without directly modifying your theme files. Install and activate the “Code Snippets” plugin, then add a new snippet with the code provided above.

2. Using a Plugin

Several plugins are available in the WordPress repository that can help you remove the price range on WooCommerce variations. This is a simpler approach for users who are less comfortable with coding.

Steps:

1. Search for a Plugin: In your WordPress dashboard, go to Plugins > Add New. Search for plugins like “WooCommerce Variation Price Display,” “Remove WooCommerce Price Range,” or similar.

2. Install and Activate: Choose a reputable plugin with good reviews and Explore this article on How To Add Woocommerce In Cornerstone install and activate it.

3. Configure the Plugin: Most plugins will have a settings page where you can enable the option to remove the price range. Refer to the plugin’s documentation for specific instructions.

Advantages of using a plugin:

• Easy to install and configure.
• No coding knowledge required.

Disadvantages of using a plugin:

• Can add extra bloat to your website if the plugin is not well-coded.
• May require a paid subscription for advanced features.

3. Using CSS (Less Recommended, Not a True Removal)

This method uses CSS to hide the price range visually, but it doesn’t actually remove the range from the underlying code. This means the range is still present in the HTML source code, which can affect SEO in some cases. This is a quick and dirty solution and is generally not recommended for long-term use.

Steps:

1. Access your Theme’s Custom CSS: In your WordPress dashboard, go to Appearance > Customize > Additional CSS.

2. Add the following CSS code:

.price del {

display: none !important;

}

.price ins {

text-decoration: none !important; /* Optional: Remove underline from the min price */

}

.woocommerce div.product p.price {

font-size: 1em !important; /*Adjust the font size for better display*/

}

3. Publish the Changes: Click the “Publish” button.

Explanation of the CSS Code:

• `.price del`: Targets the `` tag, which usually contains the original (higher) price in the range. `display: none !important;` hides this element.
• `.price ins`: Targets the `` tag, which usually contains the Check out this post: How To Add Attributes To Woocommerce current (lower) price in the range. `text-decoration: none !important;` removes the underline.
• `.woocommerce div.product p.price` : This targets the price element on the single product page so you can adjust the font size as needed.

Important Considerations for CSS Method:

• This method only hides the price range visually; it doesn’t remove it from the HTML source code.
• It may not work perfectly with all themes.
• This isn’t a true solution and could potentially affect accessibility.

Conclusion: Choosing the Right Method for You

Removing the WooCommerce price range on product variations can improve the visual clarity of your online store and highlight specific product prices. The best method depends on your technical expertise and comfort level.

• For developers, using a code snippet is the most efficient and recommended approach.
• For users who are less comfortable with coding, using a plugin provides a simpler solution.
• Using CSS to hide the price range is the least recommended method because it doesn’t actually remove the range from the code and can affect SEO and accessibility.

Always back up your website before making any changes to your theme or plugins. If you’re unsure about any of these steps, consult with a WordPress developer. Choose the method that best suits your needs and enjoy a cleaner, more streamlined product display on your WooCommerce store!