Soporte » Plugins y Hacks » WooCommerce » Dos columnas de productos en versoión movil

  • Resuelto echindik

    (@echindik)


    Buenas! Como les va amigos?
    Bueno vengo con esta consultilla haber si me pueden ayudar. Resulta que hace dos semanas ando detrás de mejorar la experiencia de la tienda desde un navegador móvil.
    Como ya sabemos, por defecto en la página donde se muestra nuestro catalogo en la version movil hay que hacer scroll viendo de a un producto a la ves y ese es mi dolor de cabeza.

    Utilizo Storefront y eh intentado con el siguiente código desde CSS General, pero no ah cambiado nada, solo que las imágenes de los productos se muestran alineadas a la izquierda.
    (Este código lo obtuve de otro debate aquí en el foro)

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

    Tambien intente usar plantillas de WooLentor con Elementor para poder definir las dos columnas en movil pero me rompe toda la estructura asi que de paso NO LO RECOMIENDO!

    Alguien tiene como ayudarme?
    Desde ya muchas gracias!!

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

Viendo 14 respuestas - de la 1 a la 14 (de un total de 14)
  • Buenas tardes, @echindik

    Creo que entiendo lo que quieres hacer pero confírmame, por favor.

    Lo que quieres es que en tamaño de móvil, se muestren dos productos por fila, es así?

    En ese caso, en qué páginas quieres que pase esto? en todas o solo en la de la tienda?

    Me comentas, ok?

    Saludos y ánimo!

    Iniciador del debate echindik

    (@echindik)

    Hola @oabadfol gracias por tu respuesta!

    Me interesa que se vean dos productos por fila horizontal. Y me gustaría que se viera en todas las pagínas de la tienda, ya sea shop o las paginas filtradas de categorías, etiquetas, etc..

    Desde ya muchas gracias!

    Ok.

    Prueba esto y me dices:

    .woocommerce ul.products li.product {
        width: 50%;
        float: left;
    }

    Saludos y ánimo!

    Iniciador del debate echindik

    (@echindik)

    @oabadfol DISCULPA, eh colocado el css en «Css Adicional» y en la vista movil desde el personalizador se muestra bien, pero luego intente acceder desde dos telefonos diferentes a la pagina y se sigue mostrando una fila.. Aclaro por las dudas porque puede inferir que utilizo el plugin Woo Customizer.

    GRACIAS!

    • Esta respuesta fue modificada hace 3 años, 10 meses por echindik.

    Buenos días @echindik

    Lo acabo de probar en dos navegadores y en el móvil y lo veo bien. Se muetra en dos columnas en tamaño móvil.

    Mira a ver y refresca el navegador.

    Si tienes algún plugin de caché, vacía la caché.

    Saludos.

    Iniciador del debate echindik

    (@echindik)

    @oabadfol Como estas?? Si si,, ahora lo eh visto y se ve bien.. infinitas gracias colega!! habia probado con otros y no me habia funcionado!

    Oye y esto como funciona? Porque no son las clasicas «columnas», soy un improvisador en cuanto al css y no eh logrado decifrar como darles un poco de espacio entre si a los productos (En horizontal)..

    Pues nada, que me has ayudado muchisimo! Gracias!

    jajaja…

    Me alegro de que te funcione bien.

    En cuanto a cómo funciona… pues es CSS, un poco de complejo de explicar aquí, la verdad pero si te interesa, seguro que te pones con ello y poco a poco lo dominas. Es como todo…

    Si consideras que ha sido resulta tu consulta, por favor, márcala como resuelta.

    Mucho ánimo!!

    Estimados
    Buenos Días

    Intenté aplicar estos 2 códigos más 1 adicional pero ni uno pudo resolver el problema que se menciona que poner 2 columnas en la vista móvil, los códigos los ingrese por Apariencia > Personalizar >Css personalizado

    la pagina con la cual estoy comenzando es y el tema es Ocean
    https://cssantarosamarket.com/

    ¿en que me estoy equivocando?

    1ra opcion

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

    2da opcion

    .woocommerce ul.products li.product {
    width: 50%;
    float: left;
    }

    3ra opcion

    @media (max-width: 400px) {
    .kad_product {
    width: 50%;
    float: left;
    }
    }

    Gracias por su apoyo.

    • Esta respuesta fue modificada hace 3 años, 8 meses por maxzu.

    Hola Maxzu, revisé tu página y veo que pudiste resolverlo, Cómo pudiste hacer? A mi aún no me funciona ese código. Quedo atento!

    @amiserque
    utilice este código

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

    pruebalo a ver

    Hola

    Me lanze a crear mi tienda en Woocommerce y a sido un dolor de cabeza, jajaja. Cada dia avanzo un poco mas, pero no a sido nada facil.

    Tengo el sitio http://34.68.184.2/. Me interesa que se vean dos productos por fila horizontal. Y me gustaría que se viera en todas las paginas de la tienda, ya sea shop o las paginas filtradas de categorías, etiquetas, etc..

    Probe todos los códigos mencionados anteriormente y nada funciono, Me voy a personalizar, CSS adicional, e inserte y no funciono.

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

    Habra algo que no estare haciendo bien? Mil Gracias por la ayuda.

    Saludos

    ¡Hola!

    He aplicado la solución de @oabadfol y funciona correctamente, los productos de la home de Storefront se ven en dos columnas, pero aparecen pegadas. ¿Podríais indicarme cómo dejar espacio de separación entre ambas columnas, por favor?

    Muchas gracias por vuestra ayuda.

    Saludos,
    Ferran

    ferran lo solucioné quitando porcentaje al ancho (width) y agregando un margen de 4%

    .woocommerce ul.products li.product {
        width: 46%;
        float: left;
    	  margin-right: 4%
    }

    .woocommerce ul.products li.product {
    width: 46%;
    float: left;
    margin-right: 4%
    }

    Este código me funciona en móvil pero en ordenador se me descolocan los productos… alguna solución?

Viendo 14 respuestas - de la 1 a la 14 (de un total de 14)
  • El debate ‘Dos columnas de productos en versoión movil’ está cerrado a nuevas respuestas.