Showing Available Configurable Options on the List or Grid View in Magento

Do you sell sized products in Magento or have products with colour options and would like to show the available product options on the gallery or list views like the image above?

If so read on, I have some code for you.

 

Products with Options

The same as variations on eBay or Amazon, when you’ve got products that are the same, but come in different colours, sizes or both, then both eBay and Amazon allow you to make variation listings. You can do the same in Magento with configurable products, but unlike eBay and Amazon where you’re restricted on what you can do, but with your own website you can do whatever you like.

From a customer’s point of view there are probably only looking for a specific colour of dress or if I’m shopping for shoes, I’m a size 10, I don’t really care about any other sizes and for me as the customer having to trawl through umpteen products on a website is plain annoying.

So what can we do about this? Read on.

Showing customers available options in Magento

We can add some simple copy and paste code to our Magento website, that will show which options are available, so when your customer is looking at your category list pages, where you have multiple products being shown, you can clearly show them which sizes or colours are still in stock.

An example of what we’ll be doing is below:

show available sizes in Magento

As we can see from the image above, the available shoe sizes are being shown on each product. If we think back to me being a size 10, I can immediately rule out the products that are not available in my size and just click on the ones that are (not that Women’s shoes are my kind of thing I hasten to add!).

To do this, first I’m going to share the code snippet with you and then explain what it does and how you can extend it further or alter it to your needs.
[php]
<?php
$sizes = array();
$colours = array();
if($_product->isConfigurable()){
$allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
foreach ($allProducts as $subproduct) {
if ($subproduct->isSaleable() && floor($subproduct->getStockItem()->getQty()) > 0 ) {
$sizes[] = $subproduct->getAttributeText(‘config_sizes’);
$colours[] = $subproduct->getAttributeText(‘config_colours’);
}
}
if(count($sizes)>0) {
sort($sizes);
?>
<div class=”desc std config_sizes”>
Sizes: <? echo implode(“, “, $sizes); ?>
</div>
<?
}
if(count($colours)>0) {
sort($colours);
?>
<div class=”desc std config_colours”>
Colours: <? echo implode(“, “, $colours); ?>
</div>
<?
}
}
?>
[/php]
This code was originally posted on http://stackoverflow.com/, but lacked the option to show only the options that had stock on them. Adding “&& floor($subproduct->getStockItem()->getQty()) > 0” on line 7 filtered the items without stock on them out.

Code run down:

  • Lines 1 & 2 set up the arrays we’ll be using to show the available options
  • Line 4 makes sure we have a configurable product
  • Lines 5 & 6 grabs all the simple products and starts to go through each of them
  • Line 7 is the cool line, as that line only adds in products that should be added
  • Lines 8 & 9 add values for specific attributes to each array (more on these later)
  • Then lines 12 to 19 and 20 to 27 spill the options out to the website

Tip: If your website is only ever going to have sizes as options, then you can remove lines 3, 9 and 20 to 27 for the colour options or the opposite lines for the sizes if you’re only using colours on your site.

The two fields you must be aware of are in lines 8 & 9.

These are the attribute names for the configurable products. In this case, they are called “config_sizes” & “config_colours” and must match exactly to the attribute code names that are being used for you size and colour options in Magento.

You can find out what yours are called by going to the Magento admin section, Catalog > Attributes > Manage Attributes and then clicking into your configurable attribute(s) and the code name is in the first box.

Pretty cool so far right? Now let’s this to your site.

Adding this code to your site

In the code snippet above, we must update our configurable options on lines 8 & 9 otherwise this won’t work for us.

Also I’m going to assume that you have worked with Magento themes before and understand the structure of theming in Magento and that you should never, ever change the default theme and you’ll make a copy of the list.phtml file to your website theme directory if needed and also a backup of the current file just in case.

Note: If themes are new to you in Magento, then take a read of this article that explains how they work before continuing.

For the sake of example, I am going to assume that your Magento theme directory is called “my-theme”. What we’re looking for is the file called “list.phtml” located in:

app/design/frontend/default/my-theme/template/catalog/product/

If this file is not present, then copy this file from this directory to your theme folder:

app/design/frontend/base/default/template/catalog/product/

Once you have opened the “list.phtml” take note that this file has TWO views in it, both the grid view and the list view and we’ll need to pop this code in twice and then check both views (assuming you have both views enable on your Magento site)

What we’re looking for is the line that looks like this:

[php]
echo $_helper->productAttribute($_product, $_product->getName() , ‘name’);
[/php]

Being careful of other tags that need to be closed first, after this section, we can add in the code snippet above and press save.

Now nip back to your site and view one of your category list pages where you know you have products that have configurable options on them and see if it’s now displaying them. If you see the options and they look right, then you’re left with one more task for the other view and we’ll cover that next.

If the options did not display:
You may need to just empty the Magento cache for them to appear and if it’s still not appearing, then either we have the attribute name(s) we added above entered incorrectly, the page doesn’t have any configurable products with options that are available, we’re looking at a list view which we haven’t done yet (next section) or the theme may be just hiding this section, so check the pages source code to see if you can see the options there.

Now for the List view
Assuming the above went well for you (which it should do as I have tested this on Magento versions 1.7 & 1.6), we have only done half the job which was for the grid view which is at the top of the list.phtml file. If you scroll down this file and look for the section that reads like this:

[php]
<?php // Grid Mode ?>
[/php]

Now look again for the code:

[php]
echo $_helper->productAttribute($_product, $_product->getName() , ‘name’);
[/php]

And add the same snippet above where appropriate.

Styling:
I’ve included css classes on both the size and colour options called “config_sizes” and “config_colours”, you can of course change these to whatever you like, but do keep classes on them as it will make styling them a lot simpler.

In Conclusion

This code snippet allows you to show the available options on your site for both grid & list views.

Showing the available options on the grid or list pages in Magento is just good practice. I know from a personal point of view, I’m normally just looking for one size and from my Wife’s point of view, she just wants one colour and size is a secondary consideration.

show available sizes in Magento

Yes, with pages that have lots of products on this is going to add some extra processing time to the page to load and also you’ll need to style these new options too. If you’re really worried about speed on the grid/list pages, then cutting down the number of items being shown is the biggest win (and also good practice too) and if you’re still concerned, use PHP’s microtime() function to see how long this takes to execute and example 1 on this page will help you loads.

If you get stuck with the above guide, ask your web designer or if you are the web designer or just the store owner wanting to add this, pop a comment at the bottom and I’ll help out if I can.

Enjoy,

Matt

18 replies
  1. Paul
    Paul says:

    Thanks for the code, but it doesn’t seem to work for me.

    For example I have a configurable product which has brown or black and sizes S,M,L

    What happens is it shows for colours three lots of black and three lots of brown ie

    Colours available black, black, black, brown, brown, brown
    Sizes: S,S,S,M,M,M,L,L,L

    For it to work I had to add array_unique($colours) etc

    I’m using 1.7.02CE

    Reply
  2. Seth
    Seth says:

    Matt
    I got it!!!! Thanks for your help!

    Now I am having a small PayPal issue. During checkout, the user is taken to PayPal asked to log in, than asked to confirm. It then brings the user back to the site to confirm again. it does not seem to clean to me and I think I will have some drop offs. I would like the user taken to paypal where they confirm then brought back to me and shown “order success” rather then having to confirm again.

    Have any idea on this?
    Thank You so much as you have been a HUGE help!
    Seth

    Reply
  3. Seth
    Seth says:

    THANK YOU!!! This was simple for a novice like me. I have a question. When I have more then one line of colors my grid boxs are not the same size. This throws off my grid completely. How can I avoid this?

    Reply
    • Matthew Ogborne
      Matthew Ogborne says:

      Howdy Seth,

      Ah that is caused buy the heights of each grid box being different and when they are set with the float:left attribute, the extra height in the one that is slightly higher, causes it to stop floating to the left.

      You have two options here:

      1. Set the height on the option names to say 20px and set the overflow to none
      2. Set a height of the grid box that is taller higher than the longest option

      In both cases, we are fixing the height to a allow them to self align properly, in #1 we are stopping the overflow, thus they’re all the same height and in #2 we’re making the height higher so that they can align properly.

      Might be worth doing a combination of the both, so that if you have an item with lots of options, that it won’t break the design/product grid and also setting the height of each box to a slightly higher height so that they can accommodate the extra line with each item.

      Does that help you Seth?

      Matt

      Reply

Trackbacks & Pingbacks

  1. Showing Available Configurable Options on the List or Grid View in #Magento http://t.co/lASOjuKU4V

  2. Showing Available Configurable Options on the List or Grid View in Magento #Ecommerce http://t.co/4dyQgKO5yR

  3. Showing Available Configurable Options on the List or Grid View in #Magento http://t.co/h2N28cio

  4. @day2dayebay says:

    Showing Available Configurable Options on the List or Grid View in Magento: Do you sell sized pro… http://t.co/4R9jBm1m @lastdropofink

  5. Showing Available Configurable Options on the List or Grid View in Magento: Do you sell sized products in Ma… http://t.co/vD7EbLiK #in

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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