diff --git a/addons/product/product_demo.xml b/addons/product/product_demo.xml
index 4f922f40629..112cb581a4b 100644
--- a/addons/product/product_demo.xml
+++ b/addons/product/product_demo.xml
@@ -213,6 +213,10 @@ FaceTime HD Camera, 1.2 MP Photos</field>
             <field name="attribute_line_ids" eval="[(6,0,[ref('product.product_attribute_line_1'), ref('product.product_attribute_line_2'), ref('product.product_attribute_line_3')])]"/>
         </record>
         
+        <record id="product_product_4d" model="product.product">
+            <field name="active" eval="False"/>
+        </record>
+        
         <record id="product_attribute_price_1" model="product.attribute.price">
             <field name="product_tmpl_id" ref="product_product_4_product_template"/>
             <field name="value_id" ref="product_attribute_value_2"/>
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index 5ba5bd0716a..73d374357ab 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -289,6 +289,13 @@
 .css_attribute_color input {
   margin: 8px;
   height: 13px;
+  opacity: 0;
+}
+.css_attribute_color.active {
+  border: 3px ridge #66ee66;
+}
+.css_attribute_color.active input {
+  margin: 6px;
 }
 
 .js_add_cart_variants option.css_not_available {
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index a5c552bb0ca..40308925552 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -251,6 +251,12 @@
     input
         margin: 8px
         height: 13px
+        opacity: 0
+    &.active
+        border: 3px ridge #66ee66
+    &.active input
+        margin: 6px
+
 .js_add_cart_variants
     option.css_not_available
         color: #ccc
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 35e028dfdc0..62c1f829bde 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -62,6 +62,11 @@ $(document).ready(function () {
         var dec = value % 1;
         $price.html(value + (dec < 0.01 ? ".00" : (dec < 1 ? "0" : "") ));
     });
+    // hightlight selected color
+    $('.css_attribute_color input').on('change', function (ev) {
+        $('.css_attribute_color').removeClass("active");
+        $('.css_attribute_color:has(input:checked)').addClass("active");
+    });
 
     var $form_var = $('form.js_add_cart_variants');
     var variant_ids = $form_var.data("attribute_value_ids");
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 8811f6c90f9..925353d6de6 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -297,8 +297,8 @@
                       </t>
                       <t t-if="a.type == 'color'">
                         <t t-foreach="a.value_ids" t-as="v">
-                          <label class="css_attribute_color"
-                              t-attf-style="background-color:#{v.color or v.name}">
+                          <label t-attf-style="background-color:#{v.color or v.name}"
+                              t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
                               <input type="checkbox"
                                   name="attrib"
                                   t-att-value="'%s,%s' % (a.id,v.id)"
@@ -481,8 +481,8 @@
                   <ul class="nav nav-pills nav-stacked">
                       <t t-set="inc" t-value="0"/>
                       <t t-foreach="variant_id.value_ids" t-as="value_id">
-                          <label class="css_attribute_color"
-                              t-attf-style="background-color:#{value_id.color or value_id.name}">
+                          <label t-attf-style="background-color:#{value_id.color or value_id.name}"
+                              t-attf-class="css_attribute_color #{'active' if not inc else ''}">
                             <input type="radio"
                               t-att-checked="'checked' if not inc else ''"
                               t-att-name="'attribute-%s' % variant_id.attribute_id.id"
@@ -529,13 +529,12 @@
 
 <template id="product_attributes" inherit_id="website_sale.product" optional="enabled" name="Product attributes">
   <xpath expr="//p[@t-field='product.description_sale']" position="after">
-    <hr t-if="product.attribute_line_ids"/>
+    <hr t-if="sum([(1 if len(l.value_ids)==1 else 0) for l in product.attribute_line_ids])"/>
     <p class="text-muted">
       <t t-foreach="product.attribute_line_ids" t-as="variant_id">
-        <t t-set="inc" t-value="0"/>
-        <span t-field="variant_id.attribute_id"/>: 
-        <t t-foreach="variant_id.value_ids" t-as="value_id"><t t-if="inc">,</t> <span t-field="value_id.name"/><t t-set="inc" t-value="inc+1"/></t>
-        <br/>
+        <t t-if="len(variant_id.value_ids)==1">
+          <span t-field="variant_id.attribute_id"/>: <span t-field="variant_id.value_ids[0].name"/><br/>
+        </t>
       </t>
     </p>
   </xpath>