diff --git a/addons/product/product_demo.xml b/addons/product/product_demo.xml
index a017d0cc41d..260b4b3ea0b 100644
--- a/addons/product/product_demo.xml
+++ b/addons/product/product_demo.xml
@@ -347,6 +347,7 @@ FaceTime HD Camera, 1.2 MP Photos</field>
         </record>
         <record id="product_product_11" model="product.product">
             <field name="name">iPod</field>
+            <field name="variants">16 Gb</field>
             <field name="default_code">A6678</field>
             <field name="categ_id" ref="ipod"/>
             <field name="public_categ_id" ref="Keyboard_Mouse"/>
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index b76ebb00990..a0e72ef0db1 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -52,6 +52,17 @@ $(document).ready(function () {
         return false;
     });
 
+    // change price when they are variants
+    $('form.js_add_cart_json label').on('mouseup', function (ev) {
+        ev.preventDefault();
+        var $label = $(ev.currentTarget);
+        var $price = $label.parent("form").find(".oe_price");
+        if (!$price.data("price")) {
+            $price.data("price", parseFloat($price.html()));
+        }
+        $price.html($price.data("price")+parseFloat($label.find(".badge span").html() || 0));
+    });
+
     $(document).on('click', '.js_publish_management .js_go_to_top,.js_publish_management .js_go_to_bottom', function (event) {
         var $a = $(event.currentTarget);
         var $data = $a.parents(".js_publish_management:first");
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 19536a45bb7..225b87c2ebd 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -339,7 +339,7 @@
                                   <input type="radio" name="product_id" t-att-value="product.id" t-att-checked="product == product.product_variant_ids[0] or None"/>
                                   <t t-esc="product.variants or ''">Standard</t>
                                   <span class="badge" t-if="product.price_extra">
-                                      <t t-esc="product.price_extra > 0 and '+' or ''"/><t t-esc="product.price_extra"/> €
+                                      <t t-esc="product.price_extra > 0 and '+' or ''"/><span t-esc="product.price_extra"/> €
                                   </span>
                               </label>
                               <br/>
@@ -352,7 +352,7 @@
                                         <t t-esc="product.product_variant_ids[0].lst_price" /> €
                                     </span>&amp;nbsp;
                                   </t>
-                                  <h4><b><t t-esc="product.product_variant_ids[0].price" /> €</b></h4>
+                                  <h4><b><span class="oe_price" t-esc="product.product_variant_ids[0].price" /> €</b></h4>
                               </b>
                           </div>
                           <button class="btn btn-primary btn-lg mt8">Add to Cart</button>