Magento – Main Image not updating when swatch is selected Magento 2.0.8

I solved this problem by calling Varien_Image::keepTransparency(true) on the before it does the resize.

Unfortunately, there's no event we can observe here, so we have to extend/override Mage_ConfigurableSwatches_Helper_Productimg::_resizeSwatchImage.

Maybe someone else (you?) can propose a more future-proof solution.

etc/config.xml:

<?xml version="1.0"?>
<config>
    <modules>
        <YourNamespace_Transparentswatch>
            <version>0.1.0</version>
        </YourNamespace_Transparentswatch>
    </modules>
    <global>
        <helpers>
            <configurableswatches>
                <rewrite>
                    <productimg>YourNamespace_Transparentswatch_Helper_Productimg</productimg>
                </rewrite>
            </configurableswatches>
        </helpers>
    </global>
</config>

Helper/Productimg.php:

<?php
class YourNamespace_Transparentswatch_Helper_Productimg extends Mage_ConfigurableSwatches_Helper_Productimg
{

    /**
     * Performs the resize operation on the given swatch image file and returns a
     * relative path to the resulting image file
     *
     * @param string $filename
     * @param string $tag
     * @param int $width
     * @param int $height
     * @return string
     */
    protected function _resizeSwatchImage($filename, $tag, $width, $height)
    {
        // Form full path to where we want to cache resized version
        $destPathArr = array(
            self::SWATCH_CACHE_DIR,
            Mage::app()->getStore()->getId(),
            $width . 'x' . $height,
            $tag,
            trim($filename, '/'),
        );

        $destPath = implode('/', $destPathArr);

        // Check if cached image exists already
        if (!file_exists(Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA) . DS . $destPath)) {
            // Check for source image
            if ($tag == 'product') {
                $sourceFilePath = Mage::getSingleton('catalog/product_media_config')->getBaseMediaPath() . $filename;
            } else {
                $sourceFilePath = Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA)
                    . DS . self::SWATCH_FALLBACK_MEDIA_DIR . DS . $filename;
            }

            if (!file_exists($sourceFilePath)) {
                return false;
            }

            // Do resize and save
            $processor = new Varien_Image($sourceFilePath);

            // Begin additions by YourNamespace_Transparentswatch module.
            $processor->keepTransparency(true);
            // End additions by YourNamespace_Transparentswatch module.

            $processor->resize($width, $height);
            $processor->save(Mage::getBaseDir(Mage_Core_Model_Store::URL_TYPE_MEDIA) . DS . $destPath);
            Mage::helper('core/file_storage_database')->saveFile($destPath);
        }

        return $destPath;
    }


}

If you only have two configurable attributes; go to the configurable product page on the backend > associated products tab > slide the color attribute to the top.

The way configurable works is that every time you change the top attribute resets other attributes to only show the options that are available according to inventory and availability rules that still apply to possible combination of attributes. Since color is the only visual change on the product options moving it to the top will make the cascading affect dependent of the color.

Note that there is another a little more complicated solution, but I only recommend it if this first one doesn't work or if you have more than 2 configurable attributes, as it becomes more complicated to achieve, specially if you are controlling inventory and combinations of product are very different from each other.