[Resolved] Miniaturas de imágenes a la izquierda (WooCommerce)

[Pedro]

Hola,

Me gustaría mover las miniaturas del producto a la izquierda.

Actualmente se encuentra así: https://mega.nz/file/XoF1kI7K#4g4_xkDwM4kDKCl7g48VpDCEjGne5ZweG2f6xK2NnPM

Y me gustaría que se viera algo así: https://mega.nz/file/v1MXjS5B#QkLvycywGbQdOplHy0jI_-FRF_NCNcQpe5XgSHsFUgg

¿Podrían ayudarme con esto?

[Elvin]

Hi there,

Try adding this CSS:

body.single-product .flex-viewport {
    order: 3;
}

body.single-product ol.flex-control-nav.flex-control-thumbs {
    order: 2;
    flex-direction: column;
    display: flex;
    flex: 1 0 20%;
}

body.single-product .woocommerce-product-gallery {
    display: flex;
    flex-direction: row;
}

body.single-product .woocommerce div.product div.images .flex-control-thumbs li {
    max-width: 100% !important;
    width: 100%;
}

[Pedro]

Hola Elvin,

El código funcionó, sin embargo las miniaturas quedan extremadamente pequeñas.

Me gustaría que se vieran como el ejemplo que mostré antes.

De igual forma, el código también se aplica en móvil.

Solo quisiera que sea válido para la versión escritorio.

Aquí un ejemplo del resultado: https://mega.nz/file/ahM1XSSB#5RTleK-hHire6E1uyP0Ul9LyzkVQ34n-uH9KkbVuJ4M

[David]

Hi there,

although the method that Elvin provides, it can cause issues with the sizing of the Carousel images on initial load, especially if the various product images are of different sizes.

If you can provide a link to the single product with Elvins CSS applied i can take a look at changing the sizing – but please note the above issues that may arise

[Pedro]

Hola David,

En el siguiente enlace puedes ver la página de producto: https://raybasics.co/camisetas/camiseta-basica-cuello-redondo/

[David]

Can you disable the Cache plugin so i can see why Elvins CSS is not working correctly.

[Pedro]

Hola David,

Ya he deshabilitado el plugin de caché.

[David]

Try this CSS instead:

@media(min-width: 769px) {
    body.single-product .flex-viewport {
        order: 3;
    }

    body.single-product ol.flex-control-nav.flex-control-thumbs {
        order: 2;
        flex-direction: column;
        display: flex;
        flex: 1 0 20%;
    }

    body.single-product .woocommerce-product-gallery {
        display: flex;
        flex-direction: row;
    }
    .woocommerce.single-product div.product div.images .flex-control-thumbs li {
        width: 100%;
    }
}

[Pedro]

Hola David,

Funcionó perfectamente.

Solo una última cosa, ¿Es posible que las miniaturas tengan el tamaño correcto de la imagen y no las recorte?

Te recomiendo revisar esta imagen de ejemplo: https://mega.nz/file/v1MXjS5B#QkLvycywGbQdOplHy0jI_-FRF_NCNcQpe5XgSHsFUgg

¡Gracias!

[Pedro]

Hola David,

Estaré atento a tu respuesta.

¡Gracias!

[David]

Woo provides this doc on how to change its image sizes here:

https://docs.woocommerce.com/document/image-sizes-theme-developers/#section-3

The function you need is the first on below that link ie.

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

Take note of their note – about regenerating thumbnails after changing them.

[Pedro]

Hola David,

Funcionó, muchas gracias.

Solo algo más, puedes ayudarme a reducir el margen o relleno que hay entre las miniaturas y la imagen principal?

Es que siento que es muy exagerado, algo como el ejemplo que te envié antes: https://mega.nz/file/v59wTJoD#j9B5Ht3JSb5D9EPxd_HYQlQsrG-WX7BiNczGM5wDEYw

También, la primera miniatura no está alineada con la imagen principal en la parte superior.

Eso es todo, gracias!

[Elvin]

Can you specify which view do you want to adjust? Is it for mobile only?

You can play around with this CSS selector’s properties.

.woocommerce.single-product div.product div.images .flex-control-thumbs li

Currrently, you have margin-bottom, padding-top and padding-right.

You can change it to this to completely remove it. (Or play around with the value to your preference.

.woocommerce.single-product div.product div.images .flex-control-thumbs li{
margin: 0;
padding: 0;
}

And if you want a separate value for mobile and for desktop, use @media rule.

Example:

@media(min-width:769px){
.woocommerce.single-product div.product div.images .flex-control-thumbs li{
margin: 0 0 0 5px;
padding: 5px 5px 0 0;
}
}

@media(max-width:768px){
.woocommerce.single-product div.product div.images .flex-control-thumbs li{
margin: 0;
padding: 0px 5px 0 0;
}
}

[Pedro]

Hola Elvin,

Ya pude hacerlo solo editando esta parte:

body.single-product ol.flex-control-nav.flex-control-thumbs {
flex: 1 0 20%;
}

Cambié el valor de 20% a 15% y se redujo el espacio.

¡Muchas gracias a ustedes!

[Elvin]

Nice one. Glad you got it sorted. 😀

[Author]

Posts