diff --git a/website_sale_product_attribute_value_filter_existing/__manifest__.py b/website_sale_product_attribute_value_filter_existing/__manifest__.py
index 0e179019b6..ee2374ab53 100644
--- a/website_sale_product_attribute_value_filter_existing/__manifest__.py
+++ b/website_sale_product_attribute_value_filter_existing/__manifest__.py
@@ -3,7 +3,7 @@
 {
     "name": "Website Sale Attribute Value Existing",
     "summary": "Allow hide attributes values not used in variants",
-    "version": "16.0.1.1.0",
+    "version": "17.0.1.0.0",
     "development_status": "Production/Stable",
     "category": "Website",
     "website": "https://github.com/OCA/e-commerce",
diff --git a/website_sale_product_attribute_value_filter_existing/static/src/js/website_sale_product_attribute_value_filter_existing_tour.esm.js b/website_sale_product_attribute_value_filter_existing/static/src/js/website_sale_product_attribute_value_filter_existing_tour.esm.js
index 421a99524d..1332e38bff 100644
--- a/website_sale_product_attribute_value_filter_existing/static/src/js/website_sale_product_attribute_value_filter_existing_tour.esm.js
+++ b/website_sale_product_attribute_value_filter_existing/static/src/js/website_sale_product_attribute_value_filter_existing_tour.esm.js
@@ -1,43 +1,40 @@
 /** @odoo-module **/
 
-import tour from "web_tour.tour";
+import {registry} from "@web/core/registry";
 
-tour.register(
-    "website_sale_product_attribute_value_filter_existing",
-    {
+registry
+    .category("web_tour.tours")
+    .add("website_sale_product_attribute_value_filter_existing", {
         test: true,
         url: "/shop",
-    },
-    // No product has the yellow colour attribute defined.
-    // When enter to "/shop" the attribute "test yellow" should not appear in the list of filters by attribute.
-    [
-        // For the following steps it is checked that the attribute "test yellow" is
-        // not present in the list but the attributes "test red", "test blue" and
-        // "test green" must be present.
-        {
-            content:
-                "Search a product. Ensure 'test red', 'test blue' and 'test green' attributes are present while 'Test yellow' is not.",
-            trigger: "form input[name=search]",
-            run: "text desk",
-            extra_trigger:
-                ".js_attributes:not(:contains('Test yellow')):has(label:contains('Test red')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test blue')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test green'))",
-        },
-        {
-            content:
-                "Submit search button. Ensure 'test red', 'test blue' and 'test green' attributes are present while 'Test yellow' is not.",
-            trigger: 'form:has(input[name="search"]) .oe_search_button',
-            extra_trigger:
-                ".js_attributes:not(:contains('Test yellow')):has(label:contains('Test red')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test blue')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test green'))",
-        },
-        // After searching, the attributes "test red" and "test green" must be present.
-        // "Test yelow" should not be present as it is not used in any product and
-        // "test blue" should not be present as it is not used in the products shown.
-        {
-            content:
-                "Go to /shop after the search. Ensure 'test red' and 'test green' attributes are present while 'Test yellow' and 'test blue' are not.",
-            trigger: "a[href='/shop']",
-            extra_trigger:
-                ".js_attributes:not(:contains('Test blue'), :contains('Test yellow')):has(label:contains('Test green')), .js_attributes:not(:contains('Test blue'), :contains('Test yellow')):has(label:contains('Test red'))",
-        },
-    ]
-);
+        steps: () => [
+            // No product has the yellow colour attribute defined.
+            // When enter to "/shop" the attribute "test yellow" should not appear in the list of filters by attribute.
+            // For the following steps it is checked that the attribute "test yellow" is
+            // not present in the list but the attributes "test red", "test blue" and
+            // "test green" must be present.
+            {
+                content:
+                    "Ensure 'test red', 'test blue' and 'test green' attributes are present while 'Test yellow' is not.",
+                trigger: "body",
+                extra_trigger:
+                    ".js_attributes:not(:contains('Test yellow')):has(label:contains('Test red')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test blue')), .js_attributes:not(:contains('Test yellow')):has(label:contains('Test green'))",
+            },
+            {
+                content: "Selecting the 'test green' attribute.",
+                trigger:
+                    ".form-check:has(label:contains('Test green')) input[type='checkbox']",
+                run: "click",
+            },
+            // After selecting, the attributes "test red" and "test green" must be present.
+            // "Test yellow" should not be present as it is not used in any product and
+            // "test blue" should not be present as it is not used in the products shown.
+            {
+                content:
+                    "Ensure 'test red' and 'test green' attributes are present while 'Test yellow' and 'test blue' are not.",
+                trigger: "body",
+                extra_trigger:
+                    ".js_attributes:not(:contains('Test blue')):not(:contains('Test yellow')):has(label:contains('Test green')), .js_attributes:not(:contains('Test blue')):not(:contains('Test yellow')):has(label:contains('Test red'))",
+            },
+        ],
+    });
diff --git a/website_sale_product_attribute_value_filter_existing/views/templates.xml b/website_sale_product_attribute_value_filter_existing/views/templates.xml
index 5f43028c43..3c785ea062 100644
--- a/website_sale_product_attribute_value_filter_existing/views/templates.xml
+++ b/website_sale_product_attribute_value_filter_existing/views/templates.xml
@@ -2,7 +2,7 @@
 <!-- Copyright 2019 Tecnativa - Victor M.M. Torres
      License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
 <odoo>
-    <template id="products_attributes" inherit_id="website_sale.products_attributes">
+     <template id="products_attributes" inherit_id="website_sale.products_attributes">
         <xpath
             expr="//t[@t-if=&quot;a.display_type == 'select'&quot;]//t[@t-foreach='a.value_ids']/option"
             position="attributes"
@@ -10,26 +10,17 @@
             <attribute name="t-if">attr_values_used &amp; v</attribute>
         </xpath>
         <xpath
-            expr="//t[@t-if=&quot;a.display_type == 'radio' or a.display_type == 'pills'&quot;]//t[@t-foreach='a.value_ids']/div"
-            position="attributes"
-        >
-            <attribute name="t-if">attr_values_used &amp; v</attribute>
-        </xpath>
-        <xpath
-            expr="//div[@t-if=&quot;a.display_type == 'color'&quot;]//t[@t-foreach='a.value_ids']/label"
+            expr="//div[@t-elif=&quot;a.display_type in ('radio', 'pills', 'multi')&quot;]//t[@t-foreach='a.value_ids']"
             position="attributes"
         >
             <attribute name="t-if">attr_values_used &amp; v</attribute>
         </xpath>
     </template>
-    <template id="o_wsale_offcanvas" inherit_id="website_sale.o_wsale_offcanvas">
-        <xpath expr="//div[@t-foreach='a.value_ids']" position="attributes">
-            <attribute name="t-if">attr_values_used &amp; v</attribute>
-        </xpath>
-        <xpath
-            expr="//div[@t-if=&quot;a.display_type == 'color'&quot;]//t[@t-foreach='a.value_ids']/label"
-            position="attributes"
-        >
+    <template
+        id="o_wsale_offcanvas_color_attribute"
+        inherit_id="website_sale.o_wsale_offcanvas_color_attribute"
+    >
+        <xpath expr="//t[@t-foreach='a.value_ids']/label" position="attributes">
             <attribute name="t-if">attr_values_used &amp; v</attribute>
         </xpath>
     </template>