WooCommerce displays a price range for variable products. It is very thoughtful because it gives the customers a quick highlight of the price options(lowest-highest).
Unfortunately, lots of store owners don’t like this default price representation. They prefer to display only a single price, preferably, to display the minimum price for WooCommerce variable products. Luckily, this is one of the easiest goals you can reach on WooCommerce.
WooCommerce is one of the most popular WordPress extensions (plugins). It can instantly turn your WordPress site into a fully functional eCommerce store. With its wide range of options and flexible features, WooCommerce is an excellent choice to manage an online store.
Most importantly, WooCommerce’s affordability makes it a great choice for small and medium-sized businesses.
In this article, we will show you how easy it is to modify a default option in WooCommerce. Here you will learn to modify the default price representation and display only the minimum price for WooCommerce variable products.
By default, WooCommerce comes with tons of features that are important to manage an online store. Flexible customization options of existing features and the extensibility elevate WooCommerce to a different height.
So, if you have a WooCommerce-powered online store, you can have some peace of mind knowing this. If you need something, chances are, there is already an existing solution for you. Here is an excellent resource to learn more about WooCommerce and why it is an excellent choice for you.
WooCommerce Variable Products and the price display
Variable products are quite common and very useful for online stores. They allow the management of multiple variations (versions) of the same product. As a result, it is not necessary to create and manage multiple instances of the same product.
As an example of a WooCommerce variable product let’s consider a T-shirt that comes with multiple color and size options. Creating separate products just to represent a different color or size is not ideal. Here WooCommerce variable products come into action.
As you catch up with WooCommerce, you will love the power of variable products. By default, the price is displayed like this: $15 – $150. We will show you only to display the lowest price ($15 for this example).
Diving deep into WooCommerce features and benefits is not the goal of this article. We want to assist you in showing only the lowest variation prices for WooCommerce variable products. The aim is to introduce you to all the best available options.
As a result, you will be able to choose the option that best fits your preferences. Let’s get rolling to display the minimum price for WooCommerce variable products in your store.
Different approaches to display the minimum price for WooCommerce variable products
- Using a dedicated plugin to display minimum variation price (Variation Price Display Range for WooCommerce)
- Using a code snippet to display the lowest price in variable products
Use a dedicated plugin to display the minimum price for WooCommerce variable products
In our understanding, it is best to use a plugin if it fulfills your goal. If a plugin is not available then you can try custom code or snippets.
There are multiple benefits of using a plugin. First of all, it might be quite difficult to stay synchronized with the latest updates of WooCommerce with a custom snippet. On the contrary, a plugin is maintained by the author. So, you can leave those worries aside.
Secondly, a plugin always comes with multiple different options. As a result, you will always get more features and control with a plugin compared to your custom code snippet.
Apart from features and control, there are security benefits too. Usually, plugins are uploaded to the WordPress plugin repository. The submitted plugins are reviewed to make sure there are no potential vulnerabilities.
So, a dedicated and regularly managed plugin should be your best shot to display the minimum variation price.
Variation Price Display Range for WooCommerce
Variation Price Display Range for WooCommerce helps store owners to manage the price representation of WooCommerce variable products. With its assistance, you can show only the lowest prices for variable products in your store.
Of course, the plugin offers more than displaying the minimum price for WooCommerce variable products. It offers several options that can satisfy a wide range of preferences for store owners.
Luckily, the plugin replaces the default price range with the minimum variation price by default. So, you just need to install and activate the plugin on your site.
Install and activate Variation Price Display Range for WooCommerce. That is all you need to display the minimum price for WooCommerce variable products. You can download the plugin from the WordPress plugin repository following this link.
Additionally, the plugin adds the string “From” in front of the lowest variation price. You can exclude the text/string “From” before the price by disabling the following option.
Feature Highlights of Variation Price Display Range for WooCommerce
The plugin comes with several brilliant options. Let’s get a brief highlight of some of the excellent features of this plugin. Apart from displaying only the lowest variation price, you can do the following things:
- Just like displaying the minimum variation price, you can also display the maximum variation price
- You can also display a price range either minimum to maximum or maximum to minimum
- Add the string “From” before the minimum variation price
- Likewise, you can set the string up to before the maximum variation price
- Change the main price while switching between variations (usually WooCommerce displays this right below the description)
- Additionally, you can hide the default variation price and also remove the variation reset (clear button) link
- Another extraordinary option is to format the sale price for the discounted variations
Advanced Options
If you are interested in further extending the price representation of WooCommerce Variable products, there is more for you. Variation Price Display for WooCommerce also has a premium version. It has some exclusive options that can make the price display more expressive to your customers.
Let’s quickly get to know the advanced features:
- With the premium version of the plugin, you will have access to two more price types (you can list all product variations & a custom price type)
- Conditionally control the price representation on single product pages or archive pages
- Bulk control products by leveraging the include and exclude category option
- It will allow you to add a discount badge for variation prices that are on sale
- You can also show or hide the customized prices for the site admin
- Finally, you can include SKU with the product variation names while “Listing all variation prices”
You should now agree with us that using a plugin has multi-dimensional benefits. Still, we will show you how you can reach your goal by adding a code snippet to your site.
Use a code snippet to display the lowest price in variable products
A code snippet is a block of code that helps to achieve a particular goal. We already know that WooCommerce highlights (shows) the lowest to the highest price for a variable product.
The price looks something like this: $25 – $250. You can change this default WooCommerce variation price display with just a simple snippet. You can show only the lowest price in variable products with the snippet below:
/*
* Code Snippet to Display minimum price for WooCommerce variable products
*/
add_filter('woocommerce_variable_price_html', 'wpx_wooCommerce_show_only_lowest_prices_in_variable_products', 10, 2);
function wpx_wooCommerce_show_only_lowest_prices_in_variable_products( $price, $product ) {
$price = '';
return $price .= wc_price($product->get_price());
}Adding the snippet to your site, to show only the minimum price:
There are multiple ways to add snippets or custom codes to your site. We will highlight two of the best approaches.
- Add the code snippet to the functions.php file of your child theme
- Add the code snippet with the help of the Code Snippets plugin
Add the code snippet to the functions.php file of your child theme
Adding a code snippet on your WooCommerce store is also very easy. We expect that you already know the importance of having a child theme on your site. Let’s briefly highlight the importance of a child theme
Imagine that you have installed your favorite theme on your store and are working with it. You are making changes and adjustments to your store and everything is going great.
There comes an update for the theme and you are excited about the new enhancements. But, once you update the theme, all your customizations are gone.
That is why having a child theme is very important. It keeps you on the safe side. Updating the parent theme does not do any harm to your customizations. So, we believe that you already have a child theme.
In case you don’t have a child theme, please create one. There are various methods to create a child theme. You can use this plugin to create a child theme for your store.
Once the child theme is in place, you can add styles and custom functions to it. Click or hover over Appearance and select the option Theme File Editor. Once the Theme File Editor is loaded, the Stylesheet or the style.css file should open by default.
Click on Theme Functions or the functions.php file to access it. Add the custom code at the end of the file and click on Update File. That’s all you need to do.
Here is the file path: Appearance > Theme File Editor > Theme Functions (functions.php)
Now only the minimum variation price will be displayed in your store. Let’s learn how the Code Snippets plugin can help reach the same goal.
Adding custom code with the help of the Code Snippets plugin
Code Snippets is one of the most popular plugins to add and manage code snippets to your WordPress site. You can download the plugin from this link. Additionally, you can also search for Code Snippets from your dashboard to find the plugin and install it.
Adding a snippet is very easy and you can give the snippet a name and description. Click on the option to add a new snippet and add this code. Save Changes and Activate the snippet. You should have the same result and only the minimum variation price will show up for your variable products.
That was not so difficult, was it? Let us know which method you preferred the most. Enjoy the new price representation in your store and hopefully inspire more sales.