Avisos
Vaciar todo
Buenas tardes:
He añadido código CSS para modificar el tamaño de la imagen de los productos de mi catálogo, en una previsualización que se realiza en WordPress, aparece bien, pero al entrar en la web, se modifica el alto de la caja que contiene la imagen, pero el ancho no, quedan dos espacios laterales.
Adjunto capturas de pantalla con las dos visualizaciones.
Supongo que me falta por añadir algo más al código, quedo a la espera de vuestras noticias.
El código añadido es:
.woocommerce div.product div.images img{
max-width: 346px; max-width: 346px; margin: auto
}
Un saludo.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 12/05/2018 4:59 pm
Hola Ana Belén,
Las imágenes de productos de WooCommerce deberías modificarlas (los tamaños) desde el plugin y no por CSS, porque eso te traerá posiblemente problemas de comportamiento visual de las mismas (responsive).
Vete en la administración de WordPress a WooCommerce, Ajustes, pestaña Productos. Ahora pulsa en el enlace Mostrar. En la parte inferior verás el apartado Imágenes del producto. Ahí es donde debes configurar los tamaños.
Lo explico en este artículo de forma general para las imágenes de WordPress:
- Imágenes en WordPress ¡gestionando los tamaños correctos! - https://www.webempresa.com/blog/imagenes-en-wordpress-gestionando-los-tamanos-correctos.html
Saludos
Respondido : 12/05/2018 7:58 pm
Buenas noches:
No me aparece el enlace "Mostrar", adjunto captura de pantalla.
Un saludo.
Respondido : 13/05/2018 12:08 am
Hola Ana Belén,
Las nuevas versiones de WooCommerce han pasado los ajustes de Productos al Personalizador de WordPress:
¿Buscas las opciones de visualización de productos? Las puedes encontrar en el Personalizador.
> Personalizando > WooCommerce > Imágenes de producto
Discúlpa la confusión.
¿Qué tamaños de imágenes genera WooCommerce?
- Imágenes de producto, por defecto a 300x300 pixels
- Imágenes de catálogo, por defecto a 600x600 pixels
- Miniaturas del producto, por defecto a 180x180 pixels
Estos tamaños son independientes de los que genera WordPress en Ajustes, Medios.
Si el tema que usas utiliza unos tamaños para productos diferentes deberías establecerlos en la configuración de Personalizando > WooCommerce > Imágenes de producto para que cuando subas imágenes de productos se adapten a este tamaño.
Si existen imágenes o miniaturas de productos que no se ajustan bien a tu tema entonces tendrás que utilizar el "Inspector de elementos" de tu navegador para editar estilos CSS, hacer pruebas de cambios y luego aplicar los estilos CSS adecuados en tu hoja de estilos del tema style.css (recomendado mejor en un tema hijo).
Luego tendrás que regenerar miniaturas, si aplicaste cambios.
Una opción seria utilizar el plugin Regenerate Thumbnails para regenerar las miniaturas de las imágenes de los productos.
- http://wordpress.org/plugins/regenerate-thumbnails/
Al asignar un nuevo tamaño a las miniaturas, si no se regeneran estas pierden calidad o no se muestran de forma correcta y con este plugin puedes solucionarlo.
Importante:
Haz una copia de seguridad antes de proceder:
- Copias de Seguridad de WordPress con el plugin XCloner: https://www.webempresa.com/blog/item/688-como-clonar-tu-blog-y-gestionar-copias-de-seguridad-en-wordpress-con-xcloner.html
Saludos
Respondido : 13/05/2018 12:29 am
Buenas noches Luis:
Te cuento el por qué quiero cambiar el tamaño de las imágenes. Todas las que he subido a la biblioteca de medios correspondientes al catálogo de productos son de 346x346px, porque la plantilla que utilizaba tenía esa caja para los productos, he actualizado la plantilla de una versión muy antigua a la actual y ahora la caja de los productos es más grande, entonces se pixela un poco la imagen. Cuando suba productos nuevos ya les daré una nueva dimensión, pero para no tener que cambiar todas las imágenes de los productos actuales, había pensado en reducir la caja al tamaño de las imágenes de la biblioteca.
Este es el motivo, qué me aconsejas que haga, ¿como ves actualmente las imágenes?
La configuración que tengo en WooComeerce la adjunto en captura de pantalla.
Gracias, un saludo.
Respondido : 13/05/2018 1:19 am
Hola Ana Belén,
El "atajo" del problema es aplicar el cambio de la caja por CSS, pero ¿es lo recomendado?
Creo que no, porque es un parche, siendo lo recomendable configurar los tamaños de forma correcta en las configuraciones de WooCommerce (en el Personalizador) y luego "regenerar miniaturas" para que se muestren las imágenes al tamaño adecuado.
Se entiende que las imágenes actuales (las que están asociadas a productos) tienen como mínimo el tamaño al que las quieres ajustar, y no menor, porque sino seguirán apareciendo pixeladas.
Además, asegúrate de subirlas en formato PNG para evitar "artefactos" en las imágenes.
> https://es.wikipedia.org/wiki/Artefacto_de_compresi%C3%B3n
Saludos
Respondido : 13/05/2018 1:24 am
Hola Luis:
Las imágenes las subo en formato .jpg por que pesan menos, por su calidad ya sé que es mejor PNG, ¿me aconsejas entonces subirlas todas en este formato y el resto de imágenes de las de la web también?. En un curso de WordPress que realicé siempre nos decían que utilizaramos el formato jpg para todas, salvo que no tengan que llevar fondo o cosas muy puntuales, y así la carga de web sería más rápida.
Quedo a la espera de tus noticias al respecto.
Gracias una vez más, un saludo.
Respondido : 13/05/2018 1:42 am
Hola Ana Belén,
Si te recomiendo subirlas en PNG (para evitar artefactos) y luego optimizarlas por ejemplo con optimizador.io de forma que reduzcas su peso pero no su calidad.
Lo explico en este artículo:
https://www.webempresa.com/wordpress/como-mejorar-velocidad-wordpress.html#formatosimagenesinternet
Saludos
Respondido : 13/05/2018 1:51 am
