Avisos
Vaciar todo
Buenas tardes, me gustaría de su ayuda para un problema que estoy teniendo con la página de productos en WordPress y es que la imagen del producto principal se muestra sin problemas pero la galería de imágenes del producto, sólo se muestra en móvil y no en laptops o pc´s, he revisado los códigos y otras configuraciones y veo todo perfectamente. Podrían ayudarme a encontrar el problema para que la galería se vea en laptops y pcs también?
Comparto el enlace del dominio y un producto de ejemplo para que puedan confirmar el error: https://hosting61186us-cp538.wordpresstemporal.com/fondegala/producto/puerta-70-x-200-para-cocina-de-chapa-inyectada-1-2-reja-postigo-abrir-d/
Muchas gracias.
Contenido solo visible a usuarios registrados
Respondido : 29/04/2025 11:56 pm
Que tal Diego,
Segun comprendo estos thumbnails son los que no te aparecen en la vista de escritorio es correcto?
Revisando el producto desde el inspector de elementos del navegador he podido apreciar que la sección con las miniaturas se ajusta de forma absoluta en desktop por lo que usando unos pocos estilos CSS podemos hacer que se vea como la captura que he compartido
Desde los ajustes de Divi o desde el apartado de Apariencia -> Personalizar -> CSS agregado podemos añadir lo siguiente
@media screen and (min-width: 981px) {
.woocommerce div.product div.dfw-10-woo-image .flex-control-thumbs {
position: relative !important;
display: flex;
top: 0;
right: initial !important;
width: 100% !important;
margin-top: 0;
}
}
Prueba y nos comentas
Saludos!
Respondido : 30/04/2025 12:40 am
Diego me gusta
@bruno-vichetti ha funcionado pero hay un problema, en móvil se ve con los espacios entre la imagen principal y la galería perfectamente pero en laptop y pc se ve todo pegado, cómo puedo hacer para que la galería no esté tan pegada a la imagen principal y que en galería las imagenes no estén tan pegadas a los lados sino que tengan un pequeño espacio similar a como se ve en responsive?
Respondido : 30/04/2025 4:26 am
Hola Diego.
Revisa si es esto lo que buscas:
@media (min-width: 780px) {
.woocommerce-product-gallery .flex-viewport {
margin-bottom: 1em;
}
.woocommerce div.product div.images .flex-control-thumbs li {
margin-right:1em!important;
}
}
Un saludo
Respondido : 30/04/2025 9:41 am
Diego me gusta
Hola Diego,
Entiendo que ya hemos podido resolver el motivo de tu consulta, por lo que la marcaremos como resuelta
Cualquier otra duda que tengas estaremos atentos para ayudarte
Saludos!
Respondido : 30/04/2025 5:28 pm
