[Resolved] Imágenes miniatura en galería de producto

[Pedro]

Hola,

Me gustaría hacer algunos cambios en la galería de producto de WooCommerce, los cambios serían:

– Reducir el tamaño de las miniaturas
– Centrar las miniaturas

Algo como lo hace AliExpress: https://mega.nz/file/29tQwKjT#Fxiw1i2B79lWbmWEmouu6yDXFs5pAgMVhx-o-DAOVbo

Espero que por favor me ayuden.

¡Gracias!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Pedro]

Hola Leo,

En el siguiente enlace puedes ver un producto de mi sitio:

https://www.rebajaslocas.com/hogar-y-cocina/bolsas-con-cierre-para-refrigerios/

¡Gracias!

[David]

Hi there,

you can try this CSS:

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  justify-content: center;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: unset;
  padding: 5px;
  max-width: 60px;
}

Check carefully as this CSS may have unexpected consequences on the the carousel behaviour.

[Pedro]

Hola David,

El código funcionó perfectamente, aunque no deseo que se aplique en móviles. Solo en escritorio.

¿Podrías ayudarme con esto?

¡Gracias!

[Leo]

You can wrap David’s code in the desktop media query here:
https://docs.generatepress.com/article/responsive-display/

[Pedro]

Hola Leo,

Podrías ayudarme con ese código? Yo la verdad no soy diseñador y no tengo idea de cómo hacerlo.

¡Gracias!

[Pedro]

Hola Leo,

Si quiero que el código que David me dio solo funcione para escritorio y tablets, el código sería así?

@media (min-width: 1025px) {
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  justify-content: center;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: unset;
  padding: 5px;
  max-width: 60px;
}
}

[Leo]

I would go with this:

@media (min-width: 769px) {
    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        justify-content: center;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: unset;
        padding: 5px;
        max-width: 60px;
    }
}

[Pedro]

Muchas gracias Leo y David!

[Leo]

No problem 🙂

[Author]

Posts