Configurar tamaño de imagen y regenerar imágenes en woocommerce  

Hola

Ten en cuenta que una cosa es el tamaño real, y otra es el tamaño en el que se muestra tu imagen.

Si no se ha regenerado la imagen físicamente, revisa:
https://decodecms.com/regenerar-imagenes-de-miniaturas-en-wordpress/
https://www.webempresa.com/blog/imagenes-en-wordpress-gestionando-los-tamanos-correctos.html

Luego si quieres ver tu imagen más pequeña, posiblemente tengas que usar CSS, envíanos la url exacta para ver en donde aparece la imagen a la que quieres cambiar el tamaño

Saludos.

Buenas tardes,

Necesito cambiar el tamaño de la imagen del producto:

http://informaticapavon.net/desarrollo/roviandre/?product=silla-con-brazo-maron-burdeos

Aparece muy grande. Adjunto imagen.

He instalado este plugin:

https://www.webempresa.com/blog/imagenes-en-wordpress-gestionando-los-tamanos-correctos.html

pero cuando busca el ancho de la imagen en ese plugin no me aparece, entonces no se de donde coge esas dimensiones.

Gracias.

Espero noticias.

Un saludo, EP

Hola Enrique.

Añade lo siguiente a tu archivo de estilos:

.woocommerce div.product div.images img {
    width: 60%;
}

Puedes variar el valor del % para adaptarlo a tus necesidades.

Un saludo

Buenas tardes Pepe,

He añadido varios estilos, además, he intentado colocar la imágen en el centro del recuadro pero no hay manera.

Las miniaturas de más abajo, ¿se les puede ampliar un poco el tamaño?

http://informaticapavon.net/desarrollo/roviandre/?product=silla-con-brazo-maron-burdeos

y por último, ¿como podemos mejorar la apareciencia de los productos relacionados? Estan uno más grandes que otros y se ve bastante mal.

Gracias.

Un saludo, EP

Hola Enrique.

he intentado colocar la imágen en el centro

Puedes probar con esto:

.woocommerce-product-gallery__image img {
  margin-left: 25%;
}

¿se les puede ampliar un poco el tamaño?

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 50%;
}

Un saludo

Hola

Con respecto a los productos relacionados, hay un código que tienes

.related.products li{
width:auto!important;
}

Elimina este código, ya que es posible que lo hayas agregado a los archivos de tu theme.

Saludos.

Buenas tardes Jhon,

Porque aparece una miniatura tan separada de la otra?

No localizo el código que tengo que quitar de los productos relacionados. He mirado en los estilos css dentro del theme en el backoffice y a través del FTP pero no está. ¿Se puede eliminar de alguna otra manera?

Muchas gracias.

Saludos, EP

Buenas tardes,

Si aparecen 4 miniaturas, las miniaturas se dividen en dos líneas. Nos gustaría que más o menos quedara como adjuntamos en la captura de pantalla. ¿Sería posible?

Gracias.

Un saludo,

Hola

Revisa en si tienes código CSS en : Themes > Personalizador > CSS

Verifica si tienes este código:

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 50%;
}

Elimina o comenta este código

Saludos.

Buenos días,

Lo acabo de eliminar. Las miniaturas aparecen más pequeñas y separadas.

http://informaticapavon.net/desarrollo/roviandre/?product=silla-con-brazo-maron-burdeos

Si ves más abajo los productos relacionados, se ven fatal. Muy desordenados y la estructura de los mismos rota. Adjunto captura de pantalla.

¿No se puede ajustar o forzar para que tengan todas el mismo tamaño, aunque no se vea la foto completa hasta que no entres dentro del producto?

Gracias.

Espero noticias.

Saludos, EP

Hola Enrique.

Estoy revisando la web y veo que esta realizando modificaciones en el apartado productos relacionados ( Estamos trabajando los dos a la vez ) :S

Deja como lo tenias y prueba añadir el siguiente código:

.woocommerce ul.products li.product a img {
    width: auto;
    max-height: 450px;
}

Un saludo

Buenas tardes,

Los productos relacionados siguen sin aparecer correctamente.

Adjunto captura de pantalla.

De mientras que solucionamos el tema, ¿como podríamos des-publicar esta parte?

Gracias.

Un saludo, EP

Hola

Tienes este código:

Has agregado código adicional CSS?

.related.products li {
 width:auto !important;
}

El problema es que si usas este código con !important y no funcionará correctamente, desconozco en donde has puesto este código, pero la idea sería eliminarlo para que tome el estilo por defecto del theme.

Saludos.

Buenas tardes Jhon,

He revisado el código que tenemos configurado en el theme y tenemos esto:

#woo_catalog .modal-footer button {background: black;}

#woo_catalog .modal-header button.close {background: black;}

.box2, .box3 {#990415 !important}

.rt-block h2.title {margin: -5px -16px 15px -16px;
    padding: 10px 15px !important;
    border-radius: 4px; background: #cb051c;}

.box2, .box3 {background: #990415 !important;}
.rt-block h2.title {color: white !important;}
#rt-footer .title {padding: 5px !important; font-size: 14px;}
.woocommerce div.product div.images img {
    width: 60%;
    border: 1px solid #D9D9D9;
    padding: 3px;
    border-radius: 3px;
}
.woocommerce-product-gallery__image img {
  margin-left: 25%;
}
.woocommerce ul.products li.product a img {
    width: auto;
    max-height: 450px;
}

¿Donde debo de encontrar este código?

Gracias.

Saludos, EP