Avisos
Vaciar todo

[Resuelto] No aparecen las fotos en miniatura del carrito de compra  

 
Victor
 Victor
Usuario experto

Buenas tardes,

Utilizo Divi, estoy construyendo una nueva pagina en un subdominio, en el carrito de compra en modo escritorio si que veo las imagen del producto en miniatura, pero cuando paso al modo Tablet y móvil, las imágenes en miniatura no se ven. He visto un fragmento de código css en otra consulta donde al introducirlo en la css adicional del modulo si hace que aparezca la imagen en el modo móvil, en formato tablet sigue sin verse y también lo que genera ese fragmento es que, los atributos como "producto", "cantidad" , "subtotal" etc desaparecen.

Contenido solo visible a usuarios registrados

Respondido : 19/10/2024 1:39 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Victor.

Prueba con esto:

td.product-thumbnail {
display: block !important;
}

 

Puedes añadirlo en aparienci a-> Personalizar -> CSS Adcional.

 

Un saludo

Respondido : 19/10/2024 1:55 pm

Victor
 Victor
Usuario experto

@pepesoler Buenas tardes, ahora si que aparecen las imágenes.

En el formato tablet no se a que es debido ahora pero las imágenes no están proporcionadas tanto si utilizamos la tablet en vertical como en horizontal, y en el móvil en la posición horizontal pasa lo mismo, en la posición vertical del móvil si se ve mejor, lo que ocurre es que la imagen no se centra en el espacio disponible y ahora aparecen tanto en la tablet como en el móvil ":" que me imagino que serán los puntos de los atributos, como podría quitarlos. 

Respondido : 19/10/2024 4:05 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Victor, 

En este caso revisa si al añadir el tamaño de la imagen proporcional al ancho del contender se muestra mejor, para ello puedes utilizar el siguiente código CSS

.et_pb_wc_cart_products_0_tb_body table.cart img {
width: 1000% !important;
height: auto !important;
}

Verifícalo y nos comentas como va todo

Un Saludo

Respondido : 19/10/2024 5:01 pm

Victor
 Victor
Usuario experto

@karen Buenas tardes,

Con el fragmento de arriba no realiza ningún cambio, se mantienen los mismo problemas que antes.

Respondido : 19/10/2024 5:22 pm
Victor
 Victor
Usuario experto

@karen

Te mando unas capturas de pantalla por si os puedo ayudar un poco más.

formato movil horizontal

 Esta es en movil horizontal, la imagen se despreporciona.

formato movil vertical

Esta es en movil vertical, la imagen esta proporcionada, salen los dos puntitos ":" que no se a que se deben y lo suyo es que la imagen estuviera centrada.

formato tablet horizontal

Esta es en tablet horizontal, la imagen no esta proporcionada.

formato tablet vertical

Esta es en tablet vertical, la imagen no esta proporcionada ni centrada y salen los puntitos ":"

 

Muchas gracias por toda la ayuda que realizais.

Respondido : 19/10/2024 5:38 pm

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Victor, 

No realices las pruebas de la vista dentro del propio constructor, lo mejor es que lo veas en el navegador o en el propio dispositivo, adicional no veo se esté aplicando el código que te pase anteriormente, prueba con el siguiente y nos comentas como va todo

@media only screen and (min-width: 968px) {

.et_pb_wc_cart_products_0_tb_body table.cart img {
height: 100% !important;
width: auto !important;
}

}

Un Saludo

Respondido : 19/10/2024 7:19 pm
Victor
 Victor
Usuario experto

@karen Perdona, ahora he comprobado el primer código y el funcionamiento es el correcto fuera del constructor.

{54C4FE7A 00D8 4DE7 A201 4984DD848B0D}

Me siguen saliendo los dos puntitos que te indico en la imagen que creo que son los dos puntos que tiene cada atributo o cada columna en el encabezado, ya solo salen en tamaños móviles. Lo que veo es que la imagen que sale ahora en el modo tablet y escritorio es excesivamente grande. He modificado el código donde limite el tamaño de la imagen pongamos 200px -200px para todos los modales, ahora existe la posibilidad que se ajuste centrada en el espacio donde se aloja la imagen? 

 

Respondido : 20/10/2024 12:03 am

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Victor, 

Estos puntos puedes eliminarlos con el siguiente codigo CSS

@media only screen and (max-width: 767px) {
.et_pb_wc_cart_products_0_tb_body table.cart th, .et_pb_wc_cart_products_0_tb_body.et_pb_row_layout_vertical table.shop_table_responsive tr td::before, .et_pb_wc_cart_products_0_tb_body.et_pb_row_layout_default table.shop_table_responsive tr td::before {
display:none;
}
}

Para centear la imagen puedes probar el siguiente codigo CSS

td.product-thumbnail {
display: flex !important;
justify-content: center;
}

Verificalo y nos comentas como vatodo

Un Saludo

Respondido : 20/10/2024 2:04 am
Victor
 Victor
Usuario experto

@karen. Muchisimas gracias Karen. Dais un servicio muy muy bueno. Ya ha quedado todo perfecto. He modificado un poco tu fragmento porque para quitar los puntos el resto de atributos también se quitaba y solo era necesario quitar el de la imagen. Dejo por aquí el código final. Poco a poco voy comprendiendo esto de las css. Muchas gracias por la ayuda.

 

@media only screen and (max-width: 767px) {
.et_pb_wc_cart_products_0_tb_body table.cart th, .et_pb_wc_cart_products_0_tb_body.et_pb_row_layout_vertical table.shop_table_responsive tr td.product-thumbnail::before, .et_pb_wc_cart_products_0_tb_body.et_pb_row_layout_default table.shop_table_responsive tr td.product-thumbnail::before {
display:none;
}
}

 

Respondido : 20/10/2024 8:09 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Victor.

¡Excelente! Me alegra saber que has podido solucionarlo 😀

Recuerda que estamos a tu disposición para cualquier otra consulta o ayuda que necesites.

 

Un Saludo

Respondido : 20/10/2024 10:59 am