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 4b1a7946ec9..c70d069b60b 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -531,6 +531,17 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
             return this._rerenderXML();
         }
     },
+    /**
+     * @override
+     */
+    updateUIVisibility: async function () {
+        // Main updateUIVisibility will remove the d-none class because there are visible widgets
+        // inside of it. TODO: update this once updateUIVisibility can be used to compute visibility
+        // of arbitrary DOM elements and not just widgets.
+        const isEditing = this.$el.find('[data-name="ribbon_options"]').hasClass('d-none');
+        await this._super(...arguments);
+        this._toggleEditingUI(isEditing);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index b80ecbb5013..3bef71ef068 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -79,13 +79,13 @@
                     <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
                     <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
                 </we-row>
-                <we-colorpicker string="Background Color" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
-                <we-colorpicker string="Text Color" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
-                <we-select string="Mode">
+                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
+                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
+                <we-select string="⌙ Mode">
                     <we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
                     <we-button data-set-ribbon-mode="tag">Tag</we-button>
                 </we-select>
-                <we-select string="Position">
+                <we-select string="⌙ Position">
                     <we-button data-set-ribbon-position="left">Left</we-button>
                     <we-button data-set-ribbon-position="right">Right</we-button>
                 </we-select>