Avisos
Vaciar todo

como hacer para que mis productos de woocommerce en el celular aparezcan en columna de 2  

Página 1 / 2
 
Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

buenas tardes
por favor como puedo hacer para que mis productos de woocommerce en el celular aparezcan en columna de 2??
asi como el adjunto 3

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 08/06/2019 11:32 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Jaime,

Agrega el siguiente código CSS.

@media only screen and (max-width: 767px) and (min-width: 480px)
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left !important;
    margin: 0px 5px 10px auto !important;
    width: 48% !important;
}

Saludos.

ResponderCitar
Respondido : 09/06/2019 2:15 am

Cursos Gratuitos WordPress

Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

ya agregue el codigo que me indica en CSS
y no se visualiza el cambio sigue apareciendo en columna de 1 por favor como podria hacer para que aparezca en columna de 2

ResponderCitar
Respondido : 10/06/2019 2:48 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Jaime,

Por favor, agrega el CSS como sigue:

@media only screen and (max-width: 767px) and (min-width: 480px){
  .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
      float: left !important;
      margin: 0px 5px 10px auto !important;
      width: 48% !important;
    }
}

Agrégalo dirigiéndote al Administrador de Wordpress, posiciona el puntero del mouse sobre Apariencia -> Personalizar -> CSS Adicional.

Saludos.

ResponderCitar
Respondido : 10/06/2019 8:49 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

En el primer adjunto muestro que ya inserte este codigo:

@media only screen and (max-width: 767px) and (min-width: 480px)
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left !important;
margin: 0px 5px 10px auto !important;
width: 48% !important;
}

y no funciona .. en el adjunto 2 se ve los resultados que aun no hay cambios.

ResponderCitar
Respondido : 10/06/2019 9:41 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El código tiene un problema, falta una llave al final.
Además no se ve claro en donde lo agregaste, veo una referencia a un archivo scss el cual no se leerá.

Prueba agregar este código en el Personalizador del theme en la opción CSS y verifica. Envíanos una captura de pantalla para ve en donde estas insertando el código.

La otra opción es que lo agregues en el style.css de tu theme, o mejor aún si tienes un child-theme

Saludos.

ResponderCitar
Respondido : 10/06/2019 10:39 pm

Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

ver adjunto he puesto en css y en la plantilla style.css

ResponderCitar
Respondido : 10/06/2019 11:00 pm
Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

en ajustes de woocommerce
puse esto: lo del adjunto ver por favor
tendra que ver algo?

ResponderCitar
Respondido : 10/06/2019 11:13 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Si es correcto, puede ser eso lo que está causando que no se apliquen los estilos CSS que te he proporcionado, por que inspeccionando tu web no se ven reflejados, como si no los estuvieras agregando. Pero si modificas los valores que están definidos en la captura que nos compartes los cambios se aplicarán para todas las resoluciones de pantalla. Prueba utililzando un child-theme.

Saludos.

ResponderCitar
Respondido : 10/06/2019 11:32 pm
Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

al quitar los numeros, ahora aparece asì.

Columna de 2 en la computadora, pero si lo abro desde un celular sigue apareciendo columna de 1
ver adjuntos
por favor como podria hacer

ResponderCitar
Respondido : 10/06/2019 11:55 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Jaime,

Como te mencioné en mi anterior respuesta, pareciera que no estás agregando los estilos CSS que te proporcioné pues no se ven reflejados en tu sitio aunque sí los estés guardando, por ello te sugerí probar con child themes. Igualmente prueba modificando el CSS que te envié de la siguiente manera:

@media only screen and (max-width: 767px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left !important;
margin: 0px 5px 10px auto !important;
width: 48% !important;
}

ul.products li.product:nth-of-type(2n) {
	margin-right: 0;
}
}

Saludos.

ResponderCitar
Respondido : 11/06/2019 12:06 am
Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

Ya estan apareciendo desde un celular columna de 2 , pero en la computadora muestra igual columna de 2 ,
es posible que en la computadora muestre una columna de 4 y en un celular columna de 2???

ResponderCitar
Respondido : 12/06/2019 7:57 pm

Cursos Gratuitos WordPress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para hacer lo que comentas, prueba agregando el siguiente código CSS al final:

.archive.woocommerce-page .rightsidebar #main .entry-content{
	width:100%;	
}

@media(min-width:769px){
	.archive.woocommerce-page ul.products li.product {
	    width: 24%!important;
	    float: left!important;
	    clear: none!important;
	    margin-right: 1%!important;
	}	
}

Saludos.

ResponderCitar
Respondido : 12/06/2019 8:18 pm
Jaime Erdulfo
 Jaime Erdulfo
Honorable Member

Ya estan apareciendo desde un celular columna de 2 , pero en la computadora muestra igual columna de 2 ,
es posible que en la computadora muestre una columna de 4 y en un celular columna de 2???
POR FAVOR EN EL ANTERIOR TICKET SOLICITE QUE SE MUESTREN EN COLUMNA DE 4, SERIA POSIBLE SE FORMEN EN COLUMNA DE 3, ES DECIR
es posible que en la computadora muestre una columna de 3 y en un celular columna de 2???

ResponderCitar
Respondido : 13/06/2019 12:43 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Jaime,

Es muy simple, si quieres clumnas de 3 en computadoras basta con modificar los valores de WooCommerce que anteriormente ya nos habias enviado captura de pantalla.

Contenido solo visible a usuarios registrados

ResponderCitar
Respondido : 13/06/2019 12:50 am
Página 1 / 2