diff --git a/addons/sale/views/sale_product_configurator_templates.xml b/addons/sale/views/sale_product_configurator_templates.xml
index 86feb0125da..a08bbc35626 100644
--- a/addons/sale/views/sale_product_configurator_templates.xml
+++ b/addons/sale/views/sale_product_configurator_templates.xml
@@ -21,9 +21,9 @@
                         t-att-data-product-id="product.id"
                         t-esc="product.price"
                         t-options='{
-                        "widget": "monetary",
-                        "display_currency": to_currency
-                    }'/>
+                            "widget": "monetary",
+                            "display_currency": to_currency
+                        }'/>
                     <div class="css_quantity input-group oe_website_spinner">
                         <div class="input-group-prepend">
                             <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
@@ -58,48 +58,48 @@
                 <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
                 <input type="hidden" class="product_id" t-att-value="product.id"/>
                 <td class='td-img'>
-                <span t-field="product.image_medium" t-options='{"widget": "image" }'/>
+                    <span t-field="product.image_medium" t-options='{"widget": "image" }'/>
                 </td>
                 <td class='td-product_name'>
-                <strong t-field="product.display_name"/>
-                <div class="text-muted small">
-                    <div t-field="product.description_sale"/>
-                    <div class="js_attributes"/>
-                </div>
+                    <strong t-field="product.display_name"/>
+                    <div class="text-muted small">
+                        <div t-field="product.description_sale"/>
+                        <div class="js_attributes"/>
+                    </div>
                 </td>
                 <td class="text-center td-qty">
-                <div class="css_quantity input-group oe_website_spinner">
-                    <div class="input-group-prepend">
-                        <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                            <i class="fa fa-minus"></i>
-                        </button>
+                    <div class="css_quantity input-group oe_website_spinner">
+                        <div class="input-group-prepend">
+                            <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
+                                <i class="fa fa-minus"></i>
+                            </button>
+                        </div>
+                        <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
+                        <div class="input-group-append">
+                            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
+                                <i class="fa fa-plus"></i>
+                            </button>
+                        </div>
                     </div>
-                    <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
-                    <div class="input-group-append">
-                        <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
-                            <i class="fa fa-plus"></i>
-                        </button>
-                    </div>
-                </div>
                 </td>
                 <td class="text-center td-price" name="price">
-                <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"></ul>
-                <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values" ></div>
-                <div t-attf-class="text-danger oe_default_price oe_striked_price {{ (compute_currency(product.lst_price) - product.price) &lt; 0.01 and 'd-none' }}"
-                    t-field="product.lst_price"
-                    t-options='{
-                    "widget": "monetary",
-                    "from_currency": product.currency_id,
-                    "display_currency": to_currency
-                }'/>
-                <span class="oe_price product_id" style="white-space: nowrap;"
-                    t-att-data-product-id="product.id"
-                    t-esc="product.price"
-                    t-options='{
-                    "widget": "monetary",
-                    "display_currency": to_currency
-                }'/>
-                <span class="js_raw_price d-none" t-esc="product.price" />
+                    <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"></ul>
+                    <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values" ></div>
+                    <div t-attf-class="text-danger oe_default_price oe_striked_price {{ (compute_currency(product.lst_price) - product.price) &lt; 0.01 and 'd-none' }}"
+                        t-field="product.lst_price"
+                        t-options='{
+                            "widget": "monetary",
+                            "from_currency": product.currency_id,
+                            "display_currency": to_currency
+                        }'/>
+                    <span class="oe_price product_id" style="white-space: nowrap;"
+                        t-att-data-product-id="product.id"
+                        t-esc="product.price"
+                        t-options='{
+                            "widget": "monetary",
+                            "display_currency": to_currency
+                        }'/>
+                    <span class="js_raw_price d-none" t-esc="product.price" />
                 </td>
             </tr>
             <tr class="o_total_row">
@@ -110,9 +110,9 @@
                         t-att-data-product-id="product.id"
                         t-esc="product.price"
                         t-options='{
-                        "widget": "monetary",
-                        "display_currency": to_currency
-                    }'/>
+                            "widget": "monetary",
+                            "display_currency": to_currency
+                        }'/>
                 </td>
             </tr>
             <tr t-if="product.optional_product_ids" class="o_select_options"><td colspan="4"><h4>Available Options:</h4></td></tr>
@@ -122,148 +122,151 @@
     </template>
 
     <template id="optional_product_items">
-    <t t-foreach="product.optional_product_ids" t-as="product">
-        <t t-if="len(product.get_filtered_variants(reference_product)) > 0 or product.has_dynamic_attributes()">
-        <tr class="js_product">
-        <td class="td-img">
-        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
-        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'"/>
-        <input type="hidden" class="product_display_name" t-attf-name="optional-productname-#{product.id}" t-att-value="product.product_variant_id.display_name if len(product.product_variant_ids) == 1 else ''"/>
-        <span t-field="product.image_small" t-options='{"widget": "image"}' class="variant_image"/>
-        </td>
-        <td class='td-product_name' colspan="2">
-        <div class="float-left">
-            <strong class="product-name" t-field="product.name"/>
-            <div class="text-muted small" t-field="product.description_sale"/>
-        </div>
-        <div class="float-right">
-            <t t-call="sale.variants"/>
-        </div>
-        </td>
-        <td class="text-center td-price">
-        <span class="text-danger oe_default_price oe_optional"
-            t-field="product.lst_price"
-            t-options='{
-            "widget": "monetary",
-            "from_currency": product.currency_id,
-            "display_currency": to_currency
-          }'/>
-        <span class="oe_price" style="white-space: nowrap;"
-            t-field="product.price"
-            t-options='{
-                "widget": "monetary",
-                "display_currency": to_currency
-          }'/>
-        <span class="js_raw_price d-none" t-esc="product.price" />
-        <p class="css_not_available_msg alert alert-warning">Option not available</p>
+        <t t-foreach="product.optional_product_ids" t-as="product">
+            <t t-if="len(product.get_filtered_variants(reference_product)) > 0 or product.has_dynamic_attributes()">
+                <tr class="js_product">
+                    <td class="td-img">
+                        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
+                        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'"/>
+                        <input type="hidden" class="product_display_name" t-attf-name="optional-productname-#{product.id}" t-att-value="product.product_variant_id.display_name if len(product.product_variant_ids) == 1 else ''"/>
+                        <span t-field="product.image_small" t-options='{"widget": "image"}' class="variant_image"/>
+                    </td>
+                    <td class='td-product_name' colspan="2">
+                        <div class="float-left">
+                            <strong class="product-name" t-field="product.name"/>
+                            <div class="text-muted small" t-field="product.description_sale"/>
+                        </div>
+                        <div class="float-right">
+                            <t t-call="sale.variants"/>
+                        </div>
+                    </td>
+                    <td class="text-center td-price">
+                        <span class="text-danger oe_default_price oe_optional"
+                            t-field="product.lst_price"
+                            t-options='{
+                                "widget": "monetary",
+                                "from_currency": product.currency_id,
+                                "display_currency": to_currency
+                            }'/>
+                        <span class="oe_price" style="white-space: nowrap;"
+                            t-field="product.price"
+                            t-options='{
+                                "widget": "monetary",
+                                "display_currency": to_currency
+                            }'/>
+                        <span class="js_raw_price d-none" t-esc="product.price" />
+                        <p class="css_not_available_msg alert alert-warning">Option not available</p>
 
-        <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product.id}" value="0"/>
-        <a role="button" href="#" class="js_add"><i class="fa fa-shopping-cart add-optionnal-item"></i></a>
-        <span class="js_remove d-none">
-            <span class="optional_product_quantity"><span class="js_item add_qty">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/></span>
-            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"></i></a>
-        </span>
-        </td>
-        </tr>
+                        <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product.id}" value="0"/>
+                        <a role="button" href="#" class="js_add"><i class="fa fa-shopping-cart add-optionnal-item"></i></a>
+                        <span class="js_remove d-none">
+                            <span class="optional_product_quantity"><span class="js_item add_qty">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/></span>
+                            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"></i></a>
+                        </span>
+                    </td>
+                </tr>
+            </t>
         </t>
-    </t>
     </template>
 
 
 
     <template id="variants">
-      <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
-      <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
-        <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
-          <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
-          <li t-att-data-attribute_id="variant_id.attribute_id.id"
-                t-att-data-attribute_name="variant_id.attribute_id.name"
-                t-attf-class="variant_attribute #{'d-none' if len(variant_id.product_template_value_ids) == 1 and not variant_id.product_template_value_ids[0].is_custom else ''}">
+        <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
+        <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
+            <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
+              <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
+                <li t-att-data-attribute_id="variant_id.attribute_id.id"
+                    t-att-data-attribute_name="variant_id.attribute_id.name"
+                    t-attf-class="variant_attribute #{'d-none' if len(variant_id.product_template_value_ids) == 1 and not variant_id.product_template_value_ids[0].is_custom else ''}">
 
-            <strong t-field="variant_id.attribute_id.name" class="attribute_name" />
+                    <strong t-field="variant_id.attribute_id.name" class="attribute_name"/>
 
-            <t t-if="variant_id.attribute_id.type == 'select'">
-              <select
-                    t-att-data-attribute_id="variant_id.attribute_id.id"
-                    t-attf-class="form-control js_variant_change #{variant_id.attribute_id.create_variant}"
-                    t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
-                <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
-                  <option t-att-value="value_id.id"
-                    t-att-data-value_id="value_id.product_attribute_value_id.id"
-                    t-att-data-value_name="value_id.name"
-                    t-att-data-attribute_name="value_id.attribute_id.name"
-                    t-att-data-is_custom="value_id.is_custom">
-                      <span t-field="value_id.name"/>
-                      <span t-if="value_id.price_extra">
-                        <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
-                            "widget": "monetary",
-                            "from_currency": product.currency_id,
-                            "display_currency": to_currency or website.currency_id
-                        }'/>
-                      </span>
-                  </option>
-                </t>
-              </select>
-            </t>
-
-            <t t-if="variant_id.attribute_id.type == 'radio'">
-              <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-unstyled">
-                  <t t-set="inc" t-value="0"/>
-                  <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
-                      <li class="form-group js_attribute_value" style="margin: 0;">
-                          <label class="col-form-label">
-                              <div>
-                                <input type="radio"
-                                    t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
-                                    t-att-checked="'checked' if not inc else None"
-                                    t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
-                                    t-att-value="value_id.id"
+                    <t t-if="variant_id.attribute_id.type == 'select'">
+                        <select
+                            t-att-data-attribute_id="variant_id.attribute_id.id"
+                            t-attf-class="form-control js_variant_change #{variant_id.attribute_id.create_variant}"
+                            t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
+                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
+                                <option t-att-value="value_id.id"
                                     t-att-data-value_id="value_id.product_attribute_value_id.id"
                                     t-att-data-value_name="value_id.name"
                                     t-att-data-attribute_name="value_id.attribute_id.name"
-                                    t-att-data-is_custom="value_id.is_custom" />
-                                    <div class="radio_input_value">
-                                        <span t-field="value_id.name"/>
-                                        <span class="badge badge-pill" t-if="value_id.price_extra">
-                                            <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
+                                    t-att-data-is_custom="value_id.is_custom">
+                                    <span t-field="value_id.name"/>
+                                    <span t-if="value_id.price_extra">
+                                        <t t-esc="value_id.price_extra > 0 and '+' or ''"/>
+                                        <span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;"
+                                            t-options='{
                                                 "widget": "monetary",
                                                 "from_currency": product.currency_id,
                                                 "display_currency": to_currency or website.currency_id
                                             }'/>
-                                        </span>
-                                    </div>
-                                </div>
-                          </label>
-                      </li>
-                      <t t-set="inc" t-value="inc+1"/>
-                  </t>
-              </ul>
-            </t>
+                                    </span>
+                                </option>
+                            </t>
+                        </select>
+                    </t>
 
-            <t t-if="variant_id.attribute_id.type == 'color'">
-              <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-inline">
-                  <t t-set="inc" t-value="0"/>
-                  <li t-foreach="variant_id.product_template_value_ids" t-as="value_id" class="list-inline-item">
-                      <label t-attf-style="background-color:#{value_id.html_color or value_id.name if not value_id.is_custom else ''}"
-                          t-attf-class="css_attribute_color #{'active' if not inc else ''} #{'custom_value' if value_id.is_custom else ''}">
-                        <input type="radio"
-                          t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
-                          t-att-checked="'checked' if not inc else None"
-                          t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
-                          t-att-value="value_id.id"
-                          t-att-title="value_id.name"
-                          t-att-data-value_id="value_id.product_attribute_value_id.id"
-                          t-att-data-value_name="value_id.name"
-                          t-att-data-attribute_name="value_id.attribute_id.name"
-                          t-att-data-is_custom="value_id.is_custom"/>
-                      </label>
-                      <t t-set="inc" t-value="inc+1"/>
-                  </li>
-              </ul>
-            </t>
+                    <t t-if="variant_id.attribute_id.type == 'radio'">
+                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-unstyled">
+                            <t t-set="inc" t-value="0"/>
+                            <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
+                                <li class="form-group js_attribute_value" style="margin: 0;">
+                                    <label class="col-form-label">
+                                        <div>
+                                            <input type="radio"
+                                                t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
+                                                t-att-checked="'checked' if not inc else None"
+                                                t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
+                                                t-att-value="value_id.id"
+                                                t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                                t-att-data-value_name="value_id.name"
+                                                t-att-data-attribute_name="value_id.attribute_id.name"
+                                                t-att-data-is_custom="value_id.is_custom" />
+                                            <div class="radio_input_value">
+                                                <span t-field="value_id.name"/>
+                                                <span class="badge badge-pill" t-if="value_id.price_extra">
+                                                    <t t-esc="value_id.price_extra > 0 and '+' or ''"/>
+                                                    <span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;"
+                                                        t-options='{
+                                                            "widget": "monetary",
+                                                            "from_currency": product.currency_id,
+                                                            "display_currency": to_currency or website.currency_id
+                                                        }'/>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </label>
+                                </li>
+                                <t t-set="inc" t-value="inc+1"/>
+                            </t>
+                        </ul>
+                    </t>
 
-          </li>
-        </t>
-      </ul>
+                    <t t-if="variant_id.attribute_id.type == 'color'">
+                        <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-inline">
+                            <t t-set="inc" t-value="0"/>
+                            <li t-foreach="variant_id.product_template_value_ids" t-as="value_id" class="list-inline-item">
+                                <label t-attf-style="background-color:#{value_id.html_color or value_id.name if not value_id.is_custom else ''}"
+                                    t-attf-class="css_attribute_color #{'active' if not inc else ''} #{'custom_value' if value_id.is_custom else ''}">
+                                    <input type="radio"
+                                        t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
+                                        t-att-checked="'checked' if not inc else None"
+                                        t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
+                                        t-att-value="value_id.id"
+                                        t-att-title="value_id.name"
+                                        t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                        t-att-data-value_name="value_id.name"
+                                        t-att-data-attribute_name="value_id.attribute_id.name"
+                                        t-att-data-is_custom="value_id.is_custom"/>
+                                </label>
+                                <t t-set="inc" t-value="inc+1"/>
+                            </li>
+                        </ul>
+                    </t>
+                </li>
+            </t>
+        </ul>
     </template>
 </odoo>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index bbeea11cc24..3b4939f48be 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -623,23 +623,23 @@
     </template>
 
     <template id="product_variants" inherit_id="website_sale.product" active="False" customize_show="True" name="List View of Variants">
-      <xpath expr="//t[@t-placeholder='select']" position="replace">
-        <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
-        <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"/>
-        <input type="hidden" t-if="len(product.product_variant_ids) == 1" class="product_id" name="product_id" t-att-value="product.product_variant_id.id"/>
-        <t t-if="len(product.product_variant_ids) &gt; 1">
-            <div t-foreach="product.product_variant_ids" t-as="variant_id" class="custom-control custom-radio">
-                <input type="radio" name="product_id" class="custom-control-input js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-lst_price="compute_currency(variant_id.lst_price)" t-att-data-price="variant_id.price"/>
-                <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label">
-                    <span t-esc="variant_id.name_get()[0][1]"/>
-                    <t t-set="diff_price" t-value="variant_id.price - variant_id.product_tmpl_id.price"/>
-                    <span class="badge badge-pill" t-if="diff_price != 0">
-                        <t t-esc="diff_price > 0 and '+' or '-'"/><span t-esc="abs(diff_price)" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-                    </span>
-                </label>
-            </div>
-        </t>
-      </xpath>
+        <xpath expr="//t[@t-placeholder='select']" position="replace">
+                <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
+                <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)"/>
+                <input type="hidden" t-if="len(product.product_variant_ids) == 1" class="product_id" name="product_id" t-att-value="product.product_variant_id.id"/>
+                <t t-if="len(product.product_variant_ids) &gt; 1">
+                    <div t-foreach="product.product_variant_ids" t-as="variant_id" class="custom-control custom-radio">
+                        <input type="radio" name="product_id" class="custom-control-input js_product_change" t-att-checked="'checked' if variant_id_index == 0 else None" t-attf-id="radio_variant_#{variant_id.id}" t-att-value="variant_id.id" t-att-data-lst_price="compute_currency(variant_id.lst_price)" t-att-data-price="variant_id.price"/>
+                        <label t-attf-for="radio_variant_#{variant_id.id}" label-default="label-default" class="custom-control-label">
+                            <span t-esc="variant_id.name_get()[0][1]"/>
+                            <t t-set="diff_price" t-value="variant_id.price - variant_id.product_tmpl_id.price"/>
+                            <span class="badge badge-pill" t-if="diff_price != 0">
+                                <t t-esc="diff_price > 0 and '+' or '-'"/><span t-esc="abs(diff_price)" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
+                            </span>
+                        </label>
+                    </div>
+                </t>
+        </xpath>
     </template>
 
     <template id="wizard_checkout" name="Wizard Checkout">