DOS OPCIONES :

 

1- product-variants.tpl

<li class=”pull-xs-left input-container”>

Agregar:

<span> {$colors.$id_attribute.name} </span>

2-

Modification of custom.css

File is located in this directory: themes/classic/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:

1
2
3
4
5
6
.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/classic/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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
 $(".input-color").parent().parent().parent().parent().find('.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().parent().find('.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());
  });
 });
});

Te ayudó?