Por defecto, WooCommerce muestra la imagen destacada de los productos a la izquierda del precio, descripción breve y botón de añadir al carrito.
Esta configuración, aunque muy práctica, porque permite en ordenadores ver todo lo fundamental del producto, no siempre es a gusto de todos.
Si prefieres que la imagen destacada esté encima de las características, precio y botón de la página del producto, y a ancho completo, para darle más presencia al producto, es fácil conseguirlo.
Solo tienes que añadir el siguiente código desde Personalizar > CSS adicional:
/* Imagen destacada de producto arriba */
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: none;
width: 100%;
max-width: unset;
clear: both;
}
.woocommerce-product-gallery img {
width: 100%;
}Guarda los cambios y ya está, mira el cambio, es inmediato…
Si te fijas en la animación el producto de ejemplo tiene galería de imágenes, que también se sitúan sobre el precio y demás elemento del producto.
Pasas de esto…
A esto otro…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Excelente aportación!
Me gusta más este formato que el de Woocomerce.
Saludos.
Bueno… esto si no usas Divi que con el Generador de Temas lo diseñas sin código como quieras 😉
Un fuerte abrazo amigo!! que sepas que me leo todoooos los post cada día!
Nos vemos pronto!!
gracias por la aportacion ya puedo mejorar la vision del blog