Dimensione personalizzata delle immagini in Woocommerce

Ci sono alcune opzioni tra cui scegliere quando si modificano le dimensioni delle immagini. Cambiare le immagini predefinite di WooCommerce è più difficile rispetto a un'installazione normale di WordPress poiché sono integrate con il plugin.

Modificare le dimensioni delle immagini dei prodotti correlati:

Ho testato questo metodo e sembra funzionare solo sui prodotti correlati (anche se sono sicuro che potrebbe essere espanso ad altre aree). Potresti ancora aver bisogno di usare Regenerate Thumbnails per ottenere le dimensioni corrette.

Dobbiamo inserire tutto in un filtro wp:

function woo_init() {
    // Le funzioni seguenti vanno qui...
}
add_action( 'wp', 'woo_init' );

Sono riuscito a saltare la prima parte di questo, impostando la variabile di query e funzionava comunque, ma poiché utilizza un template generico content-product.php non mi fiderei, quindi imposteremo una variabile di query per assicurarci di modificare solo la dimensione dell'immagine per i prodotti correlati:

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;
    } );
}

Successivamente dobbiamo rimuovere l'azione predefinita loop_product_thumbnail e sostituirla con una nostra. Verifichiamo che la variabile di query related_products sia impostata e TRUE prima di servire la nostra nuova immagine, altrimenti serviamo l'immagine predefinita.

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 );    // La nostra nuova dimensione dell'immagine
        } else {
            echo woocommerce_get_product_thumbnail();   // Dimensione predefinita dell'immagine
        }
    },
    10
);

CSS

WooCommerce utilizza width: 100%; height: auto; su tutte le immagini. Potresti cambiarlo in max-width: 100%; width: auto; height: auto; e giocare con i margini / numero di colonne per ottenere l'aspetto desiderato.

Cambiare le dimensioni iniziali delle immagini

Puoi cambiare le dimensioni effettive delle immagini utilizzate da WooCommerce seguendo questi passaggi:

• Accedi a WordPress
• Vai su WooCommerce -> Scheda Prodotti -> Visualizzazione (Sottoscheda)
• Verso il fondo puoi impostare le dimensioni delle immagini per:
  • Immagini del catalogo
  • Immagine del prodotto singolo
  • Miniature dei prodotti
• Infine, puoi installare Regenerate Thumbnails per ottenere le nuove dimensioni.

Un altro metodo è impostare queste dimensioni durante l'installazione:

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
    );

    // Dimensioni delle immagini
    update_option( 'shop_catalog_image_size', $catalog );       // Miniature delle categorie di prodotti
    update_option( 'shop_single_image_size', $single );         // Immagine del prodotto singolo
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Miniature della galleria immagini
}

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

Link di riferimento per WooCommerce:

• Utilizzare dimensioni appropriate per evitare distorsioni / pixelation
• Impostare le dimensioni delle immagini di WooCommerce all'attivazione del tema
• Funzione woocommerce_get_product_thumbnail