diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index bfcafc27a93..bda6027aade 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2910,7 +2910,7 @@ options.registry.ScrollButton = options.Class.extend({
     },
 });
 
-options.registry.ConditionalVisibility = options.Class.extend({
+options.registry.ConditionalVisibility = options.registry.DeviceVisibility.extend({
     /**
      * @constructor
      */
@@ -2942,6 +2942,7 @@ options.registry.ConditionalVisibility = options.Class.extend({
      * @override
      */
     async onTargetHide() {
+        await this._super(...arguments);
         if (this.$target[0].classList.contains('o_snippet_invisible')) {
             this.$target[0].classList.add('o_conditional_hidden');
         }
@@ -2950,12 +2951,14 @@ options.registry.ConditionalVisibility = options.Class.extend({
      * @override
      */
     async onTargetShow() {
+        await this._super(...arguments);
         this.$target[0].classList.remove('o_conditional_hidden');
     },
     /**
      * @override
      */
-    cleanForSave() {
+    async cleanForSave() {
+        await this._super(...arguments);
         // Kinda hacky: the snippet is forced hidden via onTargetHide on save
         // but should be marked as visible as when entering edit mode later, the
         // snippet will be shown naturally (as the CSS rules won't apply).
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 8b8ef6bbfed..e125d7b60a4 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1210,13 +1210,26 @@
         </we-select>
     </div>
 
+    <t t-set="_device_visibility_widgets">
+        <we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
+            data-no-preview="true"
+            data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
+        />
+        <we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
+            data-no-preview="true"
+            data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
+        />
+    </t>
     <div data-js="ConditionalVisibility" data-selector="section">
         <t t-set="current_website" t-value="request.env['website'].get_current_website()"/>
         <we-collapse>
-            <we-select string="Visibility" data-attribute-name="visibility" data-no-preview="true">
-                <we-button data-select-data-attribute="">Always visible</we-button>
-                <we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
-            </we-select>
+            <we-row string="Visibility">
+                <t t-out="_device_visibility_widgets"/>
+                <we-select data-attribute-name="visibility" data-no-preview="true">
+                    <we-button data-select-data-attribute="">No condition</we-button>
+                    <we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
+                </we-select>
+            </we-row>
 
             <t t-if="request.geoip.get('country_code')">
                 <t t-call="website.snippet_options_conditional_visibility">
@@ -1280,17 +1293,10 @@
     </div>
 
     <!-- Mobile/Desktop display options -->
-    <div data-js="DeviceVisibility" data-selector="section, section .row > div"
+    <div data-js="DeviceVisibility" data-selector="section .row > div"
             data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize">
-        <we-row string="Device">
-            <we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
-                data-no-preview="true"
-                data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
-            />
-            <we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
-                data-no-preview="true"
-                data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
-            />
+        <we-row string="Visibility">
+            <t t-out="_device_visibility_widgets"/>
         </we-row>
     </div>