[Tania Gomez]

Hola Guillermo ¿puedes explicar con más detalle por favor? ¿Esas vistas distintas son según el dispositivo o según qué criterio?
En cualquier caso, en el Theme Builder puedes personalizar el diseño de las páginas de categorías.
Saludos!

[Guillermo Urbano]

Sí, adjunto un video donde lo vio la clienta y que se ve en más webs.

https://gurbano.d.pr/v/Dg4oyE

gurbano.d.pr

Cambio de vistas en versión móvil y pc.mp4

Shared with Droplr

[Tania Gomez]

Ya lo veo, qué pena, pero eso me supera, lo siento.

[Jefferson Maldonado]

Que tal Guillermo, sí, es posible implementar un selector para que los usuarios puedan elegir el número de columnas en las que se muestran los productos de WooCommerce en dispositivos móviles. Esto puede lograrse mediante una combinación de código CSS y JavaScript. Aquí te dejo los pasos detallados para implementar esta funcionalidad:

Paso 1: Añadir el Selector en tu Página

Primero, necesitas añadir un selector (dropdown) en tu página. Esto puede hacerse en el archivo de la plantilla de tu tema, en una página específica, o usando un widget o un shortcode.

html
<select id="column-selector" class="column-selector">     <option value="1">1 columna</option>     <option value="2">2 columnas</option>     <option value="4">4 columnas</option> </select> 

Paso 2: Estilo CSS para las Columnas

Añade el siguiente CSS a tu archivo de estilos o en el área de CSS personalizado de tu tema (en Apariencia > Personalizar > CSS adicional):

css
/* Estilos base para productos */ .woocommerce ul.products {     display: flex;     flex-wrap: wrap;     margin: 0;     padding: 0;     list-style: none; }  .woocommerce ul.products li.product {     width: 100%; }  /* Clases dinámicas para columnas */ .columns-1 .woocommerce ul.products li.product {     width: 100%; }  .columns-2 .woocommerce ul.products li.product {     width: 50%; }  .columns-4 .woocommerce ul.products li.product {     width: 25%; } 

Paso 3: JavaScript para Cambiar el Número de Columnas

Añade el siguiente código JavaScript para manejar el cambio de columnas. Esto puede hacerse en un archivo JavaScript separado o directamente en el área de personalización de tu tema (Apariencia > Personalizar > JavaScript adicional).

javascript
document.addEventListener('DOMContentLoaded', function() {     const columnSelector = document.getElementById('column-selector');     const productGrid = document.querySelector('.woocommerce ul.products');      if (columnSelector && productGrid) {         columnSelector.addEventListener('change', function() {             const selectedValue = columnSelector.value;             productGrid.classList.remove('columns-1', 'columns-2', 'columns-4');             productGrid.classList.add(columns-${selectedValue});         });     } }); 

Paso 4: Probar la Funcionalidad

1. Añadir el Selector: Inserta el HTML del selector en la ubicación deseada en tu sitio web.
2. Añadir CSS: Agrega el CSS proporcionado en tu archivo de estilos o en el área de CSS adicional.
3. Añadir JavaScript: Agrega el JavaScript proporcionado en tu archivo de scripts o en el área de JavaScript adicional.

Ejemplo Completo

HTML:

html
<select id="column-selector" class="column-selector">     <option value="1">1 columna</option>     <option value="2">2 columnas</option>     <option value="4">4 columnas</option> </select> 

CSS:

css
/* Estilos base para productos */ .woocommerce ul.products {     display: flex;     flex-wrap: wrap;     margin: 0;     padding: 0;     list-style: none; }  .woocommerce ul.products li.product {     width: 100%; }  /* Clases dinámicas para columnas */ .columns-1 .woocommerce ul.products li.product {     width: 100%; }  .columns-2 .woocommerce ul.products li.product {     width: 50%; }  .columns-4 .woocommerce ul.products li.product {     width: 25%; } 

JavaScript:

javascript
document.addEventListener('DOMContentLoaded', function() {     const columnSelector = document.getElementById('column-selector');     const productGrid = document.querySelector('.woocommerce ul.products');      if (columnSelector && productGrid) {         columnSelector.addEventListener('change', function() {             const selectedValue = columnSelector.value;             productGrid.classList.remove('columns-1', 'columns-2', 'columns-4');             productGrid.classList.add(columns-${selectedValue});         });     } }); 

Notas Adicionales

• Compatibilidad: Asegúrate de que tu tema y WooCommerce estén actualizados para evitar posibles problemas de compatibilidad.
• Pruebas: Prueba la funcionalidad en diferentes dispositivos y navegadores para asegurar que todo funcione correctamente.

Con estos pasos, deberías poder implementar un selector de columnas que permita a los usuarios elegir cómo desean ver los productos de WooCommerce en dispositivos móviles.

Es recomendable que busques a algún desarrollador que te ayude a implementar algo como esto.

[Guillermo Urbano]

Muchas gracias Jeff, qué alegría que le des solución a tantos retos. A ver si soy capaz de que me salga todo jeje un saludo!