diff --git a/addons/sale/views/variant_templates.xml b/addons/sale/views/variant_templates.xml
index 06b74b1e09f..72813de20e1 100644
--- a/addons/sale/views/variant_templates.xml
+++ b/addons/sale/views/variant_templates.xml
@@ -7,6 +7,7 @@
                 <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
                 <li t-att-data-attribute_id="ptal.attribute_id.id"
                     t-att-data-attribute_name="ptal.attribute_id.name"
+                    t-att-data-attribute_display_type="ptal.attribute_id.display_type"
                     t-attf-class="variant_attribute #{'d-none' if len(ptal.product_template_value_ids._only_active()) == 1 and not ptal.product_template_value_ids._only_active()[0].is_custom else ''}">
 
                     <!-- Used to customize layout if the only available attribute value is custom -->
@@ -17,7 +18,7 @@
                     <t t-if="ptal.attribute_id.display_type == 'select'">
                         <select
                             t-att-data-attribute_id="ptal.attribute_id.id"
-                            t-attf-class="custom-select css_attribute_select js_variant_change #{ptal.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}"
+                            t-attf-class="custom-select css_attribute_select o_wsale_product_attribute js_variant_change #{ptal.attribute_id.create_variant} #{'d-none' if single_and_custom else ''}"
                             t-att-name="'ptal-%s' % ptal.id">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <option t-att-value="ptav.id"
@@ -36,7 +37,7 @@
                     </t>
 
                     <t t-if="ptal.attribute_id.display_type == 'radio'">
-                        <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline list-unstyled #{'d-none' if single_and_custom else ''}">
+                        <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <li class="list-inline-item form-group js_attribute_value" style="margin: 0;">
                                     <label class="col-form-label">
@@ -65,7 +66,7 @@
 
                     <t t-if="ptal.attribute_id.display_type == 'pills'">
                         <ul t-att-data-attribute_id="ptal.attribute_id.id"
-                            t-attf-class="btn-group-toggle list-inline list-unstyled #{'d-none' if single_and_custom else ''}"
+                            t-attf-class="btn-group-toggle list-inline list-unstyled o_wsale_product_attribute #{'d-none' if single_and_custom else ''}"
                             data-toggle="buttons">
                             <t t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav">
                                 <li t-attf-class="o_variant_pills btn btn-primary mb-1 list-inline-item js_attribute_value #{'active' if ptav in combination else ''}">
@@ -91,7 +92,7 @@
                     </t>
 
                     <t t-if="ptal.attribute_id.display_type == 'color'">
-                        <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline  #{'d-none' if single_and_custom else ''}">
+                        <ul t-att-data-attribute_id="ptal.attribute_id.id" t-attf-class="list-inline o_wsale_product_attribute #{'d-none' if single_and_custom else ''}">
                             <li t-foreach="ptal.product_template_value_ids._only_active()" t-as="ptav" class="list-inline-item mr-1">
                                 <label t-attf-style="background-color:#{ptav.html_color or ptav.product_attribute_value_id.name if not ptav.is_custom else ''}"
                                     t-attf-class="css_attribute_color #{'active' if ptav in combination else ''} #{'custom_value' if ptav.is_custom else ''}">
diff --git a/addons/website_sale/controllers/main.py b/addons/website_sale/controllers/main.py
index 61c5c925269..1b58e994e1f 100644
--- a/addons/website_sale/controllers/main.py
+++ b/addons/website_sale/controllers/main.py
@@ -1146,6 +1146,15 @@ class WebsiteSale(http.Controller):
         if {"x", "y"} <= set(options):
             product.write({'website_size_x': options["x"], 'website_size_y': options["y"]})
 
+    @http.route(['/shop/config/attribute'], type='json', auth='user')
+    def change_attribute_config(self, attribute_id, **options):
+        if not request.env.user.has_group('website.group_website_publisher'):
+            raise NotFound()
+
+        attribute = request.env['product.attribute'].browse(attribute_id)
+        if 'display_type' in options:
+            attribute.write({'display_type': options['display_type']})
+
     @http.route(['/shop/config/website'], type='json', auth='user')
     def _change_website_config(self, **options):
         if not request.env.user.has_group('website.group_website_publisher'):
diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index e93b9372fb8..da73e6772a9 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -681,4 +681,38 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
         }).then(reload);
     },
 });
+
+options.registry.WebsiteSaleProductAttribute = options.Class.extend({
+    /**
+     * @override
+     */
+     willStart: async function () {
+        this.attributeID = this.$target.closest('[data-attribute_id]').data('attribute_id');
+        return this._super(...arguments);
+    },
+
+    /**
+     * @see this.selectClass for params
+     */
+    setDisplayType: function (previewMode, widgetValue, params) {
+        this._rpc({
+            route: '/shop/config/attribute',
+            params: {
+                attribute_id: this.attributeID,
+                display_type: widgetValue,
+            },
+        }).then(reload);
+    },
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        switch (methodName) {
+            case 'setDisplayType':
+                return this.$target.closest('[data-attribute_display_type]').data('attribute_display_type');
+        }
+        return this._super(methodName, params);
+    },
+});
 });
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index d68393b4a52..0c9a437d5cc 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -141,6 +141,14 @@
                 <we-button class="fa fa-fw fa-long-arrow-down" title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"/>
             </we-button-group>
         </div>
+        <div data-js="WebsiteSaleProductAttribute" data-selector="#product_detail .o_wsale_product_attribute" data-no-check="true">
+            <we-select string="Display Type" data-no-preview="true">
+                <we-button data-set-display-type="radio">Radio</we-button>
+                <we-button data-set-display-type="pills">Pills</we-button>
+                <we-button data-set-display-type="select">Select</we-button>
+                <we-button data-set-display-type="color">Color</we-button>
+            </we-select>
+        </div>
     </xpath>
 </template>