How to display single price for WooCommerce variable products? (Code Snippet)

Tired of confusing your customers with multiple prices for the same product? Simplify their shopping experience by displaying a single price for your WooCommerce variable products!

Displaying a single price for WooCommerce variable products can significantly enhance the user experience and streamline your e-commerce store’s appearance. By default, WooCommerce displays a price range for variable products, which can sometimes confuse customers. This guide will show you how to customize your WooCommerce store to display a single price for variable products using a simple code snippet. By the end of this tutorial, you’ll be able to present a cleaner and more professional look for your product pages, potentially boosting customer confidence and increasing sales.

Why Display a Single Price for Variable Products?

Displaying a single price simplifies the shopping experience, making it easier for customers to understand the cost. It can also help eliminate any confusion that might arise from seeing a price range, which can sometimes lead to abandoned carts. A single price display creates a more streamlined and professional look for your product pages, enhancing the overall user experience and potentially increasing conversion rates.

Prerequisites to Display a Single Price

Before you start, ensure you have:

• Access to your WordPress dashboard.
• A basic understanding of how to edit the theme files in WordPress.
• It is advisable to back up your website in case anything goes wrong.

Step-by-Step Guide Display a Single Price for Variable Products

1. Access Your Theme Functions File

First, log in to your WordPress dashboard and navigate to Appearance > Theme Editor. Your active theme should contain a functions.php file. To modify the price display, add the code snippet here.

2. Insert the Code Snippet

The following code should be pasted into your functions.php file:

add_filter('woocommerce_variable_sale_price_html', 'custom_variation_price', 10, 2);
add_filter('woocommerce_variable_price_html', 'custom_variation_price', 10, 2);

function custom_variation_price($price, $product) {
$variation_min_price = $product->get_variation_sale_price('min', true);
$variation_max_price = $product->get_variation_sale_price('max', true);
if ($variation_min_price !== $variation_max_price) {
$price = sprintf('%s', wc_price($variation_min_price));
}
return $price;
}

Save the changes once you’ve added the code.

Before configuring the code snippet, the price will be displayed on the product page of variable products as in the below screenshot.

3. Save and Test the Changes

After saving the file, visit your site’s product pages to ensure the changes have taken effect. You should now see a single price displayed for variable products. If the changes don’t appear, clear your site’s cache or try switching to a different theme temporarily to ensure there are no conflicts. Also, ensure your theme and WooCommerce plugin are up to date.

After configuring the code snippet, the price of the variable products will be displayed as in the below screenshot.

Explore our blog section for more related articles.

You can also check out WooCommerce and WordPress plugins in ELEX.