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

Conclusion

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 Comment

  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.

Leave a Reply

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

Related postsView all
January 11, 2018

Selling Bundles the Right Way on Magento 2

Magento has a variety of product types to help you find the right way to sell your products. There are downloadable products for digital items (such […]
November 30, 2017

Creating a Shipping Method in Magento 2

There are existing extensions available for many of the shipping carriers that you may choose to utilize on your Magento 2 site, but what about a […]
October 17, 2017

A Look at CSS and Less in Magento 2

Magento 2 leverages the enormous power of CSS pre-processing (via Less) to make theme customization intuitive and easily maintainable through features like variables, mixins, and imports. […]
Most Recent PostsView all
March 27, 2018

How to Create a Payment Method in Magento 2

Sometimes you might need more than the standard out-of-the-box payment method. Perhaps you have an agreement with a credit card processor and a solution for their […]
March 6, 2018

How to Build a Theme in Magento 2

When building a custom theme for Magento, it’s important to follow best practices for how the system is designed to be extended. Magento 2’s frontend is […]
February 22, 2018

Does Social Media Affect My SEO?

How do we know if our social posts affect our SEO? We’ve been told it does, we’ve been told it doesn’t. And with Google’s ever-changing algorithm, […]