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 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62837b452bdbb130043174/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on 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