I've used the code from the answer in this thread:


It works great when I'm using the drop down to select the simple product on the configurable product page. The issue is I'm using the image swatch feature to select the simple product instead of the dropdown.

Does anyone know of a way to accomplish this using the image swatch? I've noticed that with the dropdown it displays way more information in the DOM than it does with the image swatch.

I'm using 1.9

  • Have you find any solutions for the problem ? Anyone can post an update who solve this problem ? by comment by Cantemir Alex
    – Amit Bera
    Commented Apr 1, 2016 at 10:23
  • @AmitBera I found an extension that may work, I should be installing it within the next few days and can let you know if it works. Commented Apr 5, 2016 at 14:51
  • @user3330820 any update on this? did you find the solution? i'm looking for the solution on the same
    – Guruprasad
    Commented Jun 1, 2017 at 5:08

1 Answer 1


You can follow below code for swatches:


$_product    = $this->getProduct();
$_attribute = $this->getAttributeObj();
$_jsonConfig = $this->getJsonConfig();
$_config = json_decode($_jsonConfig);

$_swatchInnerWidth = $this->getSwatchInnerWidth();
$_swatchInnerHeight = $this->getSwatchInnerHeight();
$_swatchOuterWidth = $this->getSwatchOuterWidth();
$_swatchOuterHeight = $this->getSwatchOuterHeight();

$_attr = $_attribute->getProductAttribute();
$_attrCode = $_attr->getAttributeCode();
$_id = $_attribute->getAttributeId();

$_swatchArray = $_config->attributes->$_id;
<dt class="swatch-attr abc">
    <label id="<?php echo $_attrCode ?>_label" class="required">
        <?php echo $_attribute->getLabel() ?>:<em>*</em>
<dd class="clearfix swatch-attr bc <?php if ($_attribute->decoratedIsLast) echo ' last'; ?>">
    <div class="input-box">
        <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select no-display swatch-select">
            <option><?php echo $this->__('Choose an Option...') ?></option>
        <ul id="configurable_swatch_<?php echo $_attrCode ?>" class="configurable-swatch-list clearfix">
            <?php foreach ($_swatchArray->options as $_option): ?>
                $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_option->label);
                $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl($_product, $_option->label, $_swatchInnerWidth, $_swatchInnerHeight, $_swatchType);
                $_hasImage = !empty($_swatchUrl);
                $_liClass = '';
                $_aClass = 'swatch-link swatch-link-' . $_attribute->getAttributeId();
                if ($_hasImage) {
                    $_liClass .= $_swatchType == 'media' ? ' is-media' : '';
                    $_aClass .= ' has-image';
                } elseif (strlen($_option->label) > 3) {
                    $_liClass .= ' wide-swatch';
                <li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?>" id="option<?php echo $_option->id; ?>">
                    <a onclick="return changeSku(<?php echo $_attribute->getAttributeId() ?>, this, <?php echo $_option->id; ?>);" href="javascript:void(0)" name="<?php echo $_optionCode; ?>" id="swatch<?php echo $_option->id; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
                       style="height: <?php echo $_swatchOuterHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchOuterWidth ?>px;">
                <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
                <?php if ($_hasImage): ?>
                    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
                <?php else: ?>
                    <?php echo $_option->label; ?>
                <?php endif; ?>
                        <span class="x">X</span>
            <?php endforeach; ?>

<div id="sku-container"></div>

$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();
$productMap = array();
$atLable = array();
$unitLabel = '';
foreach($col as $simpleProduct){
    $productMap[$simpleProduct->getId()] = $simpleProduct->getSku();
} ?>
<script type="text/javascript">
function changeSku(confAttributeId, sel, pid) {
    var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>;
    var selectedAttributeId = pid;
    if (selectedAttributeId) {
        var options = spConfig.config.attributes[confAttributeId].options;
        var productId = options.find(function (option) {return option.id == selectedAttributeId}).products[0]
        $("sku-container").update("<strong>Product Id: </strong>" + productMap[productId]);
    } else {
        $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.