Dimensiune personalizată pentru imagini în Woocommerce

Există câteva opțiuni pe care le poți alege atunci când modifici dimensiunile imaginilor. Schimbarea imaginilor implicite WooCommerce este mai dificilă decât într-o instalare WordPress obișnuită, deoarece acestea sunt integrate în plugin.

Modificarea dimensiunilor imaginilor pentru produsele similare:

Am testat acest lucru și pare să funcționeze doar pentru produsele similare (deși sunt sigur că poate fi extins și în alte zone). Poate fi necesar să folosești Regenerate Thumbnails pentru a obține dimensiunile corecte.

Trebuie să includem totul într-un filtru wp:

function woo_init() {
    // Funcțiile de mai jos vor fi aici...
}
add_action( 'wp', 'woo_init' );

Am reușit să omit prima parte, setarea variabilei de interogare, și totuși să funcționeze, dar deoarece folosește un șablon generic content-product.php, nu aș avea încredere în această abordare. Așadar, vom seta o variabilă de interogare pentru a ne asigura că modificăm dimensiunea imaginii doar pentru produsele similare:

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

În continuare, trebuie să eliminăm acțiunea implicită loop_product_thumbnail și să o înlocuim cu una personalizată. Testăm dacă variabila de interogare related_products este setată și este TRUE înainte de a afișa noua imagine, altfel afișăm imaginea implicită.

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 );    // Noua dimensiune a imaginii
        } else {
            echo woocommerce_get_product_thumbnail();   // Dimensiunea implicită a imaginii
        }
    },
    10
);

CSS

WooCommerce folosește width: 100%; height: auto; pentru toate imaginile. Poți modifica acest lucru în max-width: 100%; width: auto; height: auto; și să ajustezi marginile / numărul de coloane pentru a obține aspectul dorit.

Modificarea dimensiunilor inițiale ale imaginilor

Poți modifica dimensiunile reale ale imaginilor folosite de WooCommerce urmând pașii de mai jos:

• Autentifică-te în WordPress
• Navighează la WooCommerce -> Produse -> Afișare (submeniu)
• În partea de jos poți seta dimensiunile imaginilor pentru:
  • Imagini din catalog
  • Imaginea produsului individual
  • Miniaturile produselor
• În final, poți instala Regenerate Thumbnails pentru a obține dimensiunile modificate.

O altă metodă este să setezi aceste dimensiuni la instalare:

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

    // Dimensiunile imaginilor
    update_option( 'shop_catalog_image_size', $catalog );       // Miniaturi pentru categoriile de produse
    update_option( 'shop_single_image_size', $single );         // Imaginea produsului individual
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Miniaturi pentru galeria de imagini
}

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

Link-uri de referință WooCommerce:

• Utilizarea dimensiunilor adecvate ale imaginilor pentru a evita distorsiunile / pixelarea
• Setarea dimensiunilor imaginilor WooCommerce la activarea temei
• Funcția woocommerce_get_product_thumbnail