Display Configurable Product Price Ranges in Magento 2
Display Configurable Product Price Ranges in Magento 2

Display Configurable Product Price Ranges in Magento 2

Published February 12, 2018 in Development
Selling Bundles the Right Way in Magento 2
Selling Bundles the Right Way on Magento 2
January 11, 2018
Does Social Media Affect My SEO?
February 22, 2018

Today we’re going to look at the advantages of using configurable products and how we can update how their prices display on Magento 2 product listing pages to provide our customers with a more transparent shopping experience. Before we dig deeper, let’s talk briefly about what configurable products are.

Configurable products differ from simple products in that they provide the customer with numerous options that ultimately reduce down to a simple product choice. The power of configurable products really shines on product listing pages, where a single configurable product may act as a doorway to literally hundreds of simple product variations. For instance, a t-shirt configurable product with 10 color options and 3 size options would essentially allow the customer to choose from one of 30 tangible simple products, without being overwhelmed with all 30 products on the listing page itself.

The Problem

While configurable products allow us to more elegantly guide our customers’ shopping experience, they do have one notable drawback: Their potential price variations don’t translate well to listing pages. Instead, Magento natively shows the lowest possible price for each configurable product. That works well if all of our configurable product options cost the same, but if they don’t, the price Magento shows on the listing page could be very misleading. If our t-shirt prices range from $20 to $60 depending on what size and color was selected, we’re doing our customers a disservice by showing the $20 price, when what they really want may end up being $60. There’s no sense in drawing your customers in with the lowest price just to sideswipe them with a much higher price once they’ve selected their options. Showing price ranges on listing pages makes the possible price of an item more transparent, allowing your customers to more quickly compare products and continue on to checkout, which means higher conversion rates for you.

The Solution

Now that we’ve identified our general objective, we can line out the functionality we hope to see when all is said and done:

  • Configurable products will display a price range rather than just the lowest possible price.
  • The price range will show the lowest child product price and the highest child product price possible.
  • The price range will take into account special pricing. The lowest child product special price will be shown as the minimum price in the price range.

Let’s get our bearings on how the pricing logic can be altered by looking at how this is handled in the core Magento modules. Before we jump into the directory structure, I want to briefly introduce two overarching concepts that you’ll see with regard to pricing logic: render classes and templates, and amount render classes and templates. The render classes and templates are responsible for the layout and conditional logic associated with whether a particular price type shows (e.g., strikethrough price or regular price). Meanwhile, the render amount classes and templates are responsible for the actual currency formatted amount that shows and any structured data markup needed to communicate the final amount to search engine crawlers.

That said, now we’re ready to review the primary Magento module responsible for price rendering, Mage_Catalog. If you open the module, you’ll see a directory called Pricing. This houses the price render classes and the price amount render classes. In view/base/templates/product/price you’ll see the price render templates, and if you dive into the view/base/templates/product/price/amount folder you’ll find the price amount render template.

The last piece of the puzzle resides in the view/base/layout directory: catalog_product_prices.xml. This file tells Magento which render and amount render classes and templates to use. Before we continue, let’s state the obvious here: the code and configuration contained in view/base will apply to both the frontend and admin areas of the site, while code and configuration contained in view/frontend and view/adminhtml will apply to only the frontend and adminhtml areas, respectively.

Now that we have our bearings on the base module and files involved, let’s talk about how the Magento_ConfigurableProduct module updates that behavior for configurable products. If you look in the Magento_ConfigurableProduct module, you’ll see that it has its own Pricing directory that allows Magento to calculate the various prices (min, max, final, …), while taking into account the given configurable product’s child product prices. Most notable is the presence of view/base/layout/catalog_product_prices.xml. In this file, you’ll see that the Magento_ConfigurableProduct module is passing in a new argument, “configurable”, to the render.product.prices block. When Magento is calculating a final price for a configurable product, it will use the values for render_template and amount_render_template set here rather than the values set under the “default” in the Magento_Catalog module. These are precisely the values we’ll want to override to show price ranges on our product listing pages.

Step 1:

Let’s create a new module for this called MyCompany_ConfigurableProductPriceRanges. If you’re new to Magento 2, here’s a link to the official Magento 2 dev doc on how to create a module. At minimum, you’ll need these three files in the module root: registration.php, composer.json, and etc/module.xml. Note that we’ll need to list Mage_ConfigurableProduct as a dependency in etc/module.xml.

Step 2:

To override the default configurable product price behavior on the product listing page, we’ll need to add our own catalog_product_prices.xml layout file. This will allow us to specify a new render template and amount render template. Add the following code to our new module in view/frontend/layout/catalog_product_prices.xml.

Step 3:

In the last step, we created a layout file to override the templates normally used for configurable product prices. Now we need to create those template files in our module. First, create the render template in view/frontend/templates/product/price/price_range.phtml with the following code:

Here we’ve retrieved the minimum and maximum prices from the saleable product and also taken into account the possibility of a special price on one or more of the child products. This template will get hit first and pass our minimum and maximum price values to the amount render template via the $block->renderAmount() call. That means we’ll need to create our amount render template next. In view/frontend/templates/product/price/amount/default.phtml place the following code:

This file is essentially a direct copy of what you would find in the Magento_Catalog module’s view/base/templates/product/price/amount/default.phtml file. Our only modification is the addition of the if ($block->getMinPrice() && $block->getMaxPrice() && $block->getMinPrice() < $block->getMaxPrice()): section. If the template block has access to the minimum and maximum price and they differ in value, our template will show those prices as a price range (i.e., minPrice minus maxPrice) instead of the default singular price.

Step 4:

  • Enable the module with bin/magento module:enable MyCompany_ConfigurableProductPriceRanges
  • Clear your cache with bin/magento cache:flush


That’s it! At this point you’ll be able to load any native product listing page on your site and see price ranges for all configurable products that have simple products with differing prices. Here’s a screenshot of this code in use:

A configurable product showing a price range in the front-end

Your customers will now be able to rapidly compare products and find what they need faster, all from the product listing page. Happy coding!

Full Code

Want the benefits without the work? You’re in luck – you can download the full code from this article on github.


  1. Mark says:

    Hi. Great module. It was working fine in M2.1.9 but I’ve just upgraded to M2.2.3 and now the price range on the category page only briefly appears before disappearing and reverting to the configurable product price. I can’t see any changes to the new default.phtml that could be causing it so wondered if you had any idea? I’ve tried in Safari, Firefox and Chrome and the behaviour is the same.

    • Mark says:

      I’ve done more testing. I disabled the custom theme to make sure this wasn’t causing the problem. After then trying Magento Luma and also the blank theme I can confirm that the issue is still there. I even changed the sequence to load your price range module after all other modules but that didn’t work. Something is overriding your module after appearing for a second during a category page load. M2.2.x core files must’ve changed causing the conflict.

  2. Pantelis Petmezas says:

    Hello, we know if it works in 2.2.2 ?

    • Mark says:

      I doubt it. I think it will have broken after the update to 2.2. I keep checking the GitHub repository but it hasn’t been touched since September 2017.

  3. Prince says:

    I am having the same issue as well. Please confirm if this has been resolved?

  4. adam.prost says:

    Hello! We appreciate you all stopping by. The module hasn’t been updated for 2.2 yet, but that’s likely to roll out in the next few weeks.

  5. adam.prost says:

    We’ve upgraded the module for compatibility with Magento 2.2. Namely, the module now overrides the swatch price display logic such that the price range display isn’t overridden when the page fully loads. You can see the latest commit here.

    Important Note: The frontend will now always show the price range for the configurable product, which may not be what you need for your individual use cases. However, the commit will give you insight into how the price display can be further modified. For more customized price display cases you’ll also need to dive into Magento/ConfigurableProduct/Block/Product/View/Type/Configurable->getJsonConfig() and Magento/Swatches/view/frontend/web/js/swatch-renderer.js->_UpdatePrice().

  6. Jimmy fang says:

    It’s also can display price range on product detail page?
    If I want display on product detail page ,how can I do?

  7. Shannon says:

    Has anyone made modifications to account for showing 2 ranges when a sale is going on? So the regular price range, and then the special price range (price range after the sale)?

  8. steve says:

    This works great — could this also be visible on product pages too? for consistency?

  9. Ravindra says:

    Excellent blog! We are linking to this particularly great post on our site.Keep up the great writing.

  10. YamDan says:

    Hi,I was wondering how would this module handle special prices, I know it’ll be taken into account as you already say in your overview,
    But will it still keep the defult magento setting, with listiing strikethrough text for the “regular price”, + special price above ?
    (So my customer would know that this item is on sale ?

  11. Mark says:

    Magento 2.3.1 appears to have broken it again unfortunately. All that shows is the lowest price in the range.

  12. dawhoo says:

    Broken in 2.2.8 as well.

  13. Ovidiu says:

    This solution only handles displaying the price intervals.
    You also need to have the prices update by js when selecting the configuration options.
    This extension handles this very well

  14. Jesse W says:

    I submitted a pull request to work with Magento 2.3 (tested on 2.3.1). Available at https://github.com/SlowFamily/magento2-configurable-product-price-ranges.

    In brief, slight changes need to occur to price_range.phtml to get the max price. vendor/magento/module-catalog/view/base/web/js/price-box.js needs to be overridden to comment out an update at initialization that alters the price display.

    Change price_range.phtml like follows:

    getIdSuffix() ? $block->getIdSuffix() : ”;
    $schema = ($block->getZone() == ‘item_view’) ? true : false;

    $saleableProduct = $block->getSaleableItem();
    $regularPrice = $saleableProduct->getPriceInfo()->getPrice(‘regular_price’);
    $minimumPrice = $regularPrice->getMinRegularAmount()->getValue();
    $maximumPrice = $regularPrice->getMaxRegularAmount()->getValue();

    $finalPriceModel = $block->getPriceType(‘final_price’);

    $renderAmount = $block->renderAmount($finalPriceModel->getAmount(), [
    ‘price_id’ => $block->getPriceId(‘product-price-‘ . $idSuffix),
    ‘price_type’ => ‘finalPrice’,
    ‘include_container’ => true,
    ‘schema’ => $schema,
    ‘min_price’ => $minimumPrice,
    ‘max_price’ => $maximumPrice,
    echo $renderAmount

    Copy vendor/magento/module-catalog/view/base/web/js/price-box.js to view/frontend/web/js/price-box.js in your module. Find the following _init function and comment out the updatePrice trigger:

    _init: function initPriceBox() {
    var box = this.element;

    //! Below commented out to avoid removing initial price range shown.
    // box.trigger(‘updatePrice’);
    this.cache.displayPrices = utils.deepClone(this.options.prices);

    Add a view/frontend/requirejs-config.js to your project like follows:

    * Copyright © Magento, Inc. All rights reserved.
    * See COPYING.txt for license details.

    var config = {
    map: {
    ‘*’: {
    priceBox: ‘MyCompany_ConfigurableProductPriceRanges/js/price-box’,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Recent PostsView all
July 26, 2021

Simplified shopping = Higher Conversions for Marlow White

Overview Since 1879, Marlow White has been dedicated to helping our nation’s best look their best by providing our military and first responders with the highest […]
July 19, 2021

The biggest online fraud trend of 2021? More fraud!

Like almost every aspect of life, the world of online fraud can be viewed through the lens of “before COVID-19” and “after COVID-19.” The stunning and […]
July 13, 2021

A New Customer Experience for DisplayIt Using Celigo

Overview DisplayIt offers fully customizable exhibit booths and tradeshow displays for customers around the world. Their website is used by thousands of merchants each year to […]