Cambiar la vista del lote de productos en Woocommerce

  • Cambiar la vista del lote de productos en Woocommerce

    Discusión creada por Guillermo Urbano el 23 de mayo de 2024 en 6:36 AM

    Un cliente me ha pedido poder cambiar en las páginas de categorías el número de productos que se muestran en pantalla por columna, de 1, de varias columnas y de cuadritos.

    ¿hay plugin o algún código para esto?

    Saludos!

    Guillermo Urbano ha respondido hace 1 semana, 4 dias 3 Miembros · 5 Respuestas
  • 5 Respuestas
  • Tania Gomez

    Miembro
    23 de mayo de 2024 en 7:46 AM

    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!

  • Tania Gomez

    Miembro
    23 de mayo de 2024 en 3:16 PM

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

  • Jefferson Maldonado

    organizador
    29 de mayo de 2024 en 12:12 PM

    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

      Miembro
      8 de junio de 2024 en 2:56 PM

      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!

Inicia sesión para responder.