Adding Colour Dropdowns to Product Variations

Create colourchart.css file.

.select2-selection__rendered {
    line-height: 41px !important;
}

.select2-container .select2-selection--single {
    height: 45px !important;
}

.select2-selection__arrow {
    height: 44px !important;
}

[id*="classic-pearl-white-gloss"] {
	background:  #F5F7F4;
	color: #000;
}

[id*="anotec-silver-grey-matte"] {
	background:  #B7B8BA;
	color: #000;
}

Add code to custom.css file to connect the new colourchart.css file.

@import url("colourchart.css"); /* Colour Chart Colours for Dropdown */

Add custom.js file.

jQuery( document ).ready(function($) {


    $( "#pa_colour option" ).each(function( index ) {
        $(this).addClass($(this).val());
    })

     $('#pa_colour').select2({
        
     });


});