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…

La entrada WooCommerce: Cómo poner la imagen destacada arriba y a ancho completo la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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