Avisos
Vaciar todo

Algún CSS para mostrar productos en celular  

 
Francisco
 Francisco
Reputable Member

Hola, con la nueva versión de Woocommerce, te permite añadir productos en general, destacados, por categoría etc a cualquier página, sin embargo, a la hora de mostrar la página en el celular se ve un producto a la vez, me gustaría que se vieran dos. 

Ya tengo un 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%;
}
}

Pero este me funciona sólo en la página de tienda, pero no en la del inicio. 

 

Me podrian ayudar, por favor.

Contenido solo visible a usuarios registrados

Citar
Respondido : 16/02/2023 7:09 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Franscisco, 

En este caso revisa si el siguiente código te permite mostrar los productos en dos columnas dentro de la versión móvil en WooCommerce

@media only screen and (max-width: 600px) {


ul.is-layout-flow.is-flex-container.columns-4.alignwide.wp-block-post-template {
margin: 0px;
}

.wp-block-post-template.is-flex-container li {
margin: 0;
width: 47%;
}
.wp-block-post-template.is-flex-container {
justify-content: space-around;
}}

Verifícalo y nos comentas como va todo

Un Saludo 

 

ResponderCitar
Respondido : 16/02/2023 7:29 pm

Francisco
 Francisco
Reputable Member

@karen gracias, sólo que la vista es hacia abajo, quisiera que fuese en dos columnas, como está en la url de la tienda: 
https://www.chagueplay.com/tienda/

ResponderCitar
Respondido : 16/02/2023 8:11 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Francisco,

A que te refieres exactamente? actualmente lo veo en dos columnas:

image

Un saludo 🖐️ 

ResponderCitar
Respondido : 16/02/2023 8:26 pm

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

Francisco
 Francisco
Reputable Member

@argenis sí se ve en la página de tienda, pero en la página de inicio no se ve así, a eso me refiero 🙂 

ResponderCitar
Respondido : 18/02/2023 12:24 am
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Francisco

Para que se aplique a tu pagina de inicio prueba con los siguientes estilos CSS

@media only screen and (max-width: 600px){
.wp-block-post-template.is-flex-container li {
margin: 0;
width: 46% !important;
}}

Saludos!

 
ResponderCitar
Respondido : 18/02/2023 12:32 am

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

Francisco
 Francisco
Reputable Member

@bruno-vichetti gracias, ahora sí funciona, pero en la siguiente sección se vuelve a ver uno por uno y de paso, aprovecho, más abajo agregué 3 columnas y si es posible me gustaría que se vieran las tres todas juntas, (como si fuera una sola parte) para que no tegans que estar bajando y viendo una por una. 

comparto los CSS que tengo por si alguno está haciendo interferencia en la segunda sección de productos:

 

@media only screen and (max-width: 600px){
.wp-block-post-template.is-flex-container li {
margin: 0;
width: 46% !important;
}}

/* mobile only */
@media (max-width: 480px), (max-width: 767px) and (orientation: landscape) {
.joinchat { --bottom: 60px; }
}

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%;
}
}

ResponderCitar
Respondido : 18/02/2023 12:45 am
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Francisco,

Te sugiero que tomemos el caso por partes para no complicar mas la consulta

Tu solicitud inicial fue resuelta con los estilos ya previamente sugeridos? de ser asi confirmanos y luego validamos la nieva seccion que acabas de agregar

Ten en cuenta que si quieres que cada seccion de productos se muestre de forma distinta en dispositivos mobiles debes aplicarle alguna clase o ID al contenedor para de esta manera poder enfocar los estilos CSS de forma especifica

Saludos!

ResponderCitar
Respondido : 18/02/2023 2:42 am

Cursos Gratuitos WordPress

Francisco
 Francisco
Reputable Member

@bruno-vichetti la primera parte sí fue resuelta, gracias, 

Ahora en la siguiente sección quiero que se muestre exactamente igual que en la primera, pero al parecer también tengo que poner algún CSS porque este es diferente: esta sección se llama Fabricamos vestidos de fiesta para niña.

ResponderCitar
Respondido : 20/02/2023 10:22 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Francisco,

Vale entendido! para esta nueva seccion probemos los siguientes estilos CSS

@media (max-width: 480px){
.wc-block-grid.has-4-columns .wc-block-grid__product {
max-width: 47% !important;
float: left;
}}

Saludos!

ResponderCitar
Respondido : 21/02/2023 12:22 am

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

Francisco
 Francisco
Reputable Member

@bruno-vichetti super, quedo de maravilla, de hecho, se ve mejor que el de la sección de arriba, ya que el de la sección de arriba se ve más hacia la izquierda, y este se ve bien centrado.

Esta sección nueva 

el nuevo

La sección anterior (la que está más arriba en la página)

la anterior

 

Gracias

ResponderCitar
Respondido : 21/02/2023 3:44 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Francisco, 

En este caso lo que veo es que los bloques añaden estilos independientes tanto en la forma de alinear los contenidos como a los textos y botones, puedes probar si al añadir los mismos estilos estos se muestran de forma parecida en tu home, para ello puedes probar el siguiente código CSS

@media (max-width: 480px){
/*Alineación de productos*/
.page-id-4885 .wp-block-post-template.is-flex-container {
margin-left: 0;
}
/*estilos textos y botones
.page-id-4885 .has-text-align-center.wp-block-post-title.has-medium-font-size {
font-size: 1rem !important;
font-weight: 400;
margin-bottom: 0.5407911001em;
}
.page-id-4885 span.woocommerce-Price-amount.amount {
color: #43454b;
font-weight: 400;
font-size: .75em;
}
.page-id-4885 a.wp-block-button__link.ajax_add_to_cart.add_to_cart_button.wc-block-components-product-button__button.product_type_variable {
font-size: .75em;
}

}

Prueba esto y nos coemntas como ha ido todo

Un Saludo 

ResponderCitar
Respondido : 21/02/2023 4:00 pm

Francisco
 Francisco
Reputable Member

@karen duda, borro los otros CSS y agrego este nuevo o dejo los otros y sólo agrego este nuevo CSS?

ResponderCitar
Respondido : 21/02/2023 5:15 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fransico, 

En este caso solo agrega este nuevo y comprueba como se visualiza la opción para móviles de los productos. 

Un Saludo 

ResponderCitar
Respondido : 21/02/2023 5:23 pm

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