WooCommerce: Cómo poner la imagen destacada arriba y a ancho completo

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…

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

3 comentarios en “WooCommerce: Cómo poner la imagen destacada arriba y a ancho completo”

  1. Gonzalo de la campa

    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!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido