diff --git a/resources/js/components/pedidos/Canasta.vue b/resources/js/components/pedidos/Canasta.vue
index 8f0b4d6..adf8317 100644
--- a/resources/js/components/pedidos/Canasta.vue
+++ b/resources/js/components/pedidos/Canasta.vue
@@ -1,6 +1,6 @@
 <script >
 import { defineComponent } from "vue";
-import { mapMutations, mapState } from "vuex";
+import { mapGetters, mapMutations, mapState } from "vuex";
 import CategoriasContainer from "./CategoriasContainer.vue";
 import ProductosContainer from "./ProductosContainer.vue";
 import Chismosa from "./Chismosa.vue";
@@ -9,7 +9,8 @@ import DevolucionesModal from "./DevolucionesModal.vue";
 export default defineComponent({
     components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
     computed: {
-        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"])
+        ...mapState('ui', ["show_chismosa", "show_devoluciones", "tags_interactuada"]),
+        ...mapGetters('productos', ["mostrarProductos"]),
     },
     methods: {
         ...mapMutations("ui", ["toggleTags"]),
@@ -23,8 +24,8 @@ export default defineComponent({
 
 <template>
     <div class="columns ml-3 mr-3" v-else>
-        <categorias-container :class="show_chismosa ? 'hide-below-1024' : ''"/>
-        <productos-container :class="show_chismosa ? 'hide-below-1024' : ''"/>
+        <productos-container v-if="mostrarProductos" :class="show_chismosa ? 'hide-below-1024' : ''"/>
+        <categorias-container v-else :class="show_chismosa ? 'hide-below-1024' : ''"/>
         <devoluciones-modal v-show="show_devoluciones"/>
     </div>
 </template>
diff --git a/resources/js/components/pedidos/CategoriasContainer.vue b/resources/js/components/pedidos/CategoriasContainer.vue
index cf72368..5dca00a 100644
--- a/resources/js/components/pedidos/CategoriasContainer.vue
+++ b/resources/js/components/pedidos/CategoriasContainer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column">
+    <div class="column">
         <div ref="categorias"
              class="columns is-multiline is-mobile"
             :class="{ 'align-last-left': isLastRowIncomplete }">
@@ -28,9 +28,6 @@ export default {
     computed: {
         ...mapState('productos', ["categorias", "filtro"]),
         ...mapState('ui', ["show_chismosa"]),
-        visible() {
-            return this.filtro === null;
-        }
     },
     methods: {
         ...mapActions('productos', ["seleccionarCategoria"]),
diff --git a/resources/js/components/pedidos/ProductosContainer.vue b/resources/js/components/pedidos/ProductosContainer.vue
index 28e678b..9e5bc1b 100644
--- a/resources/js/components/pedidos/ProductosContainer.vue
+++ b/resources/js/components/pedidos/ProductosContainer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column">
+    <div class="column">
         <div ref="productos"
              class="columns is-multiline is-mobile"
              :class="{ 'align-last-left': isLastRowIncomplete }">
@@ -21,9 +21,6 @@ export default {
     computed: {
         ...mapState('productos', ["productos", "filtro"]),
         ...mapState('ui', ["show_chismosa"]),
-        visible() {
-            return this.filtro !== null;
-        },
         miga: function () {
             return {
                 nombre: this.filtro.valor,
diff --git a/resources/js/store/modules/productos/index.ts b/resources/js/store/modules/productos/index.ts
index 4b6c8c5..c23139d 100644
--- a/resources/js/store/modules/productos/index.ts
+++ b/resources/js/store/modules/productos/index.ts
@@ -49,9 +49,16 @@ const actions = {
     }
 };
 
+const getters = {
+    mostrarProductos() {
+        return state.filtro !== undefined;
+    }
+};
+
 export default {
     namespaced: true,
     state,
     mutations,
     actions,
+    getters,
 };