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.

Magento 2 convert registered customer order to guest order after placing order
create the event.xml on your module under the Vendor/Module/etc/event.xml and...
Magento 2 : How to add custom meta tag in product view page?
If you need a custom meta tag for a specific...
Magento 2: How to set load custom font as preload?
Generally, if you load font as preload, it will load...
Magento 2 – how to show including & excluding tax price on product option?
Step 1: First you need to add di.xml in the...
Magento 2 add the product description or custom attribute in order email
Override the vendor/magento/module-sales/view/frontend/templates/email/items/order/default.phtml file on your theme and add the...

Author Info

Hire R. Patel

Fill the form & Get Installation Support

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

Recent Articles

Author Info

Get a Free Quote

Connect With Us

Fill the form & Get Installation Support

Let us code, you focus on sales and marketing

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

Recent Articles

Author Info

Get a Free Quote

Connect With Us