Para usar este código en Code Snippets:
- Ve a Code Snippets > Add New
- Copia y pega todo el código anterior
- Dale un título como "WooCommerce Proportional Images"
- Asegúrate de que la opción "Run snippet everywhere" está seleccionada
- Guarda y activa el snippet
El código:
- Mantiene las imágenes proporcionales en toda la tienda
- Usa una proporción 1:1 (cuadrada) por defecto
- Aplica a productos en tienda, relacionados, widgets y galería
- Centra las imágenes automáticamente
Personalizaciones comunes:
- Para cambiar la proporción, modifica el valor de
padding-bottom(100% es 1:1, 75% es 4:3, etc.) - Para cambiar el tamaño de las imágenes en widgets, modifica los valores de
widthyheighten el selector correspondiente - Para que las imágenes se ajusten diferente, cambia
object-fit: coveracontain - Para cambiar el tamaño base de las imágenes, modifica los valores en la función
wc_proportional_images_modify_sizes
/**
* Title: WooCommerce Proportional Images
* Description: Mantiene las imágenes de WooCommerce proporcionales en tienda, widgets y productos relacionados.
* Priority: 10
* Tags: woocommerce, images, product, shop
*/
if (!defined('ABSPATH')) {
exit;
}
// Agregar CSS personalizado
function wc_proportional_images_custom_css() {
?>
<style>
/* Contenedor de imagen principal en tienda */
.woocommerce ul.products li.product .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%; /* Ratio 1:1 por defecto */
overflow: hidden;
background-color: #f8f8f8;
}
/* Imagen dentro del contenedor */
.woocommerce ul.products li.product .image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Productos relacionados */
.related.products .image-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.related.products .image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
}
/* Widgets */
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
float: left;
margin-left: 0;
width: 80px;
height: 80px;
object-fit: cover;
}
/* Imagen principal del producto */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: contain;
}
/* Galería de miniaturas */
.woocommerce div.product div.images .flex-control-thumbs li {
position: relative;
width: 23%;
height: 0;
padding-bottom: 23%;
overflow: hidden;
margin: 1%;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<?php
}
add_action('wp_head', 'wc_proportional_images_custom_css');
// Modificar tamaños de imagen por defecto
function wc_proportional_images_modify_sizes($size) {
return array(
'width' => 400,
'height' => 400,
'crop' => 1,
);
}
add_filter('woocommerce_get_image_size_thumbnail', 'wc_proportional_images_modify_sizes');
add_filter('woocommerce_get_image_size_single', 'wc_proportional_images_modify_sizes');
add_filter('woocommerce_get_image_size_gallery_thumbnail', 'wc_proportional_images_modify_sizes');
// Agregar contenedor de imagen
function wc_proportional_images_open_container() {
echo '<div class="image-wrapper">';
}
add_action('woocommerce_before_shop_loop_item_title', 'wc_proportional_images_open_container', 9);
// Cerrar contenedor de imagen
function wc_proportional_images_close_container() {
echo '</div>';
}
add_action('woocommerce_before_shop_loop_item_title', 'wc_proportional_images_close_container', 11);