Soporte » Diseño – Temas y plantillas » Modificar productos Woocommerce por columnas en móvil

  • Resuelto ebregrow

    (@ebregrow)


    Hola,
    necesito modificar los productos insertados en una página de WordPress mediante shortcodes para poder visualizar más de un producto (2 productos) en la misma fila.
    https://i.stack.imgur.com/8LBQw.png

    He añadido un código CSS adicional pero no consigo hacerlo bien.
    https://i.stack.imgur.com/pJ0hE.png

    Este es el código que he intentado:

    @media only screen and (max-width: 768px) {
     .products {
         width: 50%;
     }
    }

    Gracias de antemano.

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

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

    (@jose64)

    Hola

    Sigue esta ruta:

    Escritorio > Apariencia > Personalizar > WooCommere > Catálogo de productos

    Ahí tienes las opciones para la cantidad de productos que semostrarán por página y dispositivo.

    Recuerda cerrar el debate marcándolo como resuelto cuando así lo consideres, de esta forma nos ayudas a mantener el foro al día.

    Hola @jose64
    He revisado las opciones en Catálogo de productos y lo tengo así:
    https://imgur.com/a/tDOMo7Y
    Solamente se aplican en la página ‘Tienda’ de WooCommerce y no en la página ‘Inicio’ que creé e inserté los productos mediante shortcodes.
    https://imgur.com/a/RNGwcQw

    Moderador Jose Luis

    (@jose64)

    Hola

    No me di cuenta de que te referías a cualquier página, efectivamente eso se aplica a las páginas de archivo.

    Por lo que veo estás usando el bloque de Productos elegidos manualmente propio de WordPress.

    Tienes un plugin en el repositorio que entre otras mejoras al editor incluye opciones de visibilidad de acuerdo al dispositivo:

    Gutenberg Page Building Toolkit – EditorsKit

    Duplicas el bloque y pones en uno la cantidad de columnas para el ordenador y en el otro para el móvil. En el menú lateral derecho te aparece la opción Responsive, en ella seleccionas en que tipo de dispositivo se verá cada bloque, de manera que puedes mostrar tres, cuatro o cinco en la versión de ordenador y una o dos en la móvil.

    Coméntanos tus progresos, yo creo que con esto lo resuelves

    Hola @jose64
    Los productos los tengo insertados mediante shortcodes de WooCommerce y no mediante el bloque de Productos elegidos manualmente.
    De todas formas lo he intentado con el plugin pero no me funciona.
    Gracias igualmente.

    Moderador Jose Luis

    (@jose64)

    Hola

    Hay que darle una vuelta, el bloque de shortcode no te permite los ajustes de edición de Editors Kit, pero si lo metes dentro de otro bloque si puedes hacerlo, Creas un bloque de grupo y metes el shortcode dentro, entonces si te aparecerán los ajustes responsive con las opciones de visibilidad en los tres tipos de dispositivos.

    La cantidad de columnas la fijas con las opciones del shortcode como te indican en:

    Shortcodes included with WooCommerce: Display Product Attributes

    • Esta respuesta fue modificada hace 3 meses, 1 semana por Jose Luis.

    Hola @jose64
    He hecho todo lo que me has dicho y sigo sin solucionarlo, no me funciona.
    Espero poder solucionarlo, gracias.

    Moderador Jose Luis

    (@jose64)

    Hola @ebregrow

    Algo estás haciendo mal, porque si funciona, puedes ver como en las capturas:

    https://imgur.com/a/lTemlRf

    Diplicas el bloque y marcas uno como oculto en desktop y el otro oculto en movil y tablet

    Hola @jose64
    De nuevo he hecho lo que he visto en las capturas y sigue sin verse bien.
    En mi móvil se ve igual que aquí:
    https://imgur.com/a/uSUnk8N
    No sé que estoy haciendo mal.

    Hola @ebregrow no se si todavía le estas dando vueltas, yo lo he solucionado así

    .woocommerce .related.products {
    clear: both;
    }

    en aparencias-personalizar-css

    Moderador Jose Luis

    (@jose64)

    Hola @ebregrow

    En móvil lo ves a una columna porque es lo que cabe, es lo que hace que el tema sea responsive, se adapta al espacio que tiene.

    En pantallas de menos de 570px pone una columna, como está diseñado el CSS. Para mantener las dos columnas tendrías que modificar las media queries para cambiar ese comportamiento.

    Hola @alessandra77
    Lo he intentado pero no me ha funcionado.
    Gracias de todas formas.

    ebregrow

    (@ebregrow)

    Hola @jose64
    ¿Cómo podría modificar las media queries que tú dices?
    Gracias.

    Alessandra77

    (@alessandra77)

    Lo siento me equivoqué de código!
    Intenta éste

    @media (max-width: 479px) {
    .tcol-xs-6 {
    width:50%;
    }
    }

    Alessandra77

    (@alessandra77)

    ebregrow

    (@ebregrow)

    Hola @alessandra77
    Nada. Lo he intentado y tampoco me funciona.
    Gracias igualmente.

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