Tamaño de imagen personalizado para Woocommerce

Existen algunas opciones que puedes elegir al cambiar los tamaños de imágenes. Cambiar las imágenes predeterminadas de WooCommerce es más difícil que en una instalación normal de WordPress, ya que están integradas en el plugin.

Modificar los tamaños de imágenes de productos relacionados:

He probado esto y parece funcionar solo en productos relacionados (aunque estoy seguro de que podría expandirse a otras áreas). Es posible que aún necesites aprovechar Regenerar miniaturas para obtener los tamaños correctos.

Necesitamos poner todo en un filtro wp:

function woo_init() {
    // Las funciones siguientes van aquí...
}
add_action( 'wp', 'woo_init' );

Pude omitir la primera parte de esto, estableciendo la variable de consulta y aún así funciona, pero como usa una plantilla genérica content-product.php no confiaría en ello, así que estableceremos una variable de consulta para asegurarnos de que solo cambiamos el tamaño de imagen para productos relacionados:

if( is_singular( 'product' ) ) {
    add_filter( 'woocommerce_related_products_args', function( $query_args ) {
        if( ! empty( $query_args ) ) {
            set_query_var( 'related_products', true );
        }

        return $query_args;
    } );
}

A continuación, necesitamos eliminar el loop_product_thumbnail predeterminado y reemplazarlo con nuestro personalizado. Verificamos que la variable de consulta realted_products esté establecida y sea TRUE antes de servir nuestra nueva imagen; de lo contrario, servimos la imagen predeterminada.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title',
    function() {
        $related = get_query_var( 'related_products' );
        if( TRUE == $related ) {
            echo woocommerce_get_product_thumbnail( 'related-thumb', 274, 274 );    // Nuestro nuevo tamaño de imagen
        } else {
            echo woocommerce_get_product_thumbnail();   // Tamaño de imagen predeterminado
        }
    },
    10
);

CSS

WooCommerce usa width: 100%; height: auto; en todas sus imágenes. Podrías cambiar esto a max-width: 100%; width: auto; height: auto; y jugar con los márgenes / número de columnas para obtener el aspecto deseado.

Cambiar los tamaños de imagen iniciales

Puedes cambiar los tamaños de imagen que WooCommerce usa siguiendo estos pasos:

• Inicia sesión en WordPress
• Navega a WooCommerce -> Pestaña Productos -> Mostrar (Subpestaña)
• Hacia la parte inferior puedes establecer los tamaños de imagen para:
  • Imágenes de catálogo
  • Imagen de producto único
  • Miniaturas de producto
• Finalmente, puedes instalar Regenerar miniaturas para obtener los tamaños cambiados.

Otro método es tener estos tamaños al instalar:

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }

    $catalog = array(
        'width'     => '400',   // px
        'height'    => '400',   // px
        'crop'      => 1        // true
    );

    $single = array(
        'width'     => '600',   // px
        'height'    => '600',   // px
        'crop'      => 1        // true
    );

    $thumbnail = array(
        'width'     => '120',   // px
        'height'    => '120',   // px
        'crop'      => 0        // false
    );

    // Tamaños de imagen
    update_option( 'shop_catalog_image_size', $catalog );       // Miniaturas de categoría de producto
    update_option( 'shop_single_image_size', $single );         // Imagen de producto único
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Miniaturas de galería de imágenes
}

add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );

Enlaces de referencia de WooCommerce:

• Usar dimensiones de imagen apropiadas para evitar distorsión / pixelación
• Establecer dimensiones de imagen de WooCommerce al activar el tema
• Función woocommerce_get_product_thumbnail