How to set color images in select box of color attribute in Magento 2?

You can’t set any image & color icon image in the Magento color dropdown attribute.

If you want to set color images in the dropdown of the color attribute then follow below steps.

Step 1: Override this file in your theme and replace with the below code.

app/design/frontend/[VendorName]/[theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

<?php
/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/
$_product    = $block->getProduct();
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <?php foreach ($_attributes as $_attribute): ?>
        <?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>
            <div class="field configurable required color">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control drop-down">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php else: ?>
            <div class="field configurable required">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>
        <?php endif; ?>            
    <?php endforeach; ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                        'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            },
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
            }
        }
    </script>
<?php endif;?>
<?php 
    $objectManager =   \Magento\Framework\App\ObjectManager::getInstance();
    $connection = $objectManager->get('Magento\Framework\App\ResourceConnection')->getConnection('\Magento\Framework\App\ResourceConnection::DEFAULT_CONNECTION'); 
    $records = $connection->fetchAll("SELECT * FROM color_code");
    // In color_code table have 3 fields like id, color_name, image_url
    // and store data something like this
    // id   color_name      image_url
    // 1    Black           pub/media/catalog/swatches/2/40x40/media/black.png
    // 2    Green           pub/media/catalog/swatches/2/40x40/media/green.png
    // 3    White           pub/media/catalog/swatches/2/40x40/media/white.png
    //print_r($records);
    $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
    $base_url = $storeManager->getStore()->getBaseUrl();
?>    
<script type="text/javascript">
require(["jquery"], function(jQuery) {
    document.onreadystatechange = function(){
        if(document.readyState=='loaded' || document.readyState=='complete') {
            setTimeout(function(){ 
                
                jQuery('.drop-down').append('<div class="button"></div>');  
                jQuery('.drop-down').append('<ul class="select-list"></ul>');
                jQuery('.drop-down select option').each(function() {
                    var bg = jQuery(this).val();
                    var colortext1 = jQuery(this).text();
                    var colortext1_arr = colortext1.split(' +');
                    var colortext = colortext1_arr[0].replace(/\s/g, '');
                    
                    var obj = [];
                    <?php foreach ($records as $color) { ?>
                        obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';  
                    <?php } ?>

                    jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');
                });
                jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');              
                jQuery('.drop-down ul li').each(function() {
                    if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
                        jQuery(this).addClass('active');
                    }
                });
                jQuery('.drop-down .select-list span').on('click', function() {
                    var dd_text = jQuery(this).text();
                    var dd_val = jQuery(this).attr('value');
                    var dd_color_arr = dd_text.split(' +');
                    var dd_color = dd_color_arr[0].replace(/\s/g, '');
                    
                    jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

                    var obj1 = [];
                    <?php foreach ($records as $color) { ?>
                        obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';                         
                    <?php } ?>

                    jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
                    jQuery('.drop-down .select-list span').parent().removeClass('active');
                    jQuery(this).parent().addClass('active');
                    jQuery('.drop-down select[name=options]').val( dd_text );
                    jQuery('.drop-down .select-list li').slideUp();                
                });                
                jQuery('.drop-down .button').on('click', function() {
                    jQuery('.drop-down ul li').slideToggle();
                });
            }, 3000);            
        }
    }
}); 
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<?php

/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/

$_product = $block->getProduct();

$_attributes = $block->decorateArray($block->getAllowAttributes());

<?php if ($_product->isSaleable() && count($_attributes)):?>

<?php foreach ($_attributes as $_attribute): ?>

<?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>

<label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">

<span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>

</label>

<select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-validate="{required:true}"

id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"

class="super-attribute-select">

</select>

</div>

<?php else: ?>

<label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">

<span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>

</label>

<select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"

data-validate="{required:true}"

id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"

class="super-attribute-select">

</select>

</div>

<?php endif; ?>

<?php endforeach; ?>

{

"#product_addtocart_form": {

"configurable": {

"spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,

"gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',

'Magento_ConfigurableProduct') ?: 'replace'; ?>"

}

"*" : {

"Magento_ConfigurableProduct/js/catalog-add-to-cart": {}

}

</script>

<?php endif;?>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$connection = $objectManager->get('Magento\Framework\App\ResourceConnection')->getConnection('\Magento\Framework\App\ResourceConnection::DEFAULT_CONNECTION');

$records = $connection->fetchAll("SELECT * FROM color_code");

// In color_code table have 3 fields like id, color_name, image_url

// and store data something like this

// id color_name image_url

// 1 Black pub/media/catalog/swatches/2/40x40/media/black.png

// 2 Green pub/media/catalog/swatches/2/40x40/media/green.png

// 3 White pub/media/catalog/swatches/2/40x40/media/white.png

//print_r($records);

$storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');

$base_url = $storeManager->getStore()->getBaseUrl();

require(["jquery"], function(jQuery) {

document.onreadystatechange = function(){

if(document.readyState=='loaded' || document.readyState=='complete') {

setTimeout(function(){

jQuery('.drop-down').append('<div class="button"></div>');

jQuery('.drop-down').append('<ul class="select-list"></ul>');

jQuery('.drop-down select option').each(function() {

var bg = jQuery(this).val();

var colortext1 = jQuery(this).text();

var colortext1_arr = colortext1.split(' +');

var colortext = colortext1_arr[0].replace(/\s/g, '');

var obj = [];

<?php foreach ($records as $color) { ?>

obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';

<?php } ?>

jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');

});

jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');

jQuery('.drop-down ul li').each(function() {

if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {

jQuery(this).addClass('active');

}

});

jQuery('.drop-down .select-list span').on('click', function() {

var dd_text = jQuery(this).text();

var dd_val = jQuery(this).attr('value');

var dd_color_arr = dd_text.split(' +');

var dd_color = dd_color_arr[0].replace(/\s/g, '');

jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

var obj1 = [];

<?php foreach ($records as $color) { ?>

obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';

<?php } ?>

jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');

jQuery('.drop-down .select-list span').parent().removeClass('active');

jQuery(this).parent().addClass('active');

jQuery('.drop-down select[name=options]').val( dd_text );

jQuery('.drop-down .select-list li').slideUp();

});

jQuery('.drop-down .button').on('click', function() {

jQuery('.drop-down ul li').slideToggle();

});

}, 3000);

}

});

</script>

Step 2: Add below CSS in your style.css

.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }
.color .drop-down select { display: none; }
.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }
.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }
.color .drop-down .button a { float: right; text-decoration: none; }
.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0; 
    border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }
.color .drop-down .select-list li:first-child { margin-top: 1rem; }
.color .drop-down .select-list li { display: none; list-style: none; }
.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }
.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }
.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }
.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }

.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }

.color .drop-down select { display: none; }

.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }

.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }

.color .drop-down .button a { float: right; text-decoration: none; }

.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0;

border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }

.color .drop-down .select-list li:first-child { margin-top: 1rem; }

.color .drop-down .select-list li { display: none; list-style: none; }

.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }

.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }

.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }

.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }

.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }

Step 3: Run below commands.

- php bin/magento setup:upgrade
- php bin/magento cache:clean

1 2	- php bin/magento setup:upgrade - php bin/magento cache:clean

That’s it.

After making these changes, you can check your product detail page. You will see color images or icons in the color select boxes.

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-633c2d71b9700598477552/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire R. Patel

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?
Let's discuss