Display selected attribute color name on Prestashop for Warehouse theme

Source: https://mypresta.eu/prestashop-17/show-selected-color-attribute-name.html

Modification of custom.css

File is located in this directory: themes/warehouse/assets/css/custom.css (if you use different theme than « classic » theme – open your theme directory instead). At the end of this file paste code attached below:

.ColorLabel:after {
	display:inline-block;
	content: ': ' attr(data-after);
	margin-left:5px;
	font-weight:bold;
}

Modification of custom.js

File is located in this directory: themes/warehouse/assets/js/custom.js (the same as previously if you use different theme than « classic » – open your theme directory instead). At the end of this file paste code attached below:

$(document).ready(function(){
 $(".input-color").parent().parent().parent().find('.form-control-label').addClass('ColorLabel');
 $(".input-color:checked").each(function(){
   $(this).parent().parent().parent().parent().find('.ColorLabel').attr('data-after', $(this).parent().find('.sr-only').html());
 });
 
  
 prestashop.on("updatedProduct", function (){
  $(".input-color").parent().parent().parent().find('.form-control-label').addClass('ColorLabel'); 
  $(".input-color:checked").each(function(){
    $(this).parent().parent().parent().parent().find('.ColorLabel').attr('data-after', $(this).parent().find('.sr-only').html());
  });
 });
});

If Smart cache for JavaScript is enabled, add the JS code to themes/warehouse/assets/js/theme.js.