Magento: Showing simple product attributes on configurable product page.


How to update attributes on a configurable product details page depending on the customer options selection.

Magento: Showing simple product attributes on configurable product page.

If you need a simple product attribute like SKU, name or description to appear on a configurable product page after the options selections have been made, you can take advantage of one of the features of the Attribute Swatches extension.

Edit the attribute you need to appear on the product page, go to Catalog > Attributes > Manage Attributes , then edit the attribute, for example, SKU:

Change the option "Used in Product Listing" to Yes

Go to System > Configuration > Catalog > Attribute Swatches > Product Details Page > Reload Attribute, there , you can see the list of attributes that can be updated on the configurable product page. Select SKU and other attributes with data that is important to your customers and save the new settings.

Edit the product page template using the IDE of your preference, the product template file can be found usually in

app/design/frontend/[PACKAGE_NAME]/[THEME_NAME]/template/catalog/product/view.phtml

to find the file to edit, you can enable template path hints in the Magento backend.

Then, add the id attribute with the structure "'swatches-update-attribute-[attribute_code]" to the element with the attribute that has to switch each time an option is selected. In the case of sku, the ID of the element will be: swatches-update-attribute-sku. Here are some code samples you can use:

To update the product name:

<div class="product-name">
    <h1 id="swatches-update-attribute-name">
        <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
    </h1>
</div>

To display and update the product sku:

<div class="product-sku">
   <b><?php echo $this->__("SKU");?>:</b>
   <span id="swatches-update-attribute-sku"><?php echo $_product->getSku();?></span>
</div>

To update the product description when a new option is selected:

<div class="std" id="swatches-update-attribute-description">
    <?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getDescription(), 'description') ?>
</div>

When the custom changes the options selection, the product name, sku and description will be updated on the product details page. This is how the Attribute Swatches extension can be used also to change the information displayed on the product page depending on the selected options.

Category: Attribute Swatches