I am working on magento 2 and want to override getJsonSwatchConfig method of Magento\Swatches\Block\Product\Renderer\Configurable class to meet the requirement but facing an issue. I have overrided this method and this is working fine on product detail page but it does not work for list page. I have debug with core file in both cases it loads same method. ie. getJsonSwatchConfig but it does not override for list page. Codes are given below


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Swatches\Block\Product\Renderer\Configurable" type="Namespace\modulename\Block\Magento\Swatches\Product\Renderer\Configurable" />



namespace Namespace\modulename\Block\Magento\Swatches\Product\Renderer;

class Configurable extends \Magento\Swatches\Block\Product\Renderer\Configurable
     * Get Swatch config data
     * @return string
    public function getJsonSwatchConfig()
        echo $this->getProduct()->getTypeId() ." overrided = ".$this->getProduct()->getId(); exit;
        $attributesData = $this->getSwatchAttributesData();
        $allOptionIds = $this->getConfigurableOptionsIds($attributesData);
        $swatchesData = $this->swatchHelper->getSwatchesByOptionsId($allOptionIds);

        $config = [];
        foreach ($attributesData as $attributeId => $attributeDataArray) {
            if (isset($attributeDataArray['options'])) {
                $config[$attributeId] = $this->addSwatchDataForAttribute(

        return $this->jsonEncoder->encode($config);

Any help will be appreciated

1 Answer 1


There are two different block to load color swatch on list page and product detail page. Blocks are given blow

For Product detail page - Magento\Swatches\Block\Product\Renderer\Configurable

For Category list page - Magento\Swatches\Block\Product\Renderer\Listing\Configurable

You are overriding only for product detail page because for list page Magento\Swatches\Block\Product\Renderer\Listing\Configurable Class is used for swatch render. This class extend the magento core class instead of overrided Class


namespace Magento\Swatches\Block\Product\Renderer\Listing;

class Configurable extends \Magento\Swatches\Block\Product\Renderer\Configurable 

So you have to override this class too with your class as follows


add following

<preference for="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" type="Namespace\ModuleName\Block\Magento\Swatches\Product\Renderer\Listing\Configurable" />


namespace Namespace\ModuleName\Block\Magento\Swatches\Product\Renderer\Listing;

namespace Namespace\ModuleName\Block\Magento\Swatches\Product\Renderer\Listing;

class Configurable extends \Namespace\ModuleName\Block\Magento\Swatches\Product\Renderer\Configurable


I think, This will help you.

Cheers !!!


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.