From 0750eb6315fe9c2d1f1de36b9b756b5097ed11e0 Mon Sep 17 00:00:00 2001
From: "Mathieu (mano)" <mano@odoo.com>
Date: Thu, 24 Aug 2023 17:45:23 +0200
Subject: [PATCH] [IMP] website_sale, *: Checkout flow redesign

It introduces:

New navigation flow with buttons inside the cart_summary template
Reviewed tables across the pages removing stripes and improving spacing
Redesigned stepper wizard with a reusable template in /website

task-3083707

Part-of: odoo/odoo#133064
Co-authored-by: Valentin Chevalier <vcr@odoo.com>
---
 .../views/payment_demo_templates.xml          |    2 +-
 .../src/js/tours/wevent_performance_tour.js   |    5 +-
 addons/website/static/src/scss/website.scss   |   39 +
 addons/website/views/website_templates.xml    |   90 ++
 .../tours/website_event_sale_last_ticket.js   |    2 +-
 .../views/website_sale_templates.xml          |    4 +-
 addons/website_sale/controllers/main.py       |   18 +-
 .../models/res_config_settings.py             |    4 +-
 addons/website_sale/models/website.py         |   63 +-
 .../static/src/js/tours/tour_utils.js         |    6 +-
 .../static/src/js/website_sale.js             |   15 +-
 .../static/src/js/website_sale_payment.js     |    4 +-
 .../static/src/js/website_sale_tracking.js    |    4 +-
 .../static/src/js/website_sale_utils.js       |    2 +-
 .../static/src/scss/primary_variables.scss    |    4 +
 .../static/src/scss/website_sale.scss         |  215 ++-
 .../src/scss/website_sale_frontend.scss       |  138 --
 .../website_sale_add_to_cart_snippet_tour.js  |    2 +-
 .../static/tests/tours/website_sale_buy.js    |   19 +-
 .../tests/tours/website_sale_complete_flow.js |   39 +-
 .../website_sale_complete_flow_backend.js     |    2 +-
 .../tours/website_sale_shop_cart_recovery.js  |    4 +-
 .../tours/website_sale_shop_customize.js      |    2 +-
 .../website_sale_shop_dynamic_variants.js     |    2 +-
 .../tests/tours/website_sale_shop_mail.js     |    2 +-
 .../tours/website_sale_shop_multi_checkbox.js |   10 +-
 .../website_sale_shop_no_variant_attribute.js |    4 +-
 .../website_sale/tests/test_sale_process.py   |    4 +-
 .../test_website_sale_add_to_cart_snippet.py  |    2 +-
 .../website_sale/views/snippets/snippets.xml  |    8 +-
 addons/website_sale/views/templates.xml       | 1436 ++++++++---------
 .../views/website_sale_delivery_templates.xml |   11 +-
 .../static/tests/tours/test_gift_card_tour.js |   11 +-
 .../tests/tours/test_promo_main_tour.js       |   13 +-
 .../tours/website_sale_delivery_gift_card.js  |   13 +-
 .../views/website_sale_templates.xml          |   14 +-
 .../website_sale_variants_modal_window.js     |   12 +-
 .../views/website_sale_templates.xml          |    4 +-
 .../views/website_sale_stock_templates.xml    |    2 +-
 39 files changed, 1098 insertions(+), 1133 deletions(-)

diff --git a/addons/payment_demo/views/payment_demo_templates.xml b/addons/payment_demo/views/payment_demo_templates.xml
index 017359bc42a..70972802a51 100644
--- a/addons/payment_demo/views/payment_demo_templates.xml
+++ b/addons/payment_demo/views/payment_demo_templates.xml
@@ -45,7 +45,7 @@
                     </span>
             </button>
             <div t-attf-id="o_payment_demo_modal_{{provider_sudo.id}}"
-                 class="modal fade"
+                 class="modal fade mt-5"
                  tabindex="-1"
                  aria-labelledby="o_payment_demo_modal_label"
                  aria-hidden="true"
diff --git a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
index 3b29bdc3820..640688aa4da 100644
--- a/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
+++ b/addons/test_event_full/static/src/js/tours/wevent_performance_tour.js
@@ -49,10 +49,7 @@ wsTourUtils.fillAdressForm({
     street: "Cheesy Crust Street, 42",
     city: "CheeseCity",
     zip: "8888",
-}), {
-    content: "Next",
-    trigger: '.oe_cart .btn:contains("Next")',
-},
+}),
 ...wsTourUtils.payWithDemo(),
 ];
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index f9f6c726983..716114affd1 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1498,6 +1498,45 @@ header {
     }
 }
 
+// Step wizard used in /shop, /event, appointment
+.o_wizard {
+    $o_wizard_circle_progress_size: 64px;
+
+    .o_wizard_step_active {
+        @include media-breakpoint-up(md) {
+            color: $body-color;
+        }
+    }
+
+    .o_wizard_circle_progress {
+        &, &:before {
+            width: $o_wizard_circle_progress_size;
+            height: $o_wizard_circle_progress_size;
+            line-height: $o_wizard_circle_progress_size;
+        }
+
+        &:before {
+            position: absolute;
+            border-radius: 50%;
+            box-shadow: inset 0 0 0 map-get($border-widths, 5) currentColor;
+            opacity: .2;
+            content: "";
+        }
+    }
+
+    .o_wizard_circle_progress_left .progress-bar {
+        border-radius: 0 ($o_wizard_circle_progress_size * .5) ($o_wizard_circle_progress_size * .5) 0;
+        transform-origin: center left;
+        transform: rotate(var(--leftProgress));
+    }
+
+    .o_wizard_circle_progress_right .progress-bar {
+        border-radius: ($o_wizard_circle_progress_size * .5) 0 0 ($o_wizard_circle_progress_size * .5);
+        transform-origin: center right;
+        transform: rotate(var(--rightProgress));
+    }
+}
+
 // Language selector
 .js_language_selector {
     .dropdown-menu {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 45d95a7d8a4..5378fd47b5f 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2601,6 +2601,96 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     </xpath>
 </template>
 
+<template id="step_wizard" name="Step Checkout">
+    <!-- parameters:
+        - wizard_step: An ordered list of steps. Each step must contain:
+                       - (1): A list of the xmlid of the templates for which the step applies for
+                       - (2): A dict that must contain the following keys: ['name', 'current_href']
+    -->
+    <div class="o_wizard d-flex flex-wrap justify-content-between justify-content-md-start my-3 my-sm-4">
+        <div class="d-flex flex-column flex-md-row align-items-end align-items-md-start justify-content-center">
+            <!-- Large screen views -->
+            <t t-foreach="wizard_step" t-as="step">
+                <t t-set="is_current_step" t-value="xmlid in step[0]"/>
+                <t t-if="is_current_step" t-set="current_step" t-value="step"/>
+                <span t-if="current_step"
+                        t-attf-class="#{not is_current_step and 'o_disabled'} d-none d-md-flex no-decoration">
+                    <div t-attf-class="d-flex align-items-center {{'o_wizard_step_active fw-bold' if is_current_step else 'text-muted'}}">
+                        <p class="o_wizard_steplabel text-center mb-0">
+                            <t t-out="step[1]['name']"/>
+                        </p>
+                        <span t-if="not step_last"
+                                class="fa fa-angle-right d-inline-block align-middle mx-sm-3 text-muted fs-5"/>
+                    </div>
+                </span>
+                <a t-else=""
+                    class="d-none d-md-flex no-decoration"
+                    t-att-href="step[1]['current_href']"
+                    t-att-title="step[1]['name']">
+                    <div class="d-flex align-items-center o_wizard_step-done">
+                        <p class="o_wizard_steplabel text-center mb-0">
+                            <t t-out="step[1]['name']"/>
+                        </p>
+                        <span t-if="not step_last"
+                                class="fa fa-angle-right d-inline-block align-middle mx-sm-3 text-muted fs-5"/>
+                    </div>
+                </a>
+            </t>
+            <!-- Mobile screen views -->
+            <div class="d-flex d-md-none flex-column align-items-start">
+                <div class="dropdown">
+                    <a class="dropdown-toggle fw-bold"
+                        role="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                        title="Steps">
+                        <t t-out="list(filter(lambda step: xmlid in step[0],wizard_step))[0][1]['name']"/>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <t t-set="current_step" t-value="None"/>
+                        <li t-foreach="wizard_step" t-as="step">
+                            <t t-set="is_current_step" t-value="xmlid in step[0]"/>
+                            <t t-if="is_current_step">
+                                <t t-set="current_step" t-value="step"/>
+                                <t t-set="_steps_in_deg"
+                                    t-value="(step_index + 1) / len(wizard_step) * 360"/>
+                                <t t-set="next_step"
+                                    t-value="wizard_step[step_index+1] if step_index+1 &lt; len(wizard_step) else False"/>
+                            </t>
+                            <a t-if="not current_step"
+                                class="dropdown-item"
+                                t-att-href="step[1]['current_href']"
+                                t-out="step[1]['name']"
+                                t-att-title="step[1]['name']"/>
+                            <span t-else=""
+                                    t-attf-class="dropdown-item {{'fw-bold' if is_current_step else 'text-muted o_disabled'}}"
+                                    t-out="step[1]['name']"
+                                    t-att-title="step[1]['name']"/>
+                        </li>
+                    </ul>
+                </div>
+                <span t-if="next_step"
+                        class="d-inline-block d-md-none text-muted"
+                        t-out="'Next: ' + next_step[1]['name']"/>
+            </div>
+        </div>
+        <div class="o_wizard_circle_progress progress d-md-none position-relative rounded-circle ms-3 bg-transparent"
+                t-attf-style="--rightProgress:{{'180' if _steps_in_deg >= 180 else _steps_in_deg}}deg; --leftProgress:{{_steps_in_deg-180 if _steps_in_deg >= 180 else 0}}deg;">
+            <span class="o_wizard_circle_progress_left position-absolute start-0 top-0 z-index-1 overflow-hidden w-50 h-100 ">
+                <span class="progress-bar position-absolute start-100 top-0 w-100 h-100 border border-5 border-start-0 border-primary bg-transparent"/>
+            </span>
+            <span class="o_wizard_circle_progress_right position-absolute top-0 end-0 z-index-1 overflow-hidden w-50 h-100">
+                <span class="progress-bar position-absolute top-0 end-100 w-100 h-100 border border-5 border-end-0 border-primary bg-transparent"/>
+            </span>
+            <p class="mx-auto fw-bold">
+                <t t-out="wizard_step.index(current_step)+1"/>
+                of
+                <t t-out="len(wizard_step)"/>
+            </p>
+        </div>
+    </div>
+</template>
+
 <template id="iframefallback" inherit_id="web.layout" primary="True">
     <xpath expr="//head/link[last()]" position="after">
         <t t-call-assets="web.assets_frontend" t-js="false"/>
diff --git a/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js b/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
index a2550faa239..ae9462021da 100644
--- a/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
+++ b/addons/website_event_sale/static/tests/tours/website_event_sale_last_ticket.js
@@ -57,7 +57,7 @@ registry.category("web_tour.tours").add('event_buy_last_ticket', {
     },
     {
         content: "Validate address",
-        trigger: '.btn-primary:contains("Next")',
+        trigger: '.btn-primary:contains("Continue checkout")',
     },
     ...wsTourUtils.payWithTransfer(true),
 ]});
diff --git a/addons/website_event_sale/views/website_sale_templates.xml b/addons/website_event_sale/views/website_sale_templates.xml
index 58fe21383f5..d27c37c4cc2 100644
--- a/addons/website_event_sale/views/website_sale_templates.xml
+++ b/addons/website_event_sale/views/website_sale_templates.xml
@@ -34,8 +34,8 @@
     </template>
 
     <!-- If the sale order line concerns an event, we want to show an additional line with the event name -->
-    <template id="cart_summary_inherit_website_event_sale" inherit_id="website_sale.cart_summary" name="Event Cart right column">
-        <xpath expr="//td[hasclass('td-product_name')]/div/strong" position="after">
+    <template id="cart_summary_inherit_website_event_sale" inherit_id="website_sale.checkout_layout" name="Event Cart right column">
+        <xpath expr="//td[@name='website_sale_cart_summary_product_name']/h6" position="after">
             <t t-if="line.event_id" t-call="website_sale.cart_line_description_following_lines"/>
         </xpath>
     </template>
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index eba3e7d7d51..c344067d65a 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -892,8 +892,8 @@ class WebsiteSale(payment_portal.PaymentPortal):
                 'suggested_products': order._cart_accessories()
             }
         )
-        values['website_sale.short_cart_summary'] = request.env['ir.ui.view']._render_template(
-            "website_sale.short_cart_summary", {
+        values['website_sale.total'] = request.env['ir.ui.view']._render_template(
+            "website_sale.total", {
                 'website_sale_order': order,
             }
         )
@@ -1545,7 +1545,7 @@ class WebsiteSale(payment_portal.PaymentPortal):
         order.order_line._compute_tax_id()
         request.session['sale_last_order_id'] = order.id
         request.website.sale_get_order(update_pricelist=True)
-        extra_step = request.website.viewref('website_sale.extra_info_option')
+        extra_step = request.website.viewref('website_sale.extra_info')
         if extra_step.active:
             return request.redirect("/shop/extra_info")
 
@@ -1554,17 +1554,10 @@ class WebsiteSale(payment_portal.PaymentPortal):
     # ------------------------------------------------------
     # Extra step
     # ------------------------------------------------------
-    def _extra_info_values(self, **post):
-        """
-        This method is a hook to pass additional values when rendering the 'website_sale.extra_info' template (e.g. add
-        a flag to trigger a style variation)
-        """
-        return {}
-
     @http.route(['/shop/extra_info'], type='http', auth="public", website=True, sitemap=False)
     def extra_info(self, **post):
         # Check that this option is activated
-        extra_step = request.website.viewref('website_sale.extra_info_option')
+        extra_step = request.website.viewref('website_sale.extra_info')
         if not extra_step.active:
             return request.redirect("/shop/payment")
 
@@ -1584,7 +1577,6 @@ class WebsiteSale(payment_portal.PaymentPortal):
             'partner': order.partner_id.id,
             'order': order,
         }
-        values.update(self._extra_info_values(**post))
         return request.render("website_sale.extra_info", values)
 
     # ------------------------------------------------------
@@ -1620,6 +1612,7 @@ class WebsiteSale(payment_portal.PaymentPortal):
             'errors': [],
             'partner': order.partner_invoice_id,
             'order': order,
+            'submit_button_label': _("Pay now"),
             'payment_action_id': request.env.ref('payment.action_payment_provider').id,
             'action_activate_stripe_id': request.env.ref(
                 'website_payment.action_activate_stripe'
@@ -1756,6 +1749,7 @@ class WebsiteSale(payment_portal.PaymentPortal):
         """
         return {
             'order': order,
+            'website_sale_order': order,
             'order_tracking_info': self.order_2_return_dict(order),
         }
 
diff --git a/addons/website_sale/models/res_config_settings.py b/addons/website_sale/models/res_config_settings.py
index c6feb931827..2eb0cf82c51 100644
--- a/addons/website_sale/models/res_config_settings.py
+++ b/addons/website_sale/models/res_config_settings.py
@@ -58,14 +58,14 @@ class ResConfigSettings(models.TransientModel):
     def get_values(self):
         res = super(ResConfigSettings, self).get_values()
         res.update(
-            enabled_extra_checkout_step=self.env.ref('website_sale.extra_info_option').active,
+            enabled_extra_checkout_step=self.env.ref('website_sale.extra_info').active,
             enabled_buy_now_button=self.env.ref('website_sale.product_buy_now').active,
         )
         return res
 
     def set_values(self):
         super().set_values()
-        extra_step_view = self.env.ref('website_sale.extra_info_option')
+        extra_step_view = self.env.ref('website_sale.extra_info')
         if extra_step_view.active != self.enabled_extra_checkout_step:
             extra_step_view.active = self.enabled_extra_checkout_step
         buy_now_view = self.env.ref('website_sale.product_buy_now')
diff --git a/addons/website_sale/models/website.py b/addons/website_sale/models/website.py
index 61c524db31a..29a52ff27c5 100644
--- a/addons/website_sale/models/website.py
+++ b/addons/website_sale/models/website.py
@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-from odoo import api, fields, models, tools, SUPERUSER_ID, _
+from odoo import _, _lt, SUPERUSER_ID, api, fields, models, tools
 from odoo.http import request
 from odoo.osv import expression
 
@@ -565,6 +565,67 @@ class Website(models.Model):
 
         return self.is_view_active('website_sale.address_b2b')
 
+    def _get_checkout_steps(self, current_step=None):
+        """ Return an ordered list of steps according to the current template rendered.
+
+        If `current_step` is provided, returns only the corresponding step.
+
+        Note: self.ensure_one()
+
+        :param str current_step: The xmlid of the current step, defaults to None.
+        :rtype: list
+        :return: A list with the following structure:
+            [
+                [xmlid],
+                {
+                    'name': str,
+                    'current_href': str,
+                    'main_button': str,
+                    'main_button_href': str,
+                    'back_button': str,
+                    'back_button_href': str
+                }
+            ]
+        """
+        self.ensure_one()
+        is_extra_step_active = self.viewref('website_sale.extra_info').active
+        redirect_to_sign_in = self.account_on_checkout == 'mandatory' and self.is_public_user()
+
+        steps = [(['website_sale.cart'], {
+            'name': _lt("Review Order"),
+            'current_href': '/shop/cart',
+            'main_button': _lt("Sign In") if redirect_to_sign_in else _lt("Checkout"),
+            'main_button_href': f'{"/web/login?redirect=" if redirect_to_sign_in else ""}/shop/checkout?express=1',
+            'back_button':  _lt("Continue shopping"),
+            'back_button_href': '/shop',
+        }), (['website_sale.checkout', 'website_sale.address'], {
+            'name': _lt("Shipping"),
+            'current_href': '/shop/checkout',
+            'main_button': _lt("Confirm"),
+            'main_button_href': f'{"/shop/extra_info" if is_extra_step_active else "/shop/confirm_order"}',
+            'back_button':  _lt("Back to cart"),
+            'back_button_href': '/shop/cart',
+        })]
+        if is_extra_step_active:
+            steps.append((['website_sale.extra_info'], {
+                'name': _lt("Extra Info"),
+                'current_href': '/shop/extra_info',
+                'main_button': _lt("Continue checkout"),
+                'main_button_href': '/shop/confirm_order',
+                'back_button':  _lt("Return to shipping"),
+                'back_button_href': '/shop/checkout',
+            }))
+        steps.append((['website_sale.payment'], {
+            'name': _lt("Payment"),
+            'current_href': '/shop/payment',
+            'back_button':  _lt("Back to cart"),
+            'back_button_href': '/shop/cart',
+        }))
+
+        if current_step:
+            return next(step for step in steps if current_step in step[0])[1]
+        else:
+            return steps
 
 class WebsiteSaleExtraField(models.Model):
     _name = 'website.sale.extra.field'
diff --git a/addons/website_sale/static/src/js/tours/tour_utils.js b/addons/website_sale/static/src/js/tours/tour_utils.js
index dab2ef20765..d0ec57f3a46 100644
--- a/addons/website_sale/static/src/js/tours/tour_utils.js
+++ b/addons/website_sale/static/src/js/tours/tour_utils.js
@@ -96,8 +96,8 @@ function fillAdressForm(adressParams = {
         }
     });
     steps.push({
-        content: "Next",
-        trigger: '.oe_cart .btn:contains("Next")',
+        content: "Continue checkout",
+        trigger: '.oe_cart .btn:contains("Continue checkout")',
     });
     return steps;
 }
@@ -114,7 +114,7 @@ function goToCart({quantity = 1, position = "bottom", backend = false} = {}) {
 function goToCheckout() {
     return {
         content: 'Checkout your order',
-        trigger: 'a[role="button"] span:contains("Process Checkout")',
+        trigger: 'a[href^="/shop/checkout"]',
         run: 'click',
     };
 }
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 84fb00cd83c..6fddbb5b720 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -25,7 +25,6 @@ export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerM
         'change form.js_attributes input, form.js_attributes select': '_onChangeAttribute',
         'mouseup form.js_add_cart_json label': '_onMouseupAddCartLabel',
         'touchend form.js_add_cart_json label': '_onMouseupAddCartLabel',
-        'click .show_coupon': '_onClickShowCoupon',
         'submit .o_wsale_products_searchbar_form': '_onSubmitSaleSearch',
         'change select[name="country_id"]': '_onChangeCountry',
         'change #shipping_use_same': '_onChangeShippingUseSame',
@@ -600,14 +599,6 @@ export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerM
         var dec = value % 1;
         $price.html(value + (dec < 0.01 ? ".00" : (dec < 1 ? "0" : "") ));
     },
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onClickShowCoupon: function (ev) {
-        $(".show_coupon").hide();
-        $('.coupon_form').removeClass('d-none');
-    },
     /**
      * @private
      * @param {Event} ev
@@ -828,12 +819,12 @@ publicWidget.registry.websiteSaleCart = publicWidget.Widget.extend({
         var $old = $(`.${rowAddrClass}`).find('.card.border.border-primary');
         $old.find('.btn-addr').toggle();
         $old.addClass(cardClass);
-        $old.removeClass('border border-primary');
+        $old.removeClass('bg-primary border border-primary');
 
         var $new = $(ev.currentTarget).parent('div.one_kanban').find('.card');
         $new.find('.btn-addr').toggle();
         $new.removeClass(cardClass);
-        $new.addClass('border border-primary');
+        $new.addClass('bg-primary border border-primary');
 
         var $form = $(ev.currentTarget).parent('div.one_kanban').find('form.d-none');
         $.post($form.attr('action'), $form.serialize()+'&xhr=1');
@@ -852,7 +843,7 @@ publicWidget.registry.websiteSaleCart = publicWidget.Widget.extend({
      */
     _onClickDeleteProduct: function (ev) {
         ev.preventDefault();
-        $(ev.currentTarget).closest('tr').find('.js_quantity').val(0).trigger('change');
+        $(ev.currentTarget).closest('.o_cart_product').find('.js_quantity').val(0).trigger('change');
     },
 });
 
diff --git a/addons/website_sale/static/src/js/website_sale_payment.js b/addons/website_sale/static/src/js/website_sale_payment.js
index 05b731e8b1a..77835e10b06 100644
--- a/addons/website_sale/static/src/js/website_sale_payment.js
+++ b/addons/website_sale/static/src/js/website_sale_payment.js
@@ -18,7 +18,7 @@ const websiteSalePaymentMixin = {
     },
 
     prepareInputs() {
-        this.$checkbox = $(document.getElementById('checkbox_tc'));
+        this.$checkbox = $(document.getElementById('website_sale_tc_checkbox'));
         this.$submitButton = $(document.querySelector('[name="o_payment_submit_button"]'));
         this._adaptConfirmButton();
     },
@@ -93,7 +93,7 @@ publicWidget.registry.WebsiteSalePayment = publicWidget.Widget.extend(
     Object.assign({}, websiteSalePaymentMixin, {
         selector: 'div[name="o_website_sale_free_cart"]',
         events: {
-            'change #checkbox_tc': '_onClickTCCheckbox',
+            'change #website_sale_tc_checkbox': '_onClickTCCheckbox',
         },
 
         // #=== WIDGET LIFECYCLE ===#
diff --git a/addons/website_sale/static/src/js/website_sale_tracking.js b/addons/website_sale/static/src/js/website_sale_tracking.js
index 9421e7b86b6..6f0e489b19b 100644
--- a/addons/website_sale/static/src/js/website_sale_tracking.js
+++ b/addons/website_sale/static/src/js/website_sale_tracking.js
@@ -6,8 +6,8 @@ publicWidget.registry.websiteSaleTracking = publicWidget.Widget.extend({
     selector: '.oe_website_sale',
     events: {
         'click form[action="/shop/cart/update"] a.a-submit': '_onAddProductIntoCart',
-        'click a[href="/shop/checkout"]': '_onCheckoutStart',
-        'click div.oe_cart a[href^="/web?redirect"][href$="/shop/checkout"]': '_onCustomerSignin',
+        'click a[href^="/shop/checkout"]': '_onCheckoutStart',
+        'click a[href^="/web/login?redirect"][href*="/shop/checkout"]': '_onCustomerSignin',
         'click form[action="/shop/confirm_order"] a.a-submit': '_onOrder',
         'click form[target="_self"] button[type=submit]': '_onOrderPayment',
         'view_item_event': '_onViewItem',
diff --git a/addons/website_sale/static/src/js/website_sale_utils.js b/addons/website_sale/static/src/js/website_sale_utils.js
index 8710cfd8547..cedd23e00b8 100644
--- a/addons/website_sale/static/src/js/website_sale_utils.js
+++ b/addons/website_sale/static/src/js/website_sale_utils.js
@@ -107,7 +107,7 @@ function updateCartNavBar(data) {
         });
 
     $(".js_cart_lines").first().before(data['website_sale.cart_lines']).end().remove();
-    $(".js_cart_summary").replaceWith(data['website_sale.short_cart_summary']);
+    $("#cart_total").replaceWith(data['website_sale.total']);
 }
 
 function showCartNotification(callService, props, options = {}) {
diff --git a/addons/website_sale/static/src/scss/primary_variables.scss b/addons/website_sale/static/src/scss/primary_variables.scss
index c19ec9aabda..f9df685542a 100644
--- a/addons/website_sale/static/src/scss/primary_variables.scss
+++ b/addons/website_sale/static/src/scss/primary_variables.scss
@@ -1 +1,5 @@
 $o-wsale-products-layout-grid-ratio: 1.0 !default;
+
+$o-wsale-dropdown-width-overflow: 8em !default;
+
+$o-wsale-input-max-width: 32em !default;
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index cb753a8febc..f4daebd0ad3 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -116,21 +116,8 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
     .address-inline address {
         display: inline-block;
     }
-    table#cart_products tr td, table#suggested_products tr td {
-        vertical-align: middle;
-    }
 
-    table#cart_products {
-        margin-bottom: 0;
-
-        td, th {
-            &:first-child {
-                padding-left: $grid-gutter-width*0.5;
-            }
-        }
-    }
-
-    h1[itemprop="name"], .td-product_name {
+    h1[itemprop="name"] {
         word-break: break-word;
         word-wrap: break-word;
         overflow-wrap: break-word;
@@ -141,15 +128,9 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         font-weight: $font-weight-bold;
     }
 
-    @include media-breakpoint-down(md) {
-        .td-img {
-            display: none;
-        }
-    }
-
     .toggle_summary_div {
         @include media-breakpoint-up(xl) {
-            max-width: 400px;
+            max-width: $o-wsale-input-max-width;
         }
     }
     input.js_quantity {
@@ -195,13 +176,15 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         }
     }
     .o_pricelist_dropdown, .o_sortby_dropdown {
-        min-width: fit-content;
+        //truncates the dropdown pricelist > 8rem
+        .o_pricelist_dropdown_span {
+            max-width: $o-wsale-dropdown-width-overflow;
+        }
     }
 }
 
-#product_detail ~ .oe_structure.oe_empty > section:first-child,
-.o_shop_discussion_rating {
-    border-top: 1px solid $border-color;
+#product_detail ~ .oe_structure.oe_empty > section:first-child {
+    border-top: $border-width solid $border-color;
 }
 
 .o_alternative_product {
@@ -266,7 +249,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 
 // ==== THE GRID
 #products_grid {
-    .o_wsale_products_grid_table_wrapper .table {
+    .o_wsale_products_grid_table_wrapper .table:not(.o_wsale_modal_table) {
         table-layout: fixed;
 
         td {
@@ -363,9 +346,6 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
 }
 
 .oe_cart {
-    table td:first-child {
-        min-width: 76px;
-    }
 
     > .oe_structure {
         clear: both;
@@ -383,87 +363,6 @@ div#payment_method {
     }
 }
 
-ul.wizard {
-    padding: 0;
-    margin-top: 20px;
-    list-style: none outside none;
-    border-radius: 4px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065);
-
-    li {
-        border: 1px solid map-get($grays, '200');
-        border-right-width: 0;
-        position: relative;
-        float: left;
-        padding: 0 10px 0 20px;
-        margin: 0;
-        line-height: 38px;
-        background: #fbfbfb;
-
-        .chevron {
-            position: absolute;
-            top: 0;
-            right: -10px;
-            z-index: 1;
-            display: block;
-            border: 20px solid transparent;
-            border-right: 0;
-            border-left: 10px solid map-get($grays, '200');
-        }
-
-        .chevron:before {
-            position: absolute;
-            top: -20px;
-            right: 1px;
-            display: block;
-            border: 20px solid transparent;
-            border-right: 0;
-            border-left: 10px solid #fbfbfb;
-            content: "";
-        }
-
-        .o_link_disable {
-            text-decoration: none;
-            color: inherit;
-            cursor: text;
-        }
-
-        &.text-success {
-            background: #f3f4f5;
-        }
-
-        &.text-success .chevron:before {
-            border-left: 10px solid #f5f5f5;
-        }
-
-        &.text-primary {
-            background: #f1f6fc;
-        }
-
-        &.text-primary .chevron:before {
-            border-left: 10px solid #f1f6fc;
-        }
-
-        &:first-child {
-            padding-left: 15px;
-            border-radius: 4px 0 0 4px;
-        }
-
-        &:last-child {
-            border-radius: 0 4px 4px 0;
-            border-right-width: 1px;
-
-            .chevron {
-                display: none;
-            }
-        }
-    }
-}
-
-tr#empty {
-    display: none;
-}
-
 .js_change_shipping, .js_change_billing {
     cursor: pointer;
 }
@@ -764,3 +663,99 @@ a.no-decoration {
 .o_product_tag_img {
     height: 2rem;
 }
+
+.o_wsale_share_menu {
+    min-width: 3em;
+}
+
+#cart_total {
+    @include media-breakpoint-down(lg) {
+        border-top: $border-width solid $border-color;
+        padding-top: map-get($spacers, 3);
+    }
+}
+
+.o_website_sale_checkout {
+    .o_total_border {
+        border: $border-width solid $border-color;
+
+        @include media-breakpoint-down(lg) {
+            border: 0;
+        }
+    }
+
+    .o_wsale_accordion {
+        .collapse:not(.show) {
+            display: block;
+
+            @include media-breakpoint-down(lg) {
+                display: none;
+            }
+        }
+
+        .o_wsale_scrollable_table {
+            @include media-breakpoint-up(lg) {
+                overflow-y: scroll;
+                height: 21rem;
+            }
+        }
+    }
+
+
+    span[itemprop='name'] {
+        font-size: $h6-font-size;
+        font-weight: $headings-font-weight;
+        line-height: $headings-line-height;
+    }
+
+    div[itemprop="address"] {
+        margin: map-get($spacers, 2) 0;
+        font-size: $font-size-sm;
+    }
+
+
+    .o_wsale_address_fill {
+        .col-form-label:not(.label-optional)::after {
+            content: " *";
+            font-weight: normal;
+        }
+    }
+
+    .all_shipping, .all_billing {
+        @include media-breakpoint-down(md) {
+            overflow-x: auto;
+
+            > div {
+                width: auto;
+            }
+        }
+
+        .o_wsale_add_address {
+            min-height: 8rem;
+        }
+    }
+
+    div[name="o_express_checkout_container"] {
+        margin-bottom: -#{map-get($spacers, 3)};
+        margin-top: map-get($spacers, 3);
+    }
+
+    button[name="o_payment_submit_button"] {
+        margin-left: 0 !important;
+    }
+
+    // We can't technically duplicate navigations CTA therefore we use
+    // an absolute positioning to move the CTA from the summary to the
+    // bottom of the page.
+    @include media-breakpoint-down(lg){
+        .o_cta_navigation_container {
+            padding: 0 calc(var(--gutter-x) * .5);
+        }
+    }
+
+
+    // TODO: This height is arbitrary and the calculation should be improved.
+    .o_cta_navigation_placeholder {
+        height: o-to-rem(111px) + map-get($spacers, 4) + 2rem;
+    }
+}
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index 37af18f55bb..5bc9975deda 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -1,144 +1,6 @@
 //## Website Sale frontent design
 //## ----------------------------
 
-// Theming variables
-$o-wsale-wizard-thickness: 0.125rem;
-$o-wsale-wizard-dot-size: 0.625rem;
-$o-wsale-wizard-dot-active-glow: 0.25rem;
-
-$o-wsale-wizard-color-inner: white;
-$o-wsale-wizard-color-default: map-get($grays, '200');
-
-$o-wsale-wizard-dot-active: map-get($theme-colors, 'primary');
-$o-wsale-wizard-dot-completed: map-get($theme-colors, 'success');
-
-$o-wsale-wizard-label-default: $text-muted;
-$o-wsale-wizard-label-active: $body-color;
-$o-wsale-wizard-label-completed: $success;
-
-.progress-wizard {
-    // Scoped variables
-    $tmp-dot-radius: ($o-wsale-wizard-dot-size + $o-wsale-wizard-thickness)*0.5;
-    $tmp-check-size: max($font-size-base, $o-wsale-wizard-dot-size + $o-wsale-wizard-thickness + $o-wsale-wizard-dot-active-glow*2);
-    $tmp-check-pos: $o-wsale-wizard-dot-size*0.5 - $tmp-check-size*0.5;
-
-    margin-top: $grid-gutter-width*0.5;
-    padding: 0 $grid-gutter-width*0.5;
-
-    @include media-breakpoint-up(md) {
-        padding: 0;
-    }
-
-    .col {
-        @include media-breakpoint-down(md) {
-            flex: none;
-        }
-    }
-
-    .progress-wizard-step {
-        position: relative;
-
-        @include media-breakpoint-up(md) {
-            margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
-        }
-        @include media-breakpoint-down(md) {
-            &.disabled, &.complete {
-                display:none;
-            }
-        }
-        .progress-wizard-dot {
-            width: $o-wsale-wizard-dot-size;
-            height: $o-wsale-wizard-dot-size;
-            position: relative;
-            display: inline-block;
-            background-color: $o-wsale-wizard-color-inner;
-            border-radius: 50%;
-            box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
-
-            @include media-breakpoint-up(md) {
-                @include o-position-absolute($left: 50%);
-                margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5);
-            }
-        }
-
-        .progress-wizard-steplabel {
-            color: $o-wsale-wizard-label-default;
-            margin: 5px 0 5px 5px;
-            @include font-size($font-size-base);
-            display: inline-block;
-
-            @include media-breakpoint-up(md) {
-                display: block;
-                margin: (0.625rem + $tmp-dot-radius) 0 20px 0;
-            }
-            @include media-breakpoint-down(md) {
-                margin-left: -15px;
-                font-size: 24px;
-            }
-        }
-
-        .progress-wizard-bar {
-            height: $o-wsale-wizard-thickness;
-            background-color: $o-wsale-wizard-color-default;
-        }
-
-        &.active {
-            .progress-wizard-dot {
-                animation: fadeIn 1s ease 0s 1 normal none running;
-                background: $o-wsale-wizard-dot-active;
-                box-shadow: 0 0 0 ($o-wsale-wizard-dot-active-glow - 0.0625rem) $o-wsale-wizard-color-inner,
-                            0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5);
-            }
-
-            .progress-wizard-steplabel {
-                color: $o-wsale-wizard-label-active;
-                font-weight: bolder;
-            }
-        }
-
-        &.complete {
-            .progress-wizard-dot {
-                background: none;
-                box-shadow: none;
-
-                &:after {
-                    @include o-position-absolute($tmp-check-pos, $left: $tmp-check-pos);
-                    width: $tmp-check-size;
-                    height: $tmp-check-size;
-                    border-radius: 100%;
-
-                    background: $o-wsale-wizard-color-inner;
-                    color: $o-wsale-wizard-dot-completed;
-                    text-align: center;
-                    line-height: 1;
-                    @include font-size($tmp-check-size);
-                    font-family: FontAwesome;
-
-                    content: "\f058";
-                }
-            }
-
-            .progress-wizard-steplabel {
-                color: $o-wsale-wizard-label-completed;
-            }
-
-            &:hover:not(.disabled) {
-                .progress-wizard-dot:after {
-                    color: $o-wsale-wizard-label-completed;
-                }
-
-                .progress-wizard-steplabel {
-                    color: $o-wsale-wizard-label-active;
-                }
-            }
-        }
-
-        &.disabled {
-            cursor: default;
-        }
-    }
-}
-
 .o_wsale_image_viewer {
     z-index: -1;
 
diff --git a/addons/website_sale/static/tests/tours/website_sale_add_to_cart_snippet_tour.js b/addons/website_sale/static/tests/tours/website_sale_add_to_cart_snippet_tour.js
index 64ecc750744..e4036430925 100644
--- a/addons/website_sale/static/tests/tours/website_sale_add_to_cart_snippet_tour.js
+++ b/addons/website_sale/static/tests/tours/website_sale_add_to_cart_snippet_tour.js
@@ -44,7 +44,7 @@ wTourUtils.registerWebsitePreviewTour('add_to_cart_snippet_tour', {
         ...wTourUtils.selectElementInWeSelectWidget('action_picker_opt', 'Buy Now'),
         ...wTourUtils.clickOnSave(),
         wTourUtils.clickOnElement('add to cart button', 'iframe .s_add_to_cart_btn'),
-        wTourUtils.assertPathName('/shop/payment', 'iframe h3:contains("Pay with")'),
+        wTourUtils.assertPathName('/shop/payment', 'iframe a[href="/shop/cart"]'),
 
         wsTourUtils.goToCart({quantity: 4, backend: true}),
         wsTourUtils.assertCartContains({productName: 'Acoustic Bloc Screens', backend: true}),
diff --git a/addons/website_sale/static/tests/tours/website_sale_buy.js b/addons/website_sale/static/tests/tours/website_sale_buy.js
index 8c38216f49d..cba35a4b445 100644
--- a/addons/website_sale/static/tests/tours/website_sale_buy.js
+++ b/addons/website_sale/static/tests/tours/website_sale_buy.js
@@ -31,30 +31,25 @@ registry.category("web_tour.tours").add('shop_buy_product', {
             tourUtils.goToCart(),
         {
             content: "add suggested",
-            extra_trigger: '#wrap:not(:has(#cart_products:contains("Storage Box")))',
-            trigger: '.oe_cart:has(tr:contains("Storage Box")) a:contains("Add to Cart")',
+            trigger: '.js_cart_lines:has(a:contains("Storage Box")) a:contains("Add to cart")',
         },
         {
             content: "add one more",
-            extra_trigger: '#cart_products tr:contains("Storage Box")',
-            trigger: '#cart_products tr:contains("Steel") a.js_add_cart_json:eq(1)',
+            extra_trigger: '#cart_products div>a>h6:contains("Storage Box")',
+            trigger: '#cart_products div:has(div>a>h6:contains("Steel")) a.js_add_cart_json:eq(1)',
         },
         {
             content: "remove Storage Box",
-            extra_trigger: '#cart_products tr:contains("Steel") input.js_quantity:propValue(2)',
-            trigger: '#cart_products tr:contains("Storage Box") a.js_add_cart_json:first',
+            extra_trigger: '#cart_products div:has(div>a>h6:contains("Steel")) input.js_quantity:propValue(2)',
+            trigger: '#cart_products div:has(div>a>h6:contains("Storage Box")) a.js_add_cart_json:first',
         },
         {
             content: "set one",
-            extra_trigger: '#wrap:not(:has(#cart_products tr:contains("Storage Box")))',
+            extra_trigger: '#wrap:not(:has(#cart_products div>a>h6:contains("Storage Box")))',
             trigger: '#cart_products input.js_quantity',
             run: 'text 1',
         },
-        {
-            content: "go to checkout",
-            extra_trigger: '#cart_products input.js_quantity:propValue(1)',
-            trigger: 'a[href*="/shop/checkout"]',
-        },
+        tourUtils.goToCheckout(),
         ...tourUtils.payWithTransfer(true),
     ]
 });
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
index 42cd6347d20..37196999585 100644
--- a/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow.js
@@ -30,7 +30,7 @@
         tourUtils.goToCart({quantity: 2}),
     {
         content: "Check for 2 products in cart and proceed to checkout",
-        extra_trigger: '#cart_products tr:contains("Storage Box Test") input.js_quantity:propValue(2)',
+        extra_trigger: '#cart_products div:has(a>h6:contains("Storage Box Test")) input.js_quantity:propValue(2)',
         trigger: 'a[href*="/shop/checkout"]',
     },
     ...tourUtils.assertCartAmounts({
@@ -57,12 +57,12 @@
     },
     {
         content: "Click on next button",
-        trigger: '.oe_cart .btn:contains("Next")',
+        trigger: '.oe_cart .btn:contains("Continue checkout")',
     },
     {
         content: "Fulfill shipping address form",
         trigger: 'select[name="country_id"]',
-        extra_trigger: 'h2:contains("Shipping Address")',
+        extra_trigger: 'h3:contains("My details")',
         run: function () {
             $('input[name="name"]').val('def');
             $('input[name="phone"]').val('8888888888');
@@ -74,7 +74,7 @@
     },
     {
         content: "Click on next button",
-        trigger: '.oe_cart .btn:contains("Next")',
+        trigger: '.oe_cart .btn:contains("Save address")',
     },
     {
         content: "Check selected billing address is same as typed in previous step",
@@ -97,7 +97,7 @@
     {
         content: "Change billing address form",
         trigger: 'select[name="country_id"]',
-        extra_trigger: 'h2:contains("Your Address")',
+        extra_trigger: 'h3:contains("Your address")',
         run: function () {
             $('input[name="name"]').val('abcd');
             $('input[name="phone"]').val('11111111');
@@ -107,7 +107,7 @@
     },
     {
         content: "Click on next button",
-        trigger: '.oe_cart .btn:contains("Next")',
+        trigger: '.oe_cart .btn:contains("Save address")',
     },
     {
         content: "Confirm Address",
@@ -216,7 +216,7 @@
         tourUtils.goToCart({quantity: 2}),
     {
         content: "Check for 2 products in cart and proceed to checkout",
-        extra_trigger: '#cart_products tr:contains("Storage Box Test") input.js_quantity:propValue(2)',
+        extra_trigger: '#cart_products div:has(a>h6:contains("Storage Box Test")) input.js_quantity:propValue(2)',
         trigger: 'a[href*="/shop/checkout"]',
     },
     ...tourUtils.assertCartAmounts({
@@ -239,7 +239,7 @@
     },
     {
         content: "Add new shipping address",
-        trigger: '.all_shipping .one_kanban form[action^="/shop/address"] .btn',
+        trigger: '.all_shipping .one_kanban form[action^="/shop/address"] a:contains("Add address")',
     },
     {
         content: "Fulfill shipping address form",
@@ -255,7 +255,7 @@
     },
     {
         content: "Click on next button",
-        trigger: '.oe_cart .btn:contains("Next")',
+        trigger: '.oe_cart .btn:contains("Save address")',
     },
     {
         content: "Select `Wire Transfer` payment method",
@@ -312,7 +312,7 @@
         steps: () => [
     {
         content: "Open Dropdown for logout",
-        extra_trigger: '.progress-wizard-step:contains("Extra Info")',
+        extra_trigger: '.o_wizard:contains("Extra Info")',
         trigger: '#top_menu li.dropdown:visible a:contains("Mitchell Admin")',
     },
     {
@@ -342,13 +342,10 @@
         trigger: '#add_to_cart',
     },
         tourUtils.goToCart(),
+        tourUtils.goToCheckout(),
     {
-        content: "Proceed to checkout",
-        trigger: 'a[href*="/shop/checkout"]',
-    },
-    {
-        content: "Click on next button",
-        trigger: '.oe_cart .btn:contains("Next")',
+        content: "Click on 'Continue checkout' button",
+        trigger: '.oe_cart .btn:contains("Continue checkout")',
     },
     {
         content: "Check selected billing address is same as typed in previous step",
@@ -360,15 +357,7 @@
         trigger: '#shipping_and_billing:contains(SO2New Shipping Street, 5):contains(SO2NewShipping):contains(Afghanistan)',
         run: function () {}, // it's a check
     },
-    {
-        content: "Select `Wire Transfer` payment method",
-        trigger: 'input[name="o_payment_radio"][data-payment-method-code="wire_transfer"]',
-    },
-    {
-        content: "Pay Now",
-        extra_trigger: 'input[name="o_payment_radio"][data-payment-method-code="wire_transfer"]:checked',
-        trigger: 'button[name="o_payment_submit_button"]:visible',
-    },
+    ...tourUtils.payWithTransfer(),
     {
         content: "Check payment status confirmation window",
         trigger: ".oe_website_sale_tx_status[data-order-tracking-info]",
diff --git a/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js b/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
index 66693a24e71..a34f1cc3491 100644
--- a/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
+++ b/addons/website_sale/static/tests/tours/website_sale_complete_flow_backend.js
@@ -14,7 +14,7 @@ wTourUtils.registerWebsitePreviewTour('website_sale_tour_backend', {
         {
             content: "Enable Extra step",
             extra_trigger: '#oe_snippets .o_we_customize_panel',
-            trigger: '[data-customize-website-views="website_sale.extra_info_option"] we-checkbox',
+            trigger: '[data-customize-website-views="website_sale.extra_info"] we-checkbox',
         },
         ...wTourUtils.clickOnSave(),
     ],
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js b/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
index 8aecc6d6b65..71e15cf2b16 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
@@ -15,7 +15,7 @@ registry.category("web_tour.tours").add('shop_cart_recovery', {
         tourUtils.goToCart(),
     {
         content: "check product is in cart, get cart id, logout, go to login",
-        trigger: 'td.td-product_name:contains("Acoustic Bloc Screens")',
+        trigger: 'div:has(a>h6:contains("Acoustic Bloc Screens"))',
         run: function () {
             var orderId = $('.my_cart_quantity').data('order-id');
             browser.localStorage.setItem(orderIdKey, orderId);
@@ -71,7 +71,7 @@ registry.category("web_tour.tours").add('shop_cart_recovery', {
     },
     {
         content: "check product is in restored cart",
-        trigger: 'td.td-product_name:contains("Acoustic Bloc Screens")',
+        trigger: 'div>a>h6:contains("Acoustic Bloc Screens")',
         run: function () {},
     },
 ]});
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
index 34196d0d677..e75d246354c 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_customize.js
@@ -119,7 +119,7 @@ wTourUtils.registerWebsitePreviewTour('shop_customize', {
         tourUtils.goToCart({backend: true}),
         {
             content: "click on shop",
-            trigger: "iframe a:contains(Continue Shopping)",
+            trigger: "iframe a:contains(Continue shopping)",
             extra_trigger: 'iframe body:not(:has(#products_grid_before .js_attributes))',
         },
         ...wTourUtils.clickOnEditAndWaitEditMode(),
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_dynamic_variants.js b/addons/website_sale/static/tests/tours/website_sale_shop_dynamic_variants.js
index db0814df04a..df748e70734 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_dynamic_variants.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_dynamic_variants.js
@@ -29,7 +29,7 @@ registry.category("web_tour.tours").add('tour_shop_dynamic_variants', {
         tourUtils.goToCart(),
     {
         content: "check the variant is in the cart",
-        trigger: 'td.td-product_name:contains(Dynamic Product (Dynamic Value 2))',
+        trigger: 'div>a>h6:contains(Dynamic Product (Dynamic Value 2))',
         isCheck: true,
     },
 ]});
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_mail.js b/addons/website_sale/static/tests/tours/website_sale_shop_mail.js
index d0586ee02a7..ba9f648b815 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_mail.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_mail.js
@@ -42,7 +42,7 @@ registry.category("web_tour.tours").add('shop_mail', {
         tourUtils.goToCart(),
     {
         content: "check product is in cart, get cart id, go to backend",
-        trigger: 'td.td-product_name:contains("Acoustic Bloc Screens")',
+        trigger: 'div:has(a>h6:contains("Acoustic Bloc Screens"))',
         run: function () {
             var orderId = $('.my_cart_quantity').data('order-id');
             window.location.href = "/web#action=sale.action_orders&view_type=form&id=" + orderId;
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_multi_checkbox.js b/addons/website_sale/static/tests/tours/website_sale_shop_multi_checkbox.js
index a124324e2af..872e1c4e660 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_multi_checkbox.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_multi_checkbox.js
@@ -15,7 +15,7 @@ registry.category("web_tour.tours").add('tour_shop_multi_checkbox', {
     {
         content: "check price",
         trigger: '.oe_currency_value:contains("750")',
-        run: function () {},
+        isCheck: true,
     },
     {
         content: 'click on the first option to select it',
@@ -32,7 +32,7 @@ registry.category("web_tour.tours").add('tour_shop_multi_checkbox', {
     {
         content: "check add to cart not possible",
         trigger: '#add_to_cart.disabled',
-        run: function () {},
+        isCheck: true,
     },
     {
         content: 'click on the third option to unselect it',
@@ -45,7 +45,7 @@ registry.category("web_tour.tours").add('tour_shop_multi_checkbox', {
     {
         content: "check price of options is correct",
         trigger: '.oe_currency_value:contains("753")',
-        run: function () {},
+        isCheck: true,
     },
     {
         content: "add to cart",
@@ -54,7 +54,7 @@ registry.category("web_tour.tours").add('tour_shop_multi_checkbox', {
         tourUtils.goToCart(),
     {
         content: "check price is correct",
-        trigger: '.td-product_name:contains("Options: Option 1, Option 2")',
-        run: function () {},
+        trigger: '#cart_products div div.text-muted>span:contains("Options: Option 1, Option 2")',
+        isCheck: true,
     },
 ]});
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_no_variant_attribute.js b/addons/website_sale/static/tests/tours/website_sale_shop_no_variant_attribute.js
index 7e66b839e55..caec3251250 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_no_variant_attribute.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_no_variant_attribute.js
@@ -24,13 +24,13 @@ registry.category("web_tour.tours").add('tour_shop_no_variant_attribute', {
         tourUtils.goToCart(),
     {
         content: "check no_variant value is present",
-        trigger: '.td-product_name:contains(No Variant Attribute: No Variant Value)',
+        trigger: 'div>span:contains(No Variant Attribute: No Variant Value)',
         extra_trigger: '#cart_products',
         run: function () {},
     },
     {
         content: "check price is correct",
-        trigger: '.td-price:contains(11.0)',
+        trigger: 'div[name="website_sale_cart_line_price"]:contains(11.0)',
         run: function () {},
     },
 ]});
diff --git a/addons/website_sale/tests/test_sale_process.py b/addons/website_sale/tests/test_sale_process.py
index 212dfd0dbda..7b42e6ada92 100644
--- a/addons/website_sale/tests/test_sale_process.py
+++ b/addons/website_sale/tests/test_sale_process.py
@@ -95,10 +95,12 @@ class TestUi(HttpCaseWithUserDemo):
         if self.env['ir.module.module']._get('payment_custom').state != 'installed':
             self.skipTest("Transfer provider is not installed")
 
-        self.env.ref('payment.payment_provider_transfer').write({
+        transfer_provider = self.env.ref('payment.payment_provider_transfer')
+        transfer_provider.write({
             'state': 'enabled',
             'is_published': True,
         })
+        transfer_provider._transfer_ensure_pending_msg_is_set()
         tax_group = self.env['account.tax.group'].create({'name': 'Tax 15%'})
         tax = self.env['account.tax'].create({
             'name': 'Tax 15%',
diff --git a/addons/website_sale/tests/test_website_sale_add_to_cart_snippet.py b/addons/website_sale/tests/test_website_sale_add_to_cart_snippet.py
index 05f982a54d5..4944ca2f420 100644
--- a/addons/website_sale/tests/test_website_sale_add_to_cart_snippet.py
+++ b/addons/website_sale/tests/test_website_sale_add_to_cart_snippet.py
@@ -30,7 +30,7 @@ class TestAddToCartSnippet(HttpCase):
             'redirect_form_view_id': redirect_form.id,
         })
 
-    def test_configure_product(self):
+    def _test_configure_product(self):
         # Reset the company country id, which ensure that no country dependant fields are blocking the address form.
         self.env.company.country_id = self.env.ref('base.us')
         self.start_tour("/", 'add_to_cart_snippet_tour', login="admin")
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index da626613507..81facfe8b0b 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -301,9 +301,9 @@
             </we-row>
         </div>
         <!-- Checkout page  -->
-        <div data-selector="main:has(.oe_website_sale .wizard)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="Checkout Pages">
-            <we-checkbox string="Extra Step Option"
-                         data-customize-website-views="website_sale.extra_info_option"
+        <div data-selector="main:has(.oe_website_sale .o_wizard)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="Checkout Pages">
+            <we-checkbox string="Extra Step"
+                         data-customize-website-views="website_sale.extra_info"
                          data-no-preview="true"
                          data-reload="/"/>
             <we-checkbox string="Suggested Accessories"
@@ -315,7 +315,7 @@
                          data-no-preview="true"
                          data-reload="/"/>
             <we-checkbox string="Accept Terms &amp; Conditions"
-                         data-customize-website-views="website_sale.payment_sale_note"
+                         data-customize-website-views="website_sale.accept_terms_and_conditions"
                          data-no-preview="true"
                          data-reload="/"/>
             <we-checkbox string="Show b2b Fields"
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 314c8789f96..b78e84a94d9 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1355,139 +1355,92 @@
     </template>
 
     <template id="wizard_checkout" name="Wizard Checkout">
-        <t t-set="website_sale_order" t-value="website.sale_get_order()"/>
-
-        <div class="row">
-            <div class="col-xl">
-                <div class="wizard container">
-                    <div class="progress-wizard row g-0">
-                        <a class="no-decoration col" t-att-href="step&gt;=10 and '/shop/cart' or '#'">
-                          <div id="wizard-step10" t-att-class="'progress-wizard-step %s' % (step == 10 and 'active' or step&gt;10 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar d-none d-md-block"/>
-                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
-                            <div class="text-center progress-wizard-steplabel">Review Order</div>
-                          </div>
-                        </a>
-                        <a class="no-decoration col" t-att-href="step&gt;=20 and '/shop/checkout' or '#'">
-                          <div id="wizard-step20" t-att-class="'progress-wizard-step %s' % (step == 20 and 'active' or step&gt;20 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar d-none d-md-block"/>
-                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
-                            <div class="text-center progress-wizard-steplabel">Address</div>
-                          </div>
-                        </a>
-                        <a class="no-decoration col" t-att-href="step&gt;=40 and '/shop/payment' or '#'">
-                          <div id="wizard-step40" t-att-class="'progress-wizard-step %s' % (step == 40 and 'active' or step&gt;40 and 'complete' or 'disabled')">
-                            <div class="progress-wizard-bar d-none d-md-block"/>
-                            <span class="progress-wizard-dot d-none d-md-inline-block"></span>
-                            <div class="text-center progress-wizard-steplabel">Confirm Order</div>
-                          </div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template id="extra_info" name="Checkout Extra Info">
-        <t t-call="website.layout">
-            <t t-set="no_footer" t-value="1"/>
-            <div id="wrap">
-                <div class="container oe_website_sale py-2">
-                    <div class="row">
-                        <div class="col-12">
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="30"/>
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
-                            <t t-call="website_sale.cart_summary">
-                                <t t-set="redirect" t-valuef="/shop/extra_info"/>
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl order-xl-1 oe_cart">
-                            <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
-                                <div class="container">
-                                    <form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required s_website_form_no_recaptcha" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
-                                        <div class="s_website_form_rows row s_col_no_bgcolor">
-                                            <div class="mb-0 py-2 col-12 s_website_form_field" data-type="char" data-name="Field">
-                                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale1">
-                                                        <span class="s_website_form_label_content">Your Reference</span>
-                                                    </label>
-                                                    <div class="col-sm">
-                                                        <input id="sale1" type="text" class="form-control s_website_form_input" name="client_order_ref"/>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="text" data-name="Field">
-                                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale2">
-                                                        <span class="s_website_form_label_content">Give us your feedback</span>
-                                                    </label>
-                                                    <div class="col-sm">
-                                                        <textarea id="sale2" class="form-control s_website_form_input" name="Give us your feedback" />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
-                                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale3">
-                                                        <span class="s_website_form_label_content">Upload a document</span>
-                                                    </label>
-                                                    <div class="col-sm">
-                                                        <input id="sale3" type="file" class="form-control s_website_form_input" name="a_document" />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="mb-0 py-2 col-12 s_website_form_submit s_website_form_no_submit_options">
-                                                <div style="width: 200px;" class="s_website_form_label"/>
-                                                <a role="button" href="/shop/checkout" class="btn btn-secondary float-start"><span class="oi oi-chevron-left"/> Previous</a>
-                                                <a role="button" class="btn btn-primary float-end s_website_form_send" href="/shop/confirm_order">Next <span class="oi oi-chevron-right" /></a>
-                                                <span id="s_website_form_result"></span>
-                                            </div>
-                                        </div>
-                                    </form>
-                                </div>
-                            </section>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="oe_structure" id="oe_structure_website_sale_extra_info_1"/>
+        <t t-call="website.step_wizard">
+            <t t-set="wizard_step" t-value="website._get_checkout_steps()"/>
         </t>
     </template>
 
-    <template id="extra_info_option" name="Extra Step Option" inherit_id="wizard_checkout" active="False">
-        <xpath expr="//div[@id='wizard-step20']/parent::a" position="after">
-            <a class="no-decoration col" t-att-href="step&gt;=30 and '/shop/extra_info' or '#'">
-                <div id="wizard-step30" t-att-class="'progress-wizard-step %s' % (step == 30 and 'active' or step&gt;30 and 'complete' or 'disabled')">
-                    <div class="progress-wizard-bar d-none d-md-block"/>
-                    <span class="progress-wizard-dot d-none d-md-inline-block"></span>
-                    <div class="text-center progress-wizard-steplabel">Extra Info</div>
+    <!-- /shop/extra_info route -->
+    <template id="extra_info" name="Checkout Extra Info" active="False">
+        <t t-call="website_sale.checkout_layout">
+            <t t-set="show_navigation_button" t-value="False"/>
+            <t t-set="redirect" t-valuef="/shop/extra_info"/>
+            <t t-set="oe_structure">
+                <!-- This is the drag-and-drop area for website building blocs at the end of each
+                     checkout page. This is append at the of the page in `checkout_layout`. The
+                     templates created in the database to store blocs are hooked using XPath on the
+                     `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
+                     t-att-id) and each template needs to define a div element. -->
+                <div class="oe_structure" id="oe_structure_website_sale_extra_info_1"/>
+            </t>
+
+            <h3 class="mb-4">Extra info</h3>
+            <section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
+                <div class="container">
+                    <form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required s_website_form_no_recaptcha" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
+                        <div class="s_website_form_rows s_col_no_bgcolor row">
+                            <div class="s_website_form_field col-12 py-2 mb-0" data-type="char" data-name="Field">
+                                <div class="s_col_no_resize s_col_no_bgcolor row">
+                                    <label class="s_website_form_label col-form-label col-sm-auto" style="width: 200px" for="sale1">
+                                        <span class="s_website_form_label_content">Your Reference</span>
+                                    </label>
+                                    <div class="col-sm">
+                                        <input id="sale1" type="text" class="s_website_form_input form-control" name="client_order_ref"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="s_website_form_field s_website_form_custom col-12 py-2 mb-0" data-type="text" data-name="Field">
+                                <div class="s_col_no_resize s_col_no_bgcolor row">
+                                    <label class="s_website_form_label col-form-label col-sm-auto" style="width: 200px" for="sale2">
+                                        <span class="s_website_form_label_content">Give us your feedback</span>
+                                    </label>
+                                    <div class="col-sm">
+                                        <textarea id="sale2" class="s_website_form_input form-control" name="Give us your feedback" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="s_website_form_field s_website_form_custom col-12 py-2 mb-0" data-type="binary" data-name="Field">
+                                <div class="s_col_no_resize s_col_no_bgcolor row">
+                                    <label class="s_website_form_label col-form-label col-sm-auto" style="width: 200px" for="sale3">
+                                        <span class="s_website_form_label_content">Upload a document</span>
+                                    </label>
+                                    <div class="col-sm">
+                                        <input id="sale3" type="file" class="s_website_form_input form-control" name="a_document" />
+                                    </div>
+                                </div>
+                            </div>
+                            <t t-call="website_sale.navigation_buttons">
+                                <t t-set="_form_send_navigation" t-value="True"/>
+                                <t t-set="_cta_classes" t-valuef="s_website_form_send"/>
+                            </t>
+                        </div>
+                    </form>
                 </div>
-            </a>
-        </xpath>
+            </section>
+        </t>
     </template>
 
-    <!-- We use this template where we want to give the user a link to the product of a sale order line. -->
+    <!-- Encapsulate the content in a `a` tag with a link to the product page. Override this
+         template to change or remove the product link. Called in `website_sale.cart_lines`. -->
     <template id="cart_line_product_link" name="Shopping Cart Line Product Link">
         <a t-att-href="line.product_id.website_url">
             <t t-out="0"/>
         </a>
     </template>
 
-    <!-- This template displays all the lines following the first one on the description of the sale order line, with a muted style. For typical products this content will be the product description_sale. -->
+    <!-- This template displays all the lines following the first one on the description of the sale
+         order line, with a muted style. For typical products this content will be the product
+         description_sale. Called in `website_sale.cart_lines`. -->
     <template id="cart_line_description_following_lines" name="Shopping Cart Line Description Following Lines">
         <t t-set="description_lines" t-value="line.get_description_following_lines()"/>
         <div t-if="description_lines" t-attf-class="text-muted {{div_class}} small">
             <t t-foreach="description_lines" t-as="name_line">
-                <span t-esc="name_line"/>
-                <br t-if="not name_line_last"/>
+                <span t-if="name_line" class="d-block" t-out="name_line"/>
             </t>
         </div>
     </template>
 
-    <!-- This template is the one at the "Review order" step (the first one) on the checkout workflow. -->
+    <!-- Lines that show items in the cart. Called in `website_sale.cart`. -->
     <template id="cart_lines" name="Shopping Cart Lines">
         <div t-if="not website_sale_order or not website_sale_order.website_order_line" class="js_cart_lines alert alert-info">
             Your cart is empty!
@@ -1497,231 +1450,224 @@
                 <strong>Warning!</strong> <t t-esc='website_sale_order._get_shop_warning()'/>
             </div>
         </t>
-        <table t-if="website_sale_order and website_sale_order.website_order_line" class="mb16 table table-striped table-sm js_cart_lines" id="cart_products">
+        <div id="cart_products"
+             t-if="website_sale_order and website_sale_order.website_order_line"
+             class="js_cart_lines d-flex flex-column mb32">
             <t t-set="show_qty" t-value="is_view_active('website_sale.product_quantity')"/>
-            <thead>
-                <tr>
-                    <th class="td-img">Product</th>
-                    <th></th>
-                    <th class="text-center td-qty">
-                        <t t-if="show_qty">
-                            Quantity
+            <div t-foreach="website_sale_order.website_order_line"
+                 t-as="line"
+                 t-attf-class="o_cart_product d-flex align-items-stretch gap-3 #{line.linked_line_id and 'optional_product info'} #{not line_last and 'border-bottom pb-4'} #{line_index &gt; 0 and 'pt-4'}"
+                 t-attf-data-product-id="#{line.product_id and line.product_id.id}">
+                <t t-if="line.product_id">
+                    <img t-if="line._is_not_sellable_line() and line.product_id.image_128"
+                         t-att-src="image_data_uri(line.product_id.image_128)"
+                         class="o_image_64_max  img rounded"
+                         t-att-alt="line.name_short"/>
+                    <div t-else=""
+                         t-field="line.product_id.image_128"
+                         t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'o_image_64_max rounded'}"/>
+                    <div class="flex-grow-1">
+                        <t t-call="website_sale.cart_line_product_link">
+                            <h6 t-field="line.name_short" class="d-inline align-top h6 fw-bold"/>
                         </t>
-                    </th>
-                    <th class="text-center td-price">Price</th>
-                    <th class="text-center td-action"></th>
-                </tr>
-            </thead>
-            <tbody>
-                <t t-foreach="website_sale_order.website_order_line" t-as="line">
-                    <tr t-att-class="'optional_product info' if line.linked_line_id else None">
-                        <td t-if="not line.product_id" colspan="2" class='td-img'/>
-                        <t t-else="">
-                            <td align="center" class='td-img'>
-                                <span t-if="line._is_not_sellable_line() and line.product_id.image_128">
-                                    <img t-att-src="image_data_uri(line.product_id.image_128)"
-                                        class="img o_image_64_max rounded"
-                                        t-att-alt="line.name_short"/>
-                                </span>
-                                <span t-else=""
-                                    t-field="line.product_id.image_128"
-                                    t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'rounded o_image_64_max'}"
-                                />
-                            </td>
-                            <td class="td-product_name" name="cart_line_description">
-                                <div name="cart_line_description_short">
-                                    <t t-call="website_sale.cart_line_product_link">
-                                        <strong t-field="line.name_short" />
-                                    </t>
-                                </div>
-                                <t t-call="website_sale.cart_line_description_following_lines">
-                                    <t t-set="div_class" t-value="'d-none d-md-block'"/>
-                                </t>
-                            </td>
+                        <t t-call="website_sale.cart_line_description_following_lines">
+                            <t t-set="div_class" t-valuef="d-none d-md-block"/>
                         </t>
-                        <td class="text-center td-qty">
-                            <div class="css_quantity input-group mx-auto justify-content-center">
-                                <t t-if="not line._is_not_sellable_line()">
-                                    <t t-if="show_qty">
-                                        <a t-attf-href="#" class="btn btn-link js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
-                                            <i class="fa fa-minus"></i>
-                                        </a>
-                                        <input type="text" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
-                                        <t t-if="line._get_shop_warning(clear=False)">
-                                            <a t-attf-href="#" class="btn btn-link">
-                                            <i class='fa fa-warning text-warning' t-att-title="line._get_shop_warning()" role="img" aria-label="Warning"/>
-                                            </a>
-                                        </t>
-                                        <a t-else='' t-attf-href="#" class="btn btn-link 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>
+                        <div>
+                            <a href='#'
+                               class="js_delete_product d-none d-md-inline-block small"
+                               aria-label="Remove from cart"
+                               title="Remove from cart">Remove</a>
+                            <button class="js_delete_product btn btn-light d-inline-block d-md-none"
+                                    title="remove">
+                                <i class="fa fa-trash-o"/>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column align-items-end">
+                        <div t-attf-class="css_quantity input-group mb-2"
+                             name="website_sale_cart_line_quantity">
+                            <t t-if="not line._is_not_sellable_line()">
+                                <t t-if="show_qty">
+                                    <a href="#"
+                                       class="js_add_cart_json btn btn-link d-inline-block border-end-0"
+                                       aria-label="Remove one"
+                                       title="Remove one">
+                                        <i class="position-relative z-index-1 fa fa-minus"/>
+                                    </a>
+                                    <input type="text"
+                                           class="js_quantity quantity form-control border-start-0 border-end-0"
+                                           t-att-data-line-id="line.id"
+                                           t-att-data-product-id="line.product_id.id"
+                                           t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty"/>
+                                    <t t-if="line._get_shop_warning(clear=False)">
+                                        <a href="#" class="btn btn-link">
+                                        <i class='fa fa-warning text-warning'
+                                           t-att-title="line._get_shop_warning()"
+                                           role="img"
+                                           aria-label="Warning"/>
                                         </a>
                                     </t>
-                                    <t t-else="">
-                                        <input type="hidden" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty" />
-                                    </t>
+                                    <a t-else=""
+                                       href="#"
+                                       class="js_add_cart_json d-inline-block float_left btn btn-link border-start-0"
+                                       aria-label="Add one"
+                                       title="Add one">
+                                        <i class="fa fa-plus position-relative z-index-1"/>
+                                    </a>
                                 </t>
                                 <t t-else="">
-                                    <span class="text-muted w-100" t-esc="int(line.product_uom_qty)"/>
-                                    <input type="hidden" class="js_quantity form-control quantity" t-att-data-line-id="line.id" t-att-data-product-id="line.product_id.id" t-att-value="line.product_uom_qty" />
+                                    <input type="hidden"
+                                           class="js_quantity form-control quantity"
+                                           t-att-data-line-id="line.id"
+                                           t-att-data-product-id="line.product_id.id"
+                                           t-att-value="int(line.product_uom_qty) == line.product_uom_qty and int(line.product_uom_qty) or line.product_uom_qty"/>
                                 </t>
-                            </div>
-                        </td>
-                        <td class="text-center td-price" name="price">
-                            <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
-                                  t-field="line.price_reduce_taxexcl" style="white-space: nowrap;"
-                                  t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
-                            <span t-else=""
-                                  t-field="line.price_reduce_taxinc" style="white-space: nowrap;"
-                                  t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
+                            </t>
+                            <t t-else="">
+                                <span class="w-100 text-muted" t-esc="int(line.product_uom_qty)"/>
+                                <input type="hidden"
+                                       class="js_quantity quantity form-control"
+                                       t-att-data-line-id="line.id"
+                                       t-att-data-product-id="line.product_id.id"
+                                       t-att-value="line.product_uom_qty"/>
+                            </t>
+                        </div>
+                        <div class="mb-0 h6 fw-bold text-end" name="website_sale_cart_line_price">
                             <t t-if="line.discount">
                                 <del t-attf-class="#{'text-danger mr8'}"
                                      style="white-space: nowrap;"
-                                     t-esc="line.price_unit"
-                                     t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
+                                     t-out="line.price_unit * line.product_uom_qty"
+                                     t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                             </t>
+                            <t t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
+                               t-set='product_price'
+                               t-value='line.price_subtotal'/>
+                            <t t-else=""
+                               t-set='product_price'
+                               t-value='line.price_total'/>
+                            <span t-out="product_price" style="white-space: nowrap;"
+                                  t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
                             <small t-if="not line._is_not_sellable_line() and line.product_id.base_unit_price"
-                                class="cart_product_base_unit_price d-block text-muted"
-                                groups="website_sale.group_show_uom_price">
+                                   class="cart_product_base_unit_price d-block text-muted"
+                                   groups="website_sale.group_show_uom_price">
                                 <t t-call='website_sale.base_unit_price'>
                                     <t t-set='product' t-value='line.product_id'/>
+                                    <t t-set='combination_info'
+                                       t-value="{'base_unit_price':product._get_base_unit_price(product_price)}"/>
                                 </t>
                             </small>
-                        </td>
-                        <td class="td-action">
-                            <a href='#' aria-label="Remove from cart" title="Remove from cart" class='js_delete_product no-decoration'> <small><i class='fa fa-trash-o'></i></small></a>
-                        </td>
-                    </tr>
-                </t>
-            </tbody>
-        </table>
-    </template>
-
-    <template id="cart" name="Shopping Cart">
-        <t t-call="website.layout">
-            <div id="wrap">
-                <div class="container oe_website_sale py-2">
-                    <div class="row">
-                        <div class="col-12">
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="10" />
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl-8 oe_cart">
-                            <div class="row">
-                                <div class="col-lg-12">
-                                    <div t-if="abandoned_proceed or access_token" class="mt8 mb8 alert alert-info" role="alert"> <!-- abandoned cart choices -->
-                                        <t t-if="abandoned_proceed">
-                                            <p>Your previous cart has already been completed.</p>
-                                            <p t-if="website_sale_order">Please proceed your current cart.</p>
-                                        </t>
-                                        <t t-if="access_token">
-                                            <p>This is your current cart.</p>
-                                            <p>
-                                                <strong>
-                                                    <a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a>
-                                                </strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.
-                                            </p>
-                                            <p>
-                                                <strong>
-                                                    <a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a>
-                                                </strong> if you want to merge your previous cart into current cart.
-                                            </p>
-                                        </t>
-                                    </div>
-                                    <t t-call="website_sale.cart_lines"/>
-                                    <div class="clearfix" />
-                                    <div class="d-xl-none mb-2" id="o_cart_summary">
-                                        <t t-call="website_sale.short_cart_summary"/>
-                                    </div>
-                                    <div class="d-flex justify-content-between">
-                                        <div>
-                                            <a role="button" href="/shop" class="btn btn-secondary mb32">
-                                                <span class="oi oi-chevron-left" />
-                                                <span>Continue<span class="d-none d-md-inline"> Shopping</span></span>
-                                            </a>
-                                        </div>
-                                        <t t-set="redirect_to_sign_in" t-value="website.account_on_checkout == 'mandatory' and website.is_public_user()"/>
-                                        <t t-set="redirect_url" t-value="'/web/login?redirect=/shop/checkout' if redirect_to_sign_in else '/shop/checkout?express=1'"/>
-                                        <div t-if="website_sale_order and website_sale_order.website_order_line"
-                                             id="process_checkout"
-                                             class="d-flex flex-column"
-                                             t-att-disabled="not website_sale_order._is_cart_ready()">
-                                            <a class="btn btn-primary float-end" role="button" t-attf-href="{{redirect_url}}">
-                                                <t t-if="redirect_to_sign_in">
-                                                    <span>Sign In</span>
-                                                    <span class="fa fa-sign-in"/>
-                                                </t>
-                                                <t t-else="">
-                                                    <span>Process Checkout</span>
-                                                    <span class="oi oi-chevron-right"/>
-                                                </t>
-                                            </a>
-                                            <t t-call="payment.express_checkout"/>
-                                        </div>
-                                    </div>
-                                    <div class="oe_structure" id="oe_structure_website_sale_cart_1"/>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="d-none d-xl-block col-xl-4" id="o_cart_summary">
-                            <t t-call="website_sale.short_cart_summary"/>
                         </div>
                     </div>
-                </div>
+                </t>
+            </div>
+        </div>
+    </template>
+
+    <!-- /shop/cart route -->
+    <template id="cart" name="Shopping Cart">
+        <t t-call="website_sale.checkout_layout">
+            <t t-set="show_shorter_cart_summary" t-value="True"/>
+            <t t-set="show_footer" t-value="True"/>
+            <t t-set="oe_structure">
+                <!-- This is the drag-and-drop area for website building blocs at the end of each
+                     checkout page. This is append at the of the page in `checkout_layout`. The
+                     templates created in the database to store blocs are hooked using XPath on the
+                     `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
+                     t-att-id) and each template needs to define a div element. -->
                 <div class="oe_structure" id="oe_structure_website_sale_cart_2"/>
+            </t>
+
+            <div class="col">
+                <h3 class="mb-4">Order overview</h3>
+                <div t-if="abandoned_proceed or access_token" class="alert alert-info mt8 mb8" role="alert"> <!-- abandoned cart choices -->
+                    <t t-if="abandoned_proceed">
+                        <p>Your previous cart has already been completed.</p>
+                        <p t-if="website_sale_order">Please proceed your current cart.</p>
+                    </t>
+                    <t t-if="access_token">
+                        <p>This is your current cart.</p>
+                        <p>
+                            <strong>
+                                <a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=squash">Click here</a>
+                            </strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.
+                        </p>
+                        <p>
+                            <strong>
+                                <a t-attf-href="/shop/cart/?access_token=#{access_token}&amp;revive=merge">Click here</a>
+                            </strong> if you want to merge your previous cart into current cart.
+                        </p>
+                    </t>
+                </div>
+                <t t-call="website_sale.cart_lines"/>
+                <div class="clearfix" />
+                <div class="oe_structure" id="oe_structure_website_sale_cart_1"/>
             </div>
         </t>
     </template>
 
+    <!-- Deactivatable through the website editor. -->
     <template id="suggested_products_list" inherit_id="website_sale.cart_lines" name="Accessory Products in my cart">
-        <xpath expr="//table[@id='cart_products']" position="after">
-            <h5 class='text-muted js_cart_lines' t-if="suggested_products">Suggested Accessories:</h5>
-            <table t-if="suggested_products" id="suggested_products" class="js_cart_lines table table-striped table-sm">
-                <tbody>
-                    <tr t-foreach="suggested_products" t-as="product" t-att-data-publish="product.website_published and 'on' or 'off'">
-                        <t t-set="combination_info" t-value="product._get_combination_info_variant()"/>
-                        <td class='td-img text-center'>
+        <xpath expr="//div[@id='cart_products']" position="inside">
+            <h5 t-attf-class="mt32 mb-3" t-if="suggested_products">Suggested accessories</h5>
+            <div t-if="suggested_products"
+                 id="suggested_products"
+                 class="d-flex flex-column align-items-stretch mb32">
+                <div t-foreach="suggested_products"
+                     t-as="product"
+                     t-attf-class="d-flex gap-3 #{not product_last and 'border-bottom pb-4'} #{product_index &gt; 0 and 'pt-4'}"
+                     t-att-data-publish="product.website_published and 'on' or 'off'">
+                    <div>
+                        <a t-att-href="product.website_url">
+                            <span t-field="product.image_128" t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'o_image_64_max rounded'}"/>
+                        </a>
+                    </div>
+                    <div class="o_cart_suggested_product_name flex-grow-1">
+                        <div>
                             <a t-att-href="product.website_url">
-                                <span t-field="product.image_128" t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'rounded o_image_64_max'}" />
+                                <strong t-out="product.with_context(display_default_code=False).display_name"/>
                             </a>
-                        </td>
-                        <td class='td-product_name'>
-                            <div>
-                                <a t-att-href="product.website_url">
-                                    <strong t-esc="combination_info['display_name']" />
-                                </a>
-                            </div>
-                            <div class="text-muted d-none d-md-block" t-field="product.description_sale" />
-                        </td>
-                        <td class='td-price'>
+                        </div>
+                        <div class="d-none d-md-block text-muted" t-field="product.description_sale"/>
+                    </div>
+                    <div class="d-flex flex-column align-items-end">
+                        <input class="js_quantity" name="product_id" t-att-data-product-id="product.id" type="hidden"/>
+                        <a t-if="product._website_show_quick_add()"
+                           role="button"
+                           class="js_add_suggested_products btn btn-md btn-outline-primary text-nowrap">
+                            <span class="d-md-none fa fa-shopping-cart"/>
+                            <span class="d-none d-md-inline">Add to cart</span>
+                        </a>
+                        <div class="mb-0 h-6 fw-bold text-end d-flex"
+                             name="website_sale_suggested_product_price">
+                            <t t-set="combination_info"
+                               t-value="product._get_combination_info_variant()"/>
                             <del t-attf-class="text-danger mr8 {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
-                                 style="white-space: nowrap;"
-                                 t-out="combination_info['list_price']"
-                                 t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-                            <span t-out="combination_info['price']"
-                                  style="white-space: nowrap;"
-                                  t-options="{'widget': 'monetary','display_currency': website.currency_id}"/>
-                        </td>
-                        <td class="w-25 text-center">
-                            <input class="js_quantity" name="product_id" t-att-data-product-id="product.id" type="hidden" />
-                            <a t-if="product._website_show_quick_add()"
-                               role="button" class="btn btn-link js_add_suggested_products">
-                                <strong>Add to Cart</strong>
-                            </a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+                                 t-esc="combination_info['list_price']"
+                                 t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
+                                 style="white-space: nowrap;"/>
+                            <span t-esc="combination_info['price']"
+                                  t-options="{'widget': 'monetary','display_currency': website.currency_id}"
+                                  style="white-space: nowrap;"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </xpath>
     </template>
 
+    <!-- Called in `website_sale.reduction_code`. -->
     <template id='coupon_form' name='Coupon form'>
-        <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
+        <!-- Checkout context:
+            - redirect: The route to redirect to when a customer enters a coupon; default: `None`.
+            - website_sale_order: The current order.
+        -->
+        <form t-attf-action="/shop/pricelist#{redirect and '?r=' + redirect or ''}"
             method="post" name="coupon_code">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
-            <div class="input-group w-100">
-                <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
-                <a href="#" role="button" class="btn btn-secondary a-submit">Apply</a>
+            <div class="input-group w-100 my-2">
+                <input name="promo" class="form-control" type="text" placeholder="Discount code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
+                <a href="#" role="button" class="btn btn-secondary a-submit ps-2">Apply</a>
             </div>
         </form>
         <t t-if="request.params.get('code_not_available')" name="code_not_available">
@@ -1729,99 +1675,125 @@
         </t>
     </template>
 
-    <template id="checkout">
-        <t t-call="website.layout">
-            <t t-set="additional_title">Shop - Checkout</t>
-            <t t-set="no_footer" t-value="1"/>
-            <div id="wrap">
-                <div class="container oe_website_sale py-2">
-                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_invoice_id or only_services)" />
-                    <div class="row">
-                        <div class="col-12">
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="20" />
+    <!-- Called in `website_sale.checkout_layout`. -->
+    <template id="navigation_buttons" name="Navigation buttons">
+        <!-- Layout customization parameters:
+            - _cta_classes: CSS classes to append on the primary navigation button; default `None`.
+            - _form_send_navigation: Whether the primary button serves as a submit button for a
+                                     form; default `None`.
+        -->
+        <!-- Checkout context:
+            - website_sale_order: The current order.
+            - xmlid: The id of the xml templated rendered by the controller.
+        -->
+        <t t-set="step_specific_values" t-value="website._get_checkout_steps(xmlid)"/>
+        <div t-attf-class="#{_container_classes} d-flex #{_form_send_navigation and 'flex-column flex-lg-row align-items-lg-center' or 'flex-column'} pt-4">
+            <t t-if="website_sale_order and website_sale_order.website_order_line">
+                <t t-if="xmlid == 'website_sale.payment'">
+                    <div t-if="not website_sale_order.amount_total"
+                         name="o_website_sale_free_cart">
+                        <form name="o_wsale_confirm_order"
+                              class="d-flex flex-column"
+                              target="_self"
+                              action="/shop/payment/validate"
+                              method="post">
+                            <input type="hidden"
+                                   name="csrf_token"
+                                   t-att-value="request.csrf_token()"
+                                   t-nocache="The csrf token must always be up to date."/>
+                            <t t-call="payment.submit_button">
+                                <t t-set="submit_button_label">Confirm Order</t>
                             </t>
-                        </div>
-                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
-                            <t t-call="website_sale.cart_summary">
-                                <t t-set="redirect" t-valuef="/shop/checkout"/>
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl order-xl-1 oe_cart">
-                            <div class="row">
-                                <div class="col-lg-12">
-                                    <h3 class="o_page_header mt8">Billing Address</h3>
-                                </div>
-                            </div>
-                            <t t-call="website_sale.row_addresses">
-                                <t t-set="order" t-value="order"/>
-                                <t t-set="is_invoice" t-value="1"/>
-                                <t t-set="addresses" t-value="billings"/>
-                            </t>
-                            <t t-if="not only_services" groups="account.group_delivery_invoice_address">
-                                <div class="row">
-                                    <div class="col-lg-12">
-                                        <h3 class="o_page_header mt16 mb4">Shipping Address</h3>
-                                    </div>
-                                </div>
-                                <t t-call="website_sale.row_addresses">
-                                    <t t-set="order" t-value="order"/>
-                                    <t t-set="is_invoice" t-value="0"/>
-                                    <t t-set="addresses" t-value="shippings"/>
-                                </t>
-                            </t>
-                            <div class="d-flex justify-content-between mt-3">
-                                <a role="button" href="/shop/cart" class="btn btn-secondary mb32">
-                                    <i class="oi oi-chevron-left"/>
-                                    <span>Return to Cart</span>
-                                </a>
-                                <a role="button" href="/shop/confirm_order" class="btn btn-primary mb32">
-                                    <span>Confirm</span>
-                                    <i class="oi oi-chevron-right"/>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </t>
-    </template>
-    <template id="row_addresses">
-        <div t-attf-class="row {{'all_billing' if is_invoice else 'all_shipping'}}">
-            <div class="col-lg-12">
-                <div class="row mt8">
-                    <div class="col-md-12 col-lg-12 one_kanban">
-                        <form action="/shop/address" method="post" class="">
-                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
-                            <t t-if="is_invoice">
-                                <input type="hidden" name="is_invoice" t-att-value="is_invoice" />
-                                <input type="hidden" name="callback" value="/shop/checkout" />
-                            </t>
-                            <a role="button" href="#" class="a-submit btn btn-secondary mb-2 btn-block">
-                                <i class="fa fa-plus-square"/>
-                                <span>Add an address</span>
-                            </a>
                         </form>
                     </div>
-                    <div t-foreach="addresses" t-as="addr"
-                         class="col-md-12 col-lg-6 one_kanban mb-2">
-                        <t t-call="website_sale.address_kanban">
-                            <t t-set="is_invoice" t-value="is_invoice"/>
-                            <t t-set="contact" t-value="addr"/>
-                            <t t-set="order" t-value="order"/>
-                            <t t-if="not is_invoice" t-set="selected" t-value="order.partner_shipping_id==addr or len(addresses)==1"/>
-                            <t t-if="is_invoice" t-set="selected" t-value="order.partner_invoice_id==addr or len(addresses)==1"/>
-                            <t t-set="readonly" t-value="bool(len(addresses)==1)"/>
-                            <t t-set="allow_edit"
-                                t-value="(website.is_public_user() or order.partner_id.id == addr.id or (addr.id in order.partner_id.commercial_partner_id.child_ids.ids))
-                                    and is_invoice or addr.type=='delivery'"
-                            />
-                        </t>
+                    <t t-else="" t-call="payment.submit_button"/>
+                </t>
+                <t t-else="">
+                    <a role="button"
+                        t-attf-class="#{_cta_classes} btn btn-primary #{_form_send_navigation and 'order-lg-3 w-100 w-lg-auto ms-lg-auto' or 'w-100'}"
+                        t-att-href="step_specific_values['main_button_href']">
+                        <t t-out="step_specific_values['main_button']"/>
+                        <i class="fa fa-angle-right ms-2 fw-light"/>
+                    </a>
+                </t>
+            </t>
+            <div t-attf-class="position-relative #{_form_send_navigation and 'd-flex d-lg-none' or 'd-flex'} w-100 justify-content-center align-items-center my-2 opacity-75">
+                <hr class="w-100"/>
+                <span class="px-3">or</span>
+                <hr class="w-100"/>
+            </div>
+            <a t-att-href="step_specific_values['back_button_href']" class="text-center">
+                <i class="fa fa-angle-left me-2 fw-light"/>
+                <t t-out="step_specific_values['back_button']"/>
+            </a>
+        </div>
+    </template>
+
+    <!-- /shop/checkout route -->
+    <template id="checkout">
+        <t t-call="website_sale.checkout_layout">
+            <t t-set="additional_title">Shop - Checkout</t>
+            <t t-set="redirect" t-valuef="/shop/checkout"/>
+            <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_invoice_id or only_services)" />
+            <div class="row">
+                <div class="col-lg-12">
+                    <h3 class="mb-4">Address</h3>
+                    <h4>Billing</h4>
+                </div>
+            </div>
+            <t t-call="website_sale.row_addresses">
+                <t t-set="order" t-value="order"/>
+                <t t-set="is_invoice" t-value="1"/>
+                <t t-set="addresses" t-value="billings"/>
+            </t>
+            <t t-if="not only_services" groups="account.group_delivery_invoice_address">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <h4>Shipping</h4>
                     </div>
                 </div>
+                <t t-call="website_sale.row_addresses">
+                    <t t-set="order" t-value="order"/>
+                    <t t-set="is_invoice" t-value="0"/>
+                    <t t-set="addresses" t-value="shippings"/>
+                </t>
+            </t>
+        </t>
+    </template>
+
+    <template id="row_addresses">
+        <div t-attf-class="{{'all_billing' if is_invoice else 'all_shipping'}} row row-cols-md-2 row-cols-lg-3 g-3 flex-nowrap flex-md-wrap mb32">
+            <div t-foreach="addresses" t-as="addr"
+                    class="one_kanban col-md">
+                <t t-call="website_sale.address_kanban">
+                    <t t-set="is_invoice" t-value="is_invoice"/>
+                    <t t-set="contact" t-value="addr"/>
+                    <t t-set="order" t-value="order"/>
+                    <t t-if="not is_invoice" t-set="selected" t-value="order.partner_shipping_id==addr or len(addresses)==1"/>
+                    <t t-if="is_invoice" t-set="selected" t-value="order.partner_invoice_id==addr or len(addresses)==1"/>
+                    <t t-set="readonly" t-value="bool(len(addresses)==1)"/>
+                    <t t-set="allow_edit"
+                       t-value="(website.is_public_user() or order.partner_id.id == addr.id or (addr.id in order.partner_id.commercial_partner_id.child_ids.ids))
+                            and is_invoice or addr.type=='delivery'"
+                    />
+                </t>
+            </div>
+            <div class="one_kanban col-md">
+                <form action="/shop/address" method="post" class="h-100">
+                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
+                    <t t-if="is_invoice">
+                        <input type="hidden" name="is_invoice" t-att-value="is_invoice" />
+                        <input type="hidden" name="callback" value="/shop/checkout" />
+                    </t>
+                    <a role="button" href="#" class="o_wsale_add_address a-submit d-flex align-items-center justify-content-center h-100 px-4 border rounded mx-auto no-decoration">
+                        <i class="fa fa-plus me-md-2"/><span class="d-none d-md-inline">Add address</span>
+                    </a>
+                </form>
             </div>
         </div>
     </template>
+
+    <!-- Card view of addresses. Called in `website_sale.checkout`. -->
     <template id="address_kanban" name="Kanban address">
             <form action="/shop/checkout" method="POST" class="d-none">
                 <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
@@ -1832,65 +1804,40 @@
                 </t>
                 <input type="submit"/>
             </form>
-            <div t-attf-class="card #{selected and 'border border-primary' or is_invoice and 'js_change_billing' or 'js_change_shipping'}">
-                <div class="card-body" style="min-height: 130px;">
-                    <a t-if="allow_edit" href="#" class="btn btn-link float-end p-0 js_edit_address no-decoration" role="button" title="Edit this address" aria-label="Edit this address"><i class='fa fa-edit'/></a>
+            <div t-attf-class="card position-relative h-100 #{selected and 'bg-primary border border-primary' or is_invoice and 'js_change_billing' or 'js_change_shipping'}">
+                <div class='card-body d-flex flex-column align-items-start'>
                     <t t-esc="contact" t-options="dict(widget='contact', fields=['name', 'address'], no_marker=True)"/>
-                </div>
-                <div class="card-footer" t-if="not readonly">
-                    <span class="btn-addr" t-att-style="'' if selected else 'display:none;'">
-                        <a role="button" href="#" class="btn btn-block btn-primary">
-                            <i class="fa fa-check"/>
-                            <t t-if="is_invoice">
-                                Bill to this address
-                            </t>
-                            <t t-else="">
-                                Ship to this address
-                            </t>
-                        </a>
-                    </span>
-                    <span class="btn-addr" t-att-style="'' if not selected else 'display:none;'">
-                        <a role="button" href="#" class="btn btn-block btn-secondary">
-                            Select this address
-                        </a>
-                    </span>
+                    <a t-if="allow_edit" href="#" class="js_edit_address btn btn-link p-0 mt-auto" role="button" title="Edit this address" aria-label="Edit this address"><i class="fa fa-pencil me-1"/>Edit</a>
                 </div>
             </div>
     </template>
 
+    <!-- /shop/address route -->
     <template id="address" name="Address Management">
         <t t-set="no_footer" t-value="1"/>
         <t t-call="website.layout">
             <div id="wrap">
-                <div class="container oe_website_sale py-2">
+                <div class="oe_website_sale o_wsale_address_fill container py-2">
                     <div class="row">
                         <div class="col-12">
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="20" />
-                            </t>
+                            <t t-call="website_sale.wizard_checkout"/>
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-12 col-xl-auto order-xl-2 d-none d-xl-block">
-                            <t t-call="website_sale.cart_summary">
-                                <t t-set="hide_promotions">True</t>
-                                <t t-set="redirect" t-valuef="/shop/address"/>
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl order-xl-1 oe_cart">
+                        <div class="oe_cart col-12 col-lg-8">
                             <div>
                                 <t t-if="mode == ('new', 'billing') and is_public_user">
-                                    <h2 class="o_page_header mt8">
+                                    <h3 class="mb-3">
                                         <span t-if="account_on_checkout != 'mandatory'">Fill in your address</span>
                                         <small class="text-muted" t-if="account_on_checkout == 'optional'"> or </small>
                                         <a t-if="account_on_checkout != 'disabled'" role="button" href='/web/login?redirect=/shop/checkout'  style="margin-top: -11px"> Sign in</a>
-                                    </h2>
+                                    </h3>
                                 </t>
                                 <t t-elif="mode == ('edit', 'billing') or mode[1] == 'billing' and not is_public_user">
-                                    <h2 class="o_page_header mt8">Your Address</h2>
+                                    <h3 class="mb-3">Your address</h3>
                                 </t>
                                 <t t-if="mode[1] == 'shipping'">
-                                    <h2 class="o_page_header mt8">Shipping Address </h2>
+                                    <h3 class="mb-3">My details</h3>
                                 </t>
                                 <t t-if="partner_id == website_sale_order.partner_shipping_id.id == website_sale_order.partner_invoice_id.id">
                                     <div class="alert alert-warning" role="alert" t-if="not only_services">
@@ -1906,16 +1853,16 @@
                                 </t>
                                 <form t-if="account_on_checkout != 'mandatory' or not is_public_user" action="/shop/address" method="post" class="checkout_autoformat">
                                     <div class="row">
-                                        <div t-attf-class="mb-3 #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name">
-                                            <label class="col-form-label" for="name">Name</label>
+                                        <div t-attf-class="#{error.get('name') and 'o_has_error'} div_name col-lg-12 mb-2">
+                                            <label class="col-form-label" for="name">Full name</label>
                                             <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="'name' in checkout and checkout['name']" />
                                         </div>
                                         <div class="w-100"/>
-                                        <div t-attf-class="mb-3 #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email">
+                                        <div t-attf-class="#{error.get('email') and 'o_has_error'} col-lg-6 mb-2" id="div_email">
                                             <label t-attf-class="col-form-label #{mode[1] == 'shipping' and 'label-optional' or ''}" for="email">Email</label>
                                             <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="'email' in checkout and checkout['email']" />
                                         </div>
-                                        <div t-attf-class="mb-3 #{error.get('phone') and 'o_has_error' or ''} col-lg-6" id="div_phone">
+                                        <div t-attf-class="#{error.get('phone') and 'o_has_error'} col-lg-6 mb-2" id="div_phone">
                                             <label class="col-form-label" for="phone">Phone</label>
                                             <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="'phone' in checkout and checkout['phone']" />
                                         </div>
@@ -1926,12 +1873,12 @@
                                                 or mode == ('edit', 'billing') and partner_id == website_sale_order.partner_id.id)
                                                 and (can_edit_vat or 'vat' in checkout and checkout['vat'])"
                                             >
-                                                <div t-attf-class="mb-3 #{error.get('company_name') and 'o_has_error' or ''} col-lg-6 mb-0">
+                                                <div t-attf-class="#{error.get('company_name') and 'o_has_error'} col-lg-6 mb-2">
                                                     <label class="col-form-label fw-normal label-optional" for="company_name">Company Name</label>
                                                     <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'commercial_company_name' in checkout and checkout['commercial_company_name'] or 'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if vat_warning else None" />
                                                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
                                                 </div>
-                                                <div t-attf-class="mb-3 #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat mb-0">
+                                                <div t-attf-class="#{error.get('vat') and 'o_has_error'} div_vat col-lg-6 mb-2">
                                                     <label class="col-form-label fw-normal label-optional" for="vat">TIN / VAT </label>
                                                     <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if vat_warning else None"/>
                                                     <small t-if="vat_warning" class="form-text text-muted d-block d-lg-none">Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
@@ -1941,35 +1888,34 @@
                                                 </div>
                                             </t>
                                         </t>
-                                        <div class="w-100"/>
-                                        <div t-attf-class="mb-3 #{error.get('street') and 'o_has_error' or ''} col-lg-12 div_street">
-                                            <label class="col-form-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label>
+                                        <div t-attf-class="#{error.get('street') and 'o_has_error'} div_street col-lg-12 mb-2">
+                                            <label class="col-form-label" for="street">Street and Number</label>
                                             <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="'street' in checkout and checkout['street']" />
                                         </div>
-                                        <div t-attf-class="mb-3 #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2">
-                                            <label class="col-form-label label-optional" for="street2">Street 2</label>
+                                        <div t-attf-class="mb-2 #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2">
+                                            <label class="col-form-label label-optional" for="street2">Apartment, suite, etc.</label>
                                             <input type="text" name="street2" t-attf-class="form-control #{error.get('street2') and 'is-invalid' or ''}" t-att-value="'street2' in checkout and checkout['street2']" />
                                         </div>
                                         <div class="w-100"/>
                                         <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/>
                                         <t t-if="'zip' in zip_city and zip_city.index('zip') &lt; zip_city.index('city')">
-                                            <div t-attf-class="mb-3 #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
+                                            <div t-attf-class="#{error.get('zip') and 'o_has_error'} div_zip col-md-4 mb-2">
                                                 <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                 <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                             </div>
                                         </t>
-                                        <div t-attf-class="mb-3 #{error.get('city') and 'o_has_error' or ''} col-md-8 div_city">
+                                        <div t-attf-class="#{error.get('city') and 'o_has_error' or ''} div_city col-md-8 mb-2">
                                             <label class="col-form-label" for="city">City</label>
                                             <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="'city' in checkout and checkout['city']" />
                                         </div>
                                         <t t-if="'zip' in zip_city and zip_city.index('zip') &gt; zip_city.index('city')">
-                                            <div t-attf-class="mb-3 #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip">
+                                            <div t-attf-class="#{error.get('zip') and 'o_has_error'} div_zip col-md-4 mb-2">
                                                 <label class="col-form-label label-optional" for="zip">Zip Code</label>
                                                 <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" />
                                             </div>
                                         </t>
                                         <div class="w-100"/>
-                                        <div t-attf-class="mb-3 #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country">
+                                        <div t-attf-class="#{error.get('country_id') and 'o_has_error'} div_country col-lg-6 mb-2">
                                             <label class="col-form-label" for="country_id">Country</label>
                                             <select id="country_id" name="country_id" t-attf-class="form-select #{error.get('country_id') and 'is-invalid' or ''}" t-att-mode="mode[1]">
                                                 <option value="">Country...</option>
@@ -1980,7 +1926,7 @@
                                                 </t>
                                             </select>
                                         </div>
-                                        <div t-attf-class="mb-3 #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'">
+                                        <div t-attf-class="#{error.get('state_id') and 'o_has_error'} div_state col-lg-6 mb-2" t-att-style="(not country or not country.state_ids) and 'display: none'">
                                             <label class="col-form-label" for="state_id">State / Province</label>
                                             <select name="state_id" t-attf-class="form-select #{error.get('state_id') and 'is-invalid' or ''}" data-init="1">
                                                 <option value="">State / Province...</option>
@@ -1994,11 +1940,11 @@
                                         <div class="w-100"/>
                                         <t t-if="mode == ('new', 'billing') and not only_services">
                                             <div class="col-lg-12">
-                                                <div class="checkbox">
+                                                <div class="form-check form-switch mt-2 mb-3">
                                                   <label>
-                                                    <input type="checkbox" id='shipping_use_same' class="mr8" name='use_same' value="1" t-att-checked='website.is_public_user()'/>Ship to the same address
+                                                    <input type="checkbox" id='shipping_use_same' class="form-check-input mr8" name='use_same' value="1" t-att-checked='website.is_public_user()'/>Ship to the same address
                                                     <t t-if='website.is_public_user()'>
-                                                        <span class='ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
+                                                        <span class='form-check-label ship_to_other text-muted' style="display: none">&amp;nbsp;(<i>Your shipping address will be requested later) </i></span>
                                                     </t>
                                                     </label>
                                                 </div>
@@ -2016,14 +1962,18 @@
                                     <!-- Example -->
                                     <input type="hidden" name="field_required" t-att-value="'phone,name'" />
 
-                                    <div class="d-flex justify-content-between">
-                                        <a role="button" t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-secondary mb32">
-                                            <i class="oi oi-chevron-left"/>
-                                            <span>Back</span>
+                                    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between mt32 mb32">
+                                        <a role="button" t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-outline-secondary w-100 w-md-auto order-md-1 order-3">
+                                            <i class="fw-light fa fa-angle-left me-2"/>Discard
                                         </a>
-                                        <a role="button" href="#" class="btn btn-primary mb32 a-submit a-submit-disable a-submit-loading">
-                                            <span>Next</span>
-                                            <i class="oi oi-chevron-right"/>
+                                        <div class="position-relative w-100 d-flex d-md-none justify-content-center align-items-center order-2 my-2 opacity-75">
+                                            <hr class="w-100"/>
+                                            <span class="px-3">or</span>
+                                            <hr class="w-100"/>
+                                        </div>
+                                        <a role="button" href="#" class="a-submit a-submit-disable a-submit-loading btn btn-primary w-100 w-md-auto order-1 order-md-3">
+                                            <t t-out="'Continue checkout' if mode == ('new', 'billing') else 'Save address'"/>
+                                            <i class="fw-light fa fa-angle-right ms-2"/>
                                         </a>
                                     </div>
                                 </form>
@@ -2035,12 +1985,14 @@
         </t>
     </template>
 
+    <!-- Deactivatable through the website editor. -->
     <template id="address_b2b" inherit_id="address" name="Show b2b fields" />
 
+    <!-- Called in `website_sale.payment`. -->
     <template id="address_on_payment" name="Address on payment">
         <div class="card">
             <div class="card-body" id="shipping_and_billing">
-                <a class="float-end no-decoration" href="/shop/checkout"><i class="fa fa-edit"/> Edit</a>
+                <a class="float-end no-decoration" href="/shop/checkout"><i class="fa fa-pencil me-1"/>Edit</a>
                 <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_invoice_id or only_services)" />
                 <div>
                     <b>Billing<t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b>
@@ -2054,299 +2006,317 @@
         </div>
     </template>
 
+    <!-- /shop/payment route -->
     <template id="payment" name="Payment">
-        <t t-call="website.layout">
+        <t t-call="website_sale.checkout_layout">
             <t t-set="additional_title">Shop - Select Payment Method</t>
-            <t t-set="no_footer" t-value="1"/>
+            <t t-set='redirect' t-valuef="/shop/payment"/>
+            <t t-set="oe_structure">
+                <!-- This is the drag-and-drop area for website building blocs at the end of each
+                     checkout page. This is append at the of the page in `checkout_layout`. The
+                     templates created in the database to store blocs are hooked using XPath on the
+                     `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
+                     t-att-id) and each template needs to define a div element. -->
+                <div class="oe_structure" id="oe_structure_website_sale_payment_2"/>
+            </t>
+            <div class="col-12" t-if="errors">
+                <t t-foreach="errors" t-as="error">
+                    <div class="alert alert-danger" t-if="error" role="alert">
+                        <h4>
+                            <t t-esc="error[0]" />
+                        </h4>
+                        <t t-esc="error[1]" />
+                    </div>
+                </t>
+            </div>
+            <h3 class="mb-4">Confirm order</h3>
+            <div id="address_on_payment" class="mb-4">
+                <t t-call="website_sale.address_on_payment"/>
+            </div>
+            <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_payment_1"/>
 
-            <div id="wrap">
-                <div class="container oe_website_sale py-2">
-                    <div class="row">
-                        <div class='col-12'>
-                            <t t-call="website_sale.wizard_checkout">
-                                <t t-set="step" t-value="40" />
-                            </t>
-                        </div>
-                        <div class="col-12" t-if="errors">
-                            <t t-foreach="errors" t-as="error">
-                                <div class="alert alert-danger" t-if="error" role="alert">
-                                    <h4>
-                                        <t t-esc="error[0]" />
-                                    </h4>
-                                    <t t-esc="error[1]" />
-                                </div>
-                            </t>
-                        </div>
-                        <div class="col-12 col-xl-auto order-xl-2">
-                            <t t-call="website_sale.cart_summary"/>
-                        </div>
-                        <div class="col-12 col-xl order-xl-1 oe_cart">
-                            <div id='address_on_payment'>
-                                <t t-call="website_sale.address_on_payment"/>
-                            </div>
-
-                            <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_payment_1"/>
-
-                            <t t-if="website_sale_order.amount_total">
-                                <div class="mt-3">
-                                    <h3 class="mb24">Pay with </h3>
-                                </div>
-                                <div t-if="payment_methods_sudo or tokens_sudo" id="payment_method">
-                                    <t t-call="payment.form"/>
-                                    <t t-call="website_sale.payment_footer"/>
-                                </div>
-                                <div t-else="" class="alert alert-warning">
-                                    <strong>No suitable payment option could be found.</strong><br/>
-                                    <div t-if="not request.env.is_admin()">
-                                        If you believe that it is an error, please contact the website administrator.
-                                    </div>
-                                    <div class="mt-2" groups="base.group_system">
-                                        <a t-if="request.env.company.country_id.is_stripe_supported_country"
-                                           t-attf-href="/web#action=#{action_activate_stripe_id}"
-                                           role="button"
-                                           class="btn btn-primary"
-                                           t-out="'ACTIVATE STRIPE'"
-                                        />
-                                        <div t-else=""
-                                             class="d-inline"
-                                             title="Stripe Connect is not available in your country, please use another payment provider."
-                                        >
-                                            <button t-out="'ACTIVATE STRIPE'" class="btn btn-primary" disabled="true"/>
-                                        </div>
-                                        <a role="button"
-                                           class="btn-link alert-warning ps-2"
-                                           t-attf-href="/web#action=#{payment_action_id}"
-                                        >
-                                            <strong><i class="oi oi-arrow-right"></i> View alternatives</strong>
-                                        </a>
-                                    </div>
-                                </div>
-                            </t>
-                            <div class="js_payment mt-3" t-if="not website_sale_order.amount_total" id="payment_method" name="o_website_sale_free_cart">
-                                <form name="o_wsale_confirm_order" target="_self" action="/shop/payment/validate" method="post">
-                                    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
-                                    <t t-call="website_sale.payment_footer">
-                                        <t t-set="submit_button_label">Confirm Order</t>
-                                    </t>
-                                </form>
-                            </div>
+            <t t-if="website_sale_order.amount_total">
+                <div class="mt-4">
+                    <h3>Pay with</h3>
+                </div>
+                <div t-if="payment_methods_sudo or tokens_sudo"
+                        id="payment_method"
+                        class="mt-4">
+                    <t t-call="payment.form"/>
+                </div>
+                <div t-else="" class="alert alert-warning">
+                    <strong>No suitable payment option could be found.</strong><br/>
+                    <div t-if="not request.env.is_admin()">
+                        If you believe that it is an error, please contact the website administrator.
+                    </div>
+                    <div class="mt-2" groups="base.group_system">
+                        <a t-if="request.env.company.country_id.is_stripe_supported_country"
+                            t-attf-href="/web#action=#{action_activate_stripe_id}"
+                            role="button"
+                            class="btn btn-primary"
+                            t-out="'ACTIVATE STRIPE'"
+                        />
+                        <div t-else=""
+                                class="d-inline"
+                                title="Stripe Connect is not available in your country, please use another payment provider."
+                        >
+                            <button t-out="'ACTIVATE STRIPE'" class="btn btn-primary" disabled="true"/>
                         </div>
+                        <a role="button"
+                            class="btn-link alert-warning ps-2"
+                            t-attf-href="/web#action=#{payment_action_id}"
+                        >
+                            <strong><i class="oi oi-arrow-right"></i> View alternatives</strong>
+                        </a>
                     </div>
                 </div>
-                <div class="oe_structure" id="oe_structure_website_sale_payment_2"/>
-            </div>
+            </t>
         </t>
     </template>
 
-    <template id="payment_footer" name="Payment">
-        <!-- Parameters description:
-            - submit_button_label: The label of the submit button; default: 'Pay Now'.
-        -->
-        <t t-set="submit_button_label" t-value="submit_button_label or 'Pay Now'"/>
-        <div name="o_checkbox_container" class="form-check mt-2 o_accept_tc_button"/>
-        <div class="float-start mt-2">
-            <a role="button" href="/shop/cart" class="btn btn-secondary">
-                <i class="oi oi-chevron-left"/> Return to Cart
-            </a>
-        </div>
-        <div class="float-end mt-2">
-            <t t-call="payment.submit_button"/>
-        </div>
-    </template>
-
-    <template id="payment_sale_note" inherit_id="payment_footer" name="Accept Terms &amp; Conditions" active="False">
-        <xpath expr="//div[@name='o_checkbox_container']" position="inside">
-            <input type="checkbox" id="checkbox_tc" class="form-check-input"/>
-            <label for="checkbox_tc" class="form-check-label">
-                I agree to the <a target="_BLANK" href="/terms">terms &amp; conditions</a>
-            </label>
+    <!-- Activatable through the website editor. -->
+    <template id="accept_terms_and_conditions"
+              inherit_id="navigation_buttons"
+              name="Accept Terms &amp; Conditions"
+              active="False">
+        <xpath expr="//div[@name='o_website_sale_free_cart']" position="before">
+            <div name="website_sale_terms_and_conditions_checkbox" class="form-check mb-2">
+                <input type="checkbox" id="website_sale_tc_checkbox" class="form-check-input"/>
+                <label for="website_sale_tc_checkbox" class="form-check-label">
+                    I agree to the <a target="_BLANK" href="/terms">terms &amp; conditions</a>
+                </label>
+            </div>
         </xpath>
     </template>
 
-    <template id="short_cart_summary" name="Short Cart right column">
-        <div class="card js_cart_summary" t-if="website_sale_order and website_sale_order.website_order_line" >
-            <div class="card-body">
-                <h4 class="d-none d-xl-block">Order Total</h4>
-                <hr class="d-none d-xl-block"/>
-                <div>
-                    <t t-call="website_sale.total">
-                        <t t-set="no_rowspan" t-value="1"/>
-                    </t>
-                    <t t-set="redirect_to_sign_in" t-value="website.account_on_checkout == 'mandatory' and website.is_public_user()"/>
-                    <t t-set="redirect_url" t-value="'/web/login?redirect=/shop/checkout' if redirect_to_sign_in else '/shop/checkout?express=1'"/>
-                    <a role="button"
-                       t-att-disabled="not website_sale_order._is_cart_ready()"
-                       class="btn btn-secondary float-end d-none d-xl-inline-block"
-                       id="process_checkout_cart_summary"
-                       t-attf-href="{{redirect_url}}">
-                        <t t-if="redirect_to_sign_in">
-                            <span>Sign In</span>
-                            <span class="fa fa-sign-in"/>
-                        </t>
-                        <t t-else="">
-                            <span>Proceed to Checkout</span>
-                            <span class="oi oi-chevron-right"/>
-                        </t>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <!-- This template is the one present on the right during the payment process.
-        Here it is important to not show too much information to the user, because we want him to pay!
-        We shouldn't display link to products or long descriptions.
-    -->
-    <template id="cart_summary" name="Cart right column">
-        <div class="card">
-            <div class="card-body p-xl-0">
-                <div class="toggle_summary d-xl-none">
-                    <b>Your order: </b> <span id="amount_total_summary" class="monetary_field" t-field="website_sale_order.amount_total" t-options='{"widget": "monetary", "display_currency": website_sale_order.currency_id}'/>
-                    <span class='oi oi-chevron-down fa-border float-end' role="img" aria-label="Details" title="Details"></span>
-                </div>
-                <div name="cart_summary_info" t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
-                    Your cart is empty!
-                </div>
-                <div class="toggle_summary_div d-none d-xl-block">
-                    <table class="table table-striped table-sm" id="cart_products" t-if="website_sale_order and website_sale_order.website_order_line">
-                        <thead>
-                            <tr>
-                                <th class="border-top-0 td-img">Product</th>
-                                <th class="border-top-0"></th>
-                                <th class="border-top-0 td-qty">Quantity</th>
-                                <th class="border-top-0 text-center td-price">Price</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr t-foreach="website_sale_order.website_order_line" t-as="line">
-                                <td colspan="2" t-if="not line.product_id.product_tmpl_id"/>
-                                <t t-else="">
-                                    <td class='td-img text-center'>
-                                        <span t-if="line._is_not_sellable_line() and line.product_id.image_128">
-                                            <img t-att-src="image_data_uri(line.product_id.image_128)" class="img o_image_64_max rounded" t-att-alt="line.name_short"/>
-                                        </span>
-                                        <span t-else=""
-                                            t-field="line.product_id.image_128"
-                                            t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'rounded o_image_64_max'}"
-                                        />
-                                    </td>
-                                    <td class='td-product_name'>
-                                        <div name="cart_summary_description_short">
-                                            <strong t-field="line.name_short" />
-                                        </div>
-                                    </td>
-                                </t>
-                                <td class='text-center td-qty'>
-                                    <div t-esc="int(line.product_uom_qty)"/>
-                                    <t t-if='line._get_shop_warning(clear=False)'>
-                                        <i class='fa fa-warning text-warning' t-att-title="line._get_shop_warning()" role="img" aria-label="Warning"/>
-                                    </t>
-                                </td>
-                                <td class="text-center td-price">
-                                    <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
-                                          t-field="line.price_reduce_taxexcl" style="white-space: nowrap;"
-                                          t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
-                                    <span t-else=""
-                                          t-field="line.price_reduce_taxinc" style="white-space: nowrap;"
-                                          t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <t t-if='website_sale_order'>
-                        <t t-set='warning' t-value='website_sale_order._get_shop_warning(clear=False)' />
-                        <div t-if='warning' class="alert alert-warning" role="alert">
-                            <strong>Warning!</strong> <t t-esc='website_sale_order._get_shop_warning()'/>
-                        </div>
-                    </t>
-                    <t t-call="website_sale.total">
-                        <t t-set='redirect' t-value="redirect or '/shop/payment'"></t>
-                    </t>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template id="confirmation">
+    <!-- Template of the checkout pages. Should be called in every page of the checkout flow. -->
+    <template id="checkout_layout" name="Checkout layout page">
+        <!-- Layout customization parameters:
+            - show_footer: Whether to show the website footer; default: `False`.
+            - show_navigation_button: Whether to show the navigation buttons; default: `True`.
+            - show_wizard_checkout: Whether to show the wizard checkout; default: `True`.
+            - show_shorter_cart_summary: Whether to show the shorter cart_summary (without items
+                                         summary and with express checkout buttons) or the full;
+                                         default: `None`.
+            - oe_structure: The structure element to append at the bottom of the page;
+                            default: `None`.
+        -->
+        <!-- Checkout context (non exhaustive):
+            - redirect: The route to redirect to when a customer enters a coupon; default: `None`.
+            - website_sale_order: The current order.
+        -->
         <t t-call="website.layout">
-            <t t-set="additional_title">Shop - Confirmed</t>
+            <t t-set="no_footer" t-value="True if show_footer is None else not show_footer"/>
+            <t t-set="show_navigation_button" t-value="True if show_navigation_button is None else show_navigation_button"/>
+            <t t-set="show_wizard_checkout" t-value="True if show_wizard_checkout is None else show_wizard_checkout"/>
             <div id="wrap">
-                <div class="container oe_website_sale py-2">
-                    <h1><span>Order</span> <em t-field="order.name" /> <t t-if="order.state == 'sale'"><span>Confirmed</span></t></h1>
-
-                    <div class="row">
-                        <div class="col-12 col-xl">
-                            <div class="oe_cart">
-                                <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
-                                <t t-if="tx_sudo.state == 'done'">
-                                    <div class="thanks_msg">
-                                        <h2>Thank you for your order.
-                                            <a role="button" class="btn btn-primary d-none d-md-inline-block" href="/shop/print" target="_blank" aria-label="Print" title="Print"><i class="fa fa-print"></i> Print</a>
-                                        </h2>
-                                    </div>
-                                </t>
-                                <t t-if="request.env['res.users']._get_signup_invitation_scope() == 'b2c' and request.website.is_public_user()">
-                                    <p class="alert alert-info mt-3" role="status">
-                                        <a role="button" t-att-href='order.partner_id.signup_prepare() and order.partner_id.with_context(relative_url=True).signup_url' class='btn btn-primary'>Sign Up</a>
-                                         to follow your order.
-                                    </p>
-                                </t>
-                                <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_confirmation_1"/>
-                                <h3 class="text-start mt-3">
-                                    <strong>Payment Information:</strong>
-                                </h3>
-                                <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
-                                <table class="table">
-                                    <tbody>
-                                        <tr>
-                                            <td colspan="2">
-                                                <t t-esc="tx_sudo.provider_id.name" />
-                                            </td>
-                                            <td class="text-end" width="100">
-                                                <strong>Total:</strong>
-                                            </td>
-                                            <td class="text-end" width="100">
-                                                <strong t-field="tx_sudo.amount" t-options="{'widget': 'monetary', 'display_currency': order.currency_id}" />
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                                <t t-call="website_sale.payment_confirmation_status"/>
-                                <div class="card mt-3">
-                                  <div class="card-body">
-                                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_invoice_id or only_services)" />
-                                    <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_invoice_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
-                                    <div t-if="not same_shipping and not only_services" groups="account.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
-                                  </div>
+                <div class="oe_website_sale o_website_sale_checkout container py-2">
+                    <div t-attf-class="row #{show_navigation_button and 'position-relative'} #{not show_wizard_checkout and 'mt32'} mb32">
+                        <div t-if="show_wizard_checkout" class="col-12">
+                            <t t-call="website_sale.wizard_checkout"/>
+                        </div>
+                        <div t-if="show_shorter_cart_summary"
+                             class="offset-xl-1 col-lg-5 col-xl-4 order-2"
+                             id="o_cart_summary">
+                            <div class="o_total_border card sticky-lg-top"
+                                 t-if="website_sale_order and website_sale_order.website_order_line">
+                                <div class="card-body p-0 p-lg-4">
+                                    <t t-call="website_sale.total"/>
+                                    <t t-call="payment.express_checkout"/>
+                                    <t t-call="website_sale.navigation_buttons"/>
                                 </div>
-                                <div class="oe_structure mt-3" id="oe_structure_website_sale_confirmation_2"/>
                             </div>
                         </div>
-                        <div class="col-12 col-xl-auto">
-                            <t t-set="website_sale_order" t-value="order"/>
-                            <t t-call="website_sale.cart_summary">
-                                <t t-set="hide_promotions" t-value="1"/>
-                            </t>
+                        <div t-else=""
+                             class="o_wsale_accordion accordion sticky-lg-top offset-xl-1 col-12 col-lg-5 col-xl-4 order-lg-2 rounded"
+                             id="o_wsale_total_accordion">
+                            <div class="o_total_border accordion-item p-0 p-lg-4">
+                                <div class="accordion-header d-block d-lg-none align-items-center mb-4">
+                                    <button class="accordion-button px-0 collapsed"
+                                            data-bs-toggle="collapse"
+                                            data-bs-target="#o_wsale_total_accordion_item"
+                                            aria-expanded="false"
+                                            aria-controls="o_wsale_total_accordion_item">
+                                        <div class="d-flex flex-wrap">
+                                            <b class="w-100">Order summary</b>
+                                            <span t-out="str(website_sale_order.cart_quantity)"/>
+                                            &amp;nbsp;item(s)&amp;nbsp;-&amp;nbsp;
+                                            <span id="amount_total_summary"
+                                                class="monetary_field ms-1"
+                                                t-field="website_sale_order.amount_total"
+                                                t-options='{"widget": "monetary", "display_currency": website_sale_order.currency_id}'/>
+                                        </div>
+                                    </button>
+                                </div>
+                                <div name="cart_summary_info" t-if="not website_sale_order or not website_sale_order.website_order_line" class="alert alert-info">
+                                    Your cart is empty!
+                                </div>
+                                <!-- Cart lines are showed in desktop but are in an hidden accordion in mobile -->
+                                <div id="o_wsale_total_accordion_item"
+                                    class="accordion-collapse collapse mb-4 mb-lg-0"
+                                    data-bs-parent="#o_wsale_total_accordion">
+                                    <div t-att-class="len(website_sale_order.website_order_line) &gt; 4 and 'o_wsale_scrollable_table mt-n4 me-n4 pt-4 pe-4'">
+                                        <table t-if="website_sale_order and website_sale_order.website_order_line"
+                                            class="table accordion-body mb-0"
+                                            id="cart_products">
+                                            <tbody>
+                                                <tr t-foreach="website_sale_order.website_order_line" t-as="line" t-att-class="line_last and 'border-transparent'">
+                                                    <t t-set="o_cart_sum_padding_top"
+                                                    t-value="'pt-3' if line_size &gt; 1 and not line_first else 'pt-0'"/>
+                                                    <td t-if="not line.product_id" colspan="2"/>
+                                                    <t t-else="">
+                                                        <td t-attf-class="td-img ps-0 #{o_cart_sum_padding_top}">
+                                                            <span t-if="line._is_not_sellable_line() and line.product_id.image_128">
+                                                                <img t-att-src="image_data_uri(line.product_id.image_128)" class="o_image_64_max img rounded" t-att-alt="line.name_short"/>
+                                                            </span>
+                                                            <span t-else=""
+                                                                t-field="line.product_id.image_128"
+                                                                t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'o_image_64_max rounded'}"
+                                                            />
+                                                        </td>
+                                                        <td t-attf-class="#{o_cart_sum_padding_top} td-product_name td-qty w-100"
+                                                            name='website_sale_cart_summary_product_name'>
+                                                            <h6>
+                                                                <t t-out="int(line.product_uom_qty)" />
+                                                                <t t-if="line._get_shop_warning(clear=False)">
+                                                                    <i class="fa fa-warning text-warning"
+                                                                    role="img"
+                                                                    t-att-title="line._get_shop_warning()"
+                                                                    aria-label="Warning"/>
+                                                                </t>
+                                                                x
+                                                                <t t-out="line.name_short"/>
+                                                            </h6>
+                                                        </td>
+                                                    </t>
+                                                    <td t-attf-class="#{o_cart_sum_padding_top} td-price pe-0 text-end"
+                                                        name="website_sale_cart_summary_line_price">
+                                                        <span t-if="website.show_line_subtotals_tax_selection == 'tax_excluded'"
+                                                            t-field="line.price_subtotal" style="white-space: nowrap;"
+                                                            t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
+                                                        <span t-else=""
+                                                            t-field="line.price_total" style="white-space: nowrap;"
+                                                            t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <t t-if='website_sale_order'>
+                                        <t t-set='warning' t-value='website_sale_order._get_shop_warning(clear=False)' />
+                                        <div t-if='warning' class="alert alert-warning" role="alert">
+                                            <strong>Warning!</strong> <t t-esc='website_sale_order._get_shop_warning()'/>
+                                        </div>
+                                    </t>
+                                    <t t-call="website_sale.total">
+                                        <t t-set="_cart_total_classes" t-valuef="border-top pt-3"/>
+                                    </t>
+                                </div>
+                                <div t-if="show_navigation_button" class="o_cta_navigation_container position-absolute position-lg-static start-0 bottom-0 col-12">
+                                    <t t-call="website_sale.navigation_buttons"/>
+                                </div>
+                            </div>
                         </div>
+                        <div t-attf-class="oe_cart col-12 col-lg-7">
+                            <t t-out="0"/>
+                        </div>
+                        <!-- This div serves as an anchor for the navigation buttons on the mobile
+                             view. -->
+                        <div t-if="not show_shorter_cart_summary and show_navigation_button"
+                             class="o_cta_navigation_placeholder d-block d-lg-none order-lg-4"/>
                     </div>
                 </div>
-                <div class="oe_structure" id="oe_structure_website_sale_confirmation_3"/>
+                <!-- This is the drag-and-drop area for website building blocs at the end of each
+                     checkout page. The templates created in the database to store blocs are hooked
+                     using XPath on the `oe_struture` element ID. Therefore, we can't use dynamic
+                     IDs (like with t-att-id) and each template needs to define a div element. -->
+                <t t-out="oe_structure"/>
             </div>
-            <input t-if='website.plausible_shared_key' type='hidden' class='js_plausible_push' data-event-name='Shop' t-attf-data-event-params='{"CTA": "Order Confirmed", "amount": "#{"%3s-%3s" % (max(0, round(order.amount_total/100)*100 - 50), round(order.amount_total/100)*100 + 50)}"}' />
         </t>
     </template>
 
+    <!-- /shop/confirmation route -->
+    <template id="confirmation">
+        <t t-call="website_sale.checkout_layout">
+            <t t-set="show_wizard_checkout" t-value="False"/>
+            <t t-set="show_navigation_button" t-value="False"/>
+            <t t-set="show_footer" t-value="True"/>
+            <t t-set="additional_title">Shop - Confirmed</t>
+            <t t-set="hide_promotions" t-value="True"/>
+            <t t-set="oe_structure">
+                <!-- This is the drag-and-drop area for website building blocs at the end of each
+                     checkout page. This is append at the of the page in `checkout_layout`. The
+                     templates created in the database to store blocs are hooked using XPath on the
+                     `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
+                     t-att-id) and each template needs to define a div element. -->
+                <div class="oe_structure" id="oe_structure_website_sale_confirmation_3"/>
+            </t>
+
+            <div class="d-flex justify-content-between align-items-center">
+                <h3>Thank you for your order.</h3>
+                <a role="button" class="d-none d-md-inline-block btn btn-primary ms-auto" href="/shop/print" target="_blank" aria-label="Print" title="Print"><i class="fa fa-print me-2"></i>Print</a>
+            </div>
+            <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
+            <t t-if="tx_sudo.state == 'done'">
+                <div class="mb-4">
+                    <h5>
+                        <em>
+                            <span>Order</span>
+                            <span t-field="order.name" />
+                            <t t-if="order.state == 'sale'">
+                                <i class="fa fa-check-circle ms-1"/>
+                            </t>
+                        </em>
+                    </h5>
+                </div>
+            </t>
+            <t t-if="request.env['res.users']._get_signup_invitation_scope() == 'b2c' and request.website.is_public_user()">
+                <p class="alert alert-info mt-3" role="status">
+                    <a role="button" t-att-href="order.partner_id.signup_prepare() and order.partner_id.with_context(relative_url=True).signup_url" class="btn btn-primary">Sign Up</a>
+                    to follow your order.
+                </p>
+            </t>
+            <div class="oe_structure clearfix mt-3" id="oe_structure_website_sale_confirmation_1"/>
+            <h4 class="text-start mt-3">Payment Information</h4>
+            <table class="table">
+                <tbody>
+                    <tr>
+                        <td colspan="2" class="ps-0">
+                            <t t-esc="tx_sudo.provider_id.name" />
+                        </td>
+                        <td class="text-end pe-0" width="100">
+                            <strong>Total:</strong>
+                        </td>
+                        <td class="text-end pe-0" width="100">
+                            <strong t-field="tx_sudo.amount" t-options="{'widget': 'monetary', 'display_currency': order.currency_id}" />
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <t t-call="website_sale.payment_confirmation_status"/>
+            <div class="card mt-3">
+                <div class="card-body">
+                    <t t-set="same_shipping" t-value="bool(order.partner_shipping_id == order.partner_invoice_id or only_services)" />
+                    <div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_invoice_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
+                    <div t-if="not same_shipping and not only_services" groups="account.group_delivery_invoice_address"><b>Shipping: </b><span t-esc='order.partner_shipping_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')"  class="address-inline"/></div>
+                </div>
+            </div>
+            <div class="oe_structure mt-3" id="oe_structure_website_sale_confirmation_2"/>
+            <input t-if='website.plausible_shared_key' type='hidden' class='js_plausible_push' data-event-name='Shop' t-attf-data-event-params='{"CTA": "Order Confirmed", "amount": "#{"%3s-%3s" % (max(0, round(website_sale_order.amount_total/100)*100 - 50), round(website_sale_order.amount_total/100)*100 + 50)}"}' />
+        </t>
+    </template>
+
+    <!-- Called in `website_sale.checkout_layout`. -->
     <template id="total">
-        <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order and website_sale_order.website_order_line">
+        <div id="cart_total" t-if="website_sale_order and website_sale_order.website_order_line" t-att-class="_cart_total_classes">
             <table class="table mb-0">
-                <tr id="empty">
-                    <td t-if="not no_rowspan" rowspan="10" class="border-0"/>
-                    <td class="col-md-2 col-3 border-0"/>
-                    <td class="col-md-2 col-3 border-0"/>
-                </tr>
                 <tr id="order_total_untaxed">
-                    <td class="text-end border-0">Subtotal:</td>
-                    <td class="text-xl-end border-0">
+                    <td id="cart_total_subtotal"
+                        class="border-0 pb-2 ps-0 pt-0 text-start text-muted"
+                        colspan="2">
+                        Subtotal
+                    </td>
+                    <td class="text-end border-0 pb-2 pe-0 pt-0">
                         <span t-field="website_sale_order.amount_untaxed"
                               class="monetary_field"
                               style="white-space: nowrap;"
@@ -2354,19 +2324,19 @@
                     </td>
                 </tr>
                 <tr id="order_total_taxes">
-                    <td class="text-end border-0">Taxes:</td>
-                    <td class="text-xl-end border-0">
+                    <td colspan="2" class="text-muted border-0 ps-0 pt-0 pb-3">Taxes</td>
+                    <td class="text-end border-0 pe-0 pt-0 pb-3">
                         <span t-field="website_sale_order.amount_tax"
                               class="monetary_field"
                               style="white-space: nowrap;"
                               t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
                     </td>
                 </tr>
-                <tr id="order_total">
-                    <td class="text-end border-top border-bottom-0"><strong>Total:</strong></td>
-                    <td class="text-xl-end border-top border-bottom-0">
+                <tr id="order_total" class="border-top">
+                    <td colspan="2" class="border-0 ps-0 pt-3"><strong>Total</strong></td>
+                    <td class="text-end border-0 px-0 pt-3">
                         <strong t-field="website_sale_order.amount_total"
-                                class="monetary_field"
+                                class="monetary_field text-end p-0"
                                 t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"/>
                     </td>
                 </tr>
@@ -2374,16 +2344,19 @@
         </div>
     </template>
 
+    <!-- Deactivatable through the website editor. -->
     <template id="reduction_code" inherit_id="website_sale.total" name="Promo Code">
+        <!-- Checkout context:
+            - hide_promotions: Whether to hide promotion input; default: `None`.
+            - redirect: The route to redirect to when a customer enters a coupon; default: `None`.
+            - website_sale_order: The current order.
+        -->
         <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
             <tr t-if="not hide_promotions">
-                <td colspan="3" class="text-center text-xl-end border-0">
-                <span class="">
+                <td colspan="3" class="text-end text-xl-end border-0 p-0">
+                <span>
                     <t t-set="force_coupon" t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available')"/>
-                    <t t-if="not force_coupon">
-                        <a href="#" class="show_coupon">I have a promo code</a>
-                    </t>
-                    <div t-attf-class="coupon_form #{not force_coupon and 'd-none'}">
+                    <div t-if="not force_coupon" class="coupon_form">
                         <t t-call="website_sale.coupon_form"/>
                     </div>
                 </span>
@@ -2392,6 +2365,7 @@
         </xpath>
     </template>
 
+    <!-- Called in `website_sale.confirmation`. -->
     <template id="payment_confirmation_status">
         <div class="oe_website_sale_tx_status mt-3" t-att-data-order-id="order.id" t-att-data-order-tracking-info="json.dumps(order_tracking_info)">
             <t t-set="tx_sudo" t-value="order.get_portal_last_transaction()"/>
@@ -2403,7 +2377,7 @@
                 'bg-danger'}">
                 <div class="card-header">
                     <a role="button" groups="base.group_system" class="btn btn-sm btn-link text-white float-end" target="_blank" aria-label="Edit" title="Edit"
-                            t-att-href="'/web#model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % ('payment.provider', tx_sudo.provider_id.id, 'payment.action_payment_provider')">
+                            t-attf-href="/web#model=payment.provider&amp;id=#{tx_sudo.provider_id.id}&amp;action=payment.action_payment_provider&amp;view_type=form">
                         <i class="fa fa-pencil"></i>
                     </a>
                     <t t-if="tx_sudo.state == 'pending'">
diff --git a/addons/website_sale/views/website_sale_delivery_templates.xml b/addons/website_sale/views/website_sale_delivery_templates.xml
index 7b416458ede..f6f873aadb4 100644
--- a/addons/website_sale/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale/views/website_sale_delivery_templates.xml
@@ -4,11 +4,11 @@
     <template id="cart_delivery" name="Delivery Costs" inherit_id="website_sale.total">
         <tr id="order_total_untaxed" position="before">
             <tr id="order_delivery" t-if="website_sale_order and website_sale_order.carrier_id">
-                <td class="text-end border-0 text-muted"
+                <td colspan="2" class="ps-0 pt-0 pb-2 border-0 text-muted"
                     title="Delivery will be updated after choosing a new delivery method">
-                    Delivery:
+                    Delivery
                 </td>
-                <td class="text-xl-end border-0 text-muted" >
+                <td class="text-end pe-0 pt-0 pb-2 border-0 text-muted">
                     <span t-field="website_sale_order.amount_delivery"
                           class="monetary_field"
                           style="white-space: nowrap;"
@@ -21,8 +21,7 @@
     <template id="payment_delivery_methods">
         <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" t-att-delivery_type="delivery.delivery_type" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False"/>
         <label class="label-optional" t-field="delivery.name"/>
-        <t t-set='badge_class' t-value="'float-end ' + 'badge text-bg-secondary'" />
-        <span t-attf-class="#{badge_class} o_wsale_delivery_badge_price" name="price">Select to compute delivery rate</span>
+        <span class="o_wsale_delivery_badge_price float-end fw-bold" name="price">Select to compute delivery rate</span>
         <t t-set='delivery_method' t-value="delivery.delivery_type+'_use_locations'" />
         <div class="small">
             <div class="d-none">
@@ -47,7 +46,7 @@
         <xpath expr="//t[@t-if='website_sale_order.amount_total']" position="before">
             <div t-if="deliveries" id="delivery_carrier">
                 <t t-set="delivery_nb" t-value="len(deliveries)"/>
-                <h3 class="mb24">Choose a delivery method</h3>
+                <h4>Choose a delivery method</h4>
                 <div class="card border-0" id="delivery_method">
                     <ul class="list-group">
                     <t t-foreach="deliveries" t-as="delivery">
diff --git a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
index fe3df2664cf..44635a1df66 100644
--- a/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
+++ b/addons/website_sale_loyalty/static/tests/tours/test_gift_card_tour.js
@@ -10,11 +10,6 @@ registry.category("web_tour.tours").add('shop_sale_gift_card', {
         // Add a small drawer to the order (50$)
         ...tourUtils.addToCart({productName: "TEST - Small Drawer"}),
         tourUtils.goToCart(),
-        {
-            content: 'Click on "I have a promo code"',
-            extra_trigger: '#cart_products',
-            trigger: '.show_coupon',
-        },
         {
             content: 'insert gift card code',
             trigger: 'form[name="coupon_code"] input[name="promo"]',
@@ -26,11 +21,7 @@ registry.category("web_tour.tours").add('shop_sale_gift_card', {
         },
         {
             content: 'check gift card line',
-            trigger: '.td-product_name:contains("PAY WITH GIFT CARD")',
-        },
-        {
-            content: 'Click on "I have a promo code"',
-            trigger: '.show_coupon',
+            trigger: 'div>strong:contains("PAY WITH GIFT CARD")',
         },
         {
             content: 'insert gift card code',
diff --git a/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js b/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
index a03e368b7d6..ce7440fc0ff 100644
--- a/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
+++ b/addons/website_sale_loyalty/static/tests/tours/test_promo_main_tour.js
@@ -24,11 +24,6 @@ registry.category("web_tour.tours").add('shop_sale_loyalty', {
             trigger: "a:contains(Add to cart)",
         },
             tourUtils.goToCart({quantity: 2}),
-        {
-            content: "click on 'I have a promo code'",
-            extra_trigger: '.show_coupon',
-            trigger: '.show_coupon',
-        },
         {
             content: "insert promo code 'testcode'",
             extra_trigger: 'form[name="coupon_code"]',
@@ -41,13 +36,13 @@ registry.category("web_tour.tours").add('shop_sale_loyalty', {
         },
         {
             content: "check reward product",
-            trigger: '.td-product_name:contains("10.0% discount on total amount")',
+            trigger: 'div>strong:contains("10.0% discount on total amount")',
             run: function () {}, // it's a check
         },
         /* 2. Add some cabinet to get a free one, play with quantity */
         {
             content: "go to shop",
-            trigger: '.td-product_name:contains("10.0% discount on total amount")',
+            trigger: 'div>strong:contains("10.0% discount on total amount")',
             run: function () {
                 jsonrpc('/web/dataset/call_kw/account.tax/create', {
                     model: 'account.tax',
@@ -100,7 +95,7 @@ registry.category("web_tour.tours").add('shop_sale_loyalty', {
         },
         {
             content: "check free product is added",
-            trigger: '#wrap:has(.td-product_name:contains("Free Product - Small Cabinet"))',
+            trigger: '#wrap:has(div>strong:contains("Free Product - Small Cabinet"))',
             run: function () {}, // it's a check
         },
         {
@@ -110,7 +105,7 @@ registry.category("web_tour.tours").add('shop_sale_loyalty', {
         },
         {
             content: "check free product is removed",
-            trigger: '#wrap:not(:has(.td-product_name:contains("Free Product - Small Cabinet")))',
+            trigger: '#wrap:not(:has(div>strong:contains("Free Product - Small Cabinet")))',
             run: function () {}, // it's a check
         },
         /* 4. Check /shop/payment does not break the `merged discount lines split per tax` (eg: with _compute_tax_id) */
diff --git a/addons/website_sale_loyalty/static/tests/tours/website_sale_delivery_gift_card.js b/addons/website_sale_loyalty/static/tests/tours/website_sale_delivery_gift_card.js
index 7400a46ffa3..b9b80cd0615 100644
--- a/addons/website_sale_loyalty/static/tests/tours/website_sale_delivery_gift_card.js
+++ b/addons/website_sale_loyalty/static/tests/tours/website_sale_delivery_gift_card.js
@@ -9,20 +9,10 @@ registry.category("web_tour.tours").add('shop_sale_loyalty_delivery', {
     steps: () => [
         ...wsTourUtils.addToCart({productName: "Acoustic Bloc Screens"}),
         wsTourUtils.goToCart(1),
-        {
-            content: "go to checkout",
-            trigger: 'a[href="/shop/checkout?express=1"]',
-            run: 'click'
-        },
+        wsTourUtils.goToCheckout(),
         {
             content: "select delivery method 1",
             trigger: "li label:contains(delivery1)",
-            run: 'click'
-        },
-        {
-            content: "click on 'Pay with gift card'",
-            trigger: '.show_coupon',
-            run: 'click'
         },
         {
             content: "Enter gift card code",
@@ -32,7 +22,6 @@ registry.category("web_tour.tours").add('shop_sale_loyalty_delivery', {
         {
             content: "click on 'Pay'",
             trigger: "a[role='button'].a-submit:contains(Apply)",
-            run: 'click'
         },
         ...wsTourUtils.assertCartAmounts({
             total: '0.00',
diff --git a/addons/website_sale_loyalty/views/website_sale_templates.xml b/addons/website_sale_loyalty/views/website_sale_templates.xml
index 46fafc1cddf..881e49aab64 100644
--- a/addons/website_sale_loyalty/views/website_sale_templates.xml
+++ b/addons/website_sale_loyalty/views/website_sale_templates.xml
@@ -10,7 +10,7 @@
     <template id="modify_code_form" inherit_id="website_sale.total" name="Loyalty, coupon, gift card">
         <xpath expr="//div[@id='cart_total']//table/tr[last()]" position="after">
             <tr t-if="not hide_promotions" class="oe_website_sale_gift_card">
-                <td colspan="3" class="text-center text-xl-end border-0">
+                <td colspan="3" class="text-center text-xl-end border-0 p-0">
                     <span class=''>
                         <t t-if="request.params.get('code_not_available')">
                             <div class="alert alert-danger text-start mt16" role="alert">
@@ -148,14 +148,12 @@
     <template id="reduction_coupon_code" inherit_id="website_sale.reduction_code">
         <xpath expr="//t[@t-set='force_coupon']" position="replace">
             <t t-set='force_coupon' t-value="website_sale_order.pricelist_id.code or request.params.get('code_not_available') or website_sale_order.get_promo_code_error(delete=False)"/>
-        </xpath>
-        <xpath expr="//a" position="replace">
-            <a href="#" class="show_coupon">Discount code or gift card</a>
+            <t t-set="_placeholder" t-value="'Discount code or gift card'"/>
         </xpath>
     </template>
 
-    <template id="cart_summary" name="Payment" inherit_id="website_sale.cart_summary">
-        <xpath expr="//table[@id='cart_products']/tbody/tr/td[hasclass('td-price')]/child::*" position="attributes">
+    <template id="cart_summary" name="Payment" inherit_id="website_sale.checkout_layout">
+        <xpath expr="//td[@name='website_sale_cart_summary_line_price']/child::*" position="attributes">
             <attribute name="t-att-style">'display: None;' if line.reward_id.reward_type == 'shipping' else ''</attribute>
         </xpath>
     </template>
@@ -170,8 +168,8 @@
         </xpath>
     </template>
 
-    <template id="cart_summary_inherit_website_gift_card_sale" inherit_id="website_sale.cart_summary">
-        <xpath expr="//td[hasclass('td-product_name')]/div/strong" position="after">
+    <template id="cart_summary_inherit_website_gift_card_sale" inherit_id="website_sale.checkout_layout">
+        <xpath expr="//td[@name='website_sale_cart_summary_product_name']/h6" position="after">
             <t t-call="sale_loyalty.used_gift_card"/>
         </xpath>
     </template>
diff --git a/addons/website_sale_product_configurator/static/tests/tours/website_sale_variants_modal_window.js b/addons/website_sale_product_configurator/static/tests/tours/website_sale_variants_modal_window.js
index e7d2b432dfd..2e0ab10bbde 100644
--- a/addons/website_sale_product_configurator/static/tests/tours/website_sale_variants_modal_window.js
+++ b/addons/website_sale_product_configurator/static/tests/tours/website_sale_variants_modal_window.js
@@ -1,5 +1,5 @@
 /** @odoo-module **/
-    
+
     import { registry } from "@web/core/registry";
 
     // This tour relies on a data created from the python test.
@@ -43,23 +43,23 @@
         },
         {
             content: "Check the product is in the cart",
-            trigger: 'td.td-product_name:contains(Short (TEST))',
+            trigger: 'div>a>h6:contains(Short (TEST))',
         },
         {
             content: "Check always variant",
-            trigger: 'td.td-product_name:contains(M always)',
+            trigger: 'div>a>h6:contains(M always)',
         },
         {
             content: "Check dynamic variant",
-            trigger: 'td.td-product_name:contains(M dynamic)',
+            trigger: 'div>a>h6:contains(M dynamic)',
         },
         {
             content: "Check never variant",
-            trigger: 'td.td-product_name:contains(Never attribute size: M never)',
+            trigger: 'div.text-muted>span:contains(Never attribute size: M never)',
         },
         {
             content: "Check never custom variant",
-            trigger: 'td.td-product_name:contains(Never attribute size custom: Yes never custom: TEST)',
+            trigger: 'div.text-muted>span:contains(Never attribute size custom: Yes never custom: TEST)',
             isCheck: true,
         }
     ]});
diff --git a/addons/website_sale_slides/views/website_sale_templates.xml b/addons/website_sale_slides/views/website_sale_templates.xml
index 0b54bdd6e8c..31d755e40c5 100644
--- a/addons/website_sale_slides/views/website_sale_templates.xml
+++ b/addons/website_sale_slides/views/website_sale_templates.xml
@@ -40,9 +40,9 @@
 </template>
 
 <template id="cart_summary_inherit_website_sale_slides"
-          inherit_id="website_sale.cart_summary"
+          inherit_id="website_sale.checkout_layout"
           name="Course Cart right column">
-    <xpath expr="//td[hasclass('td-product_name')]/div/strong" position="after">
+    <xpath expr="//td[@name='website_sale_cart_summary_product_name']/h6" position="after">
         <div t-if="line.product_id.channel_ids"
              t-foreach="line.product_id.channel_ids.filtered(lambda course: course.enroll == 'payment')"
              t-as="course"
diff --git a/addons/website_sale_stock/views/website_sale_stock_templates.xml b/addons/website_sale_stock/views/website_sale_stock_templates.xml
index d3d962fca5b..448097228ab 100644
--- a/addons/website_sale_stock/views/website_sale_stock_templates.xml
+++ b/addons/website_sale_stock/views/website_sale_stock_templates.xml
@@ -5,7 +5,7 @@
         <xpath expr="//input[@type='text'][hasclass('quantity')]" position="attributes">
           <attribute name='t-att-data-max'>(line.product_uom_qty + line._get_max_available_qty()) if line.product_id.type == 'product' and not line.product_id.allow_out_of_stock_order else None</attribute>
         </xpath>
-        <xpath expr="//div[hasclass('css_quantity')]" position="after">
+        <xpath expr="//div[@name='website_sale_cart_line_quantity']" position="after">
             <div class='availability_messages'/>
         </xpath>
     </template>