Soporte » Guías – Resolución de problemas » Modificar numero de filas de productos en el movil

  • Hola buenas, necesito ayuda para cambiar el numero de filas de los productos en versión móvil.
    Acccedo a Personalizar>Ajustes de tienda>Lista de Productos>Columnas de ladrillos=2; funciona perfectamente en versión desktop y en tablet pero no hace cambios en la versión móvil. En el móvil solo muestra 1 producto por fila y todo en una columna.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Por defecto, WooCommerce no permite las dos columnas en móvil, por el tamaño y para mantener la usabilidad.

    Si quieres puedes forzarla modificando el CSS:

    ul.products li.product {
    	width: 46.411765%;
    	float: left;
    	margin-right: 5.8823529412%;
    }
    
    ul.products li.product:nth-of-type( 2n ) {
    	margin-right: 0;
    }
    
    @media ( min-width: 768px ) {
    	ul.products li.product:nth-of-type( 2n ) {
    		margin-right: 5.8823529412%;
    	}
    }

    Añade esto al CSS personalizado del tema, sigue la ruta:

    Apariencia > Personalizar > CSS adicional

    Coméntanos el resultado y, por favor, recuerda cerrar el debate marcándolo como resuelto cuando así sea, de esta forma nos ayudas a mantener el foro al día.

    Hola @jose64 gracias por tu respuesta pero sigue sin funcionar, hace los cambios en modo desktop y tablet pero en la versión móvil sale igual.
    Muchas gracias

    Moderador Jose Luis

    (@jose64)

    Hola.

    Yo lo veo funcionando en tu web ahora mismo, lo que pasa es que en la tienda no muestras los productos sino las categorías.

    tengo ese inconveniente al mostrar las categorias y los productos elegidos manualmente en la pagina de inicio

    Hola, tengo un problema con mi web en versión móvil ojalá me puedan ayudar, soy nuevo en esto y me está costando mucho.

    Quiero en versión de celular que se vean dos columnas en todos las páginas donde salgan productos.

    Agregué este código y logré que se viera en dos columnas solo en la página de SHOP pero en las vistas por categorías no se aplica.

    
    @media (max-width: 767px) {
    div.woocommerce ul.products li.product {
    flex-basis: 50%;
    max-width: 50%;
    }
    }
    

    Pero este mismo código tiene un error, me pone espacios en blanco entre productos.

    Esa es la páginacasa obsidiana

Viendo 5 respuestas - de la 1 a la 5 (de un total de 5)
  • Debes estar registrado para responder a este debate.