Quali sono le tre dimensioni immagine dei prodotti WooCommerce?

WooCommerce registra woocommerce_thumbnail per il catalogo e la griglia del negozio, woocommerce_single per l'immagine grande nella pagina prodotto e woocommerce_gallery_thumbnail per la piccola striscia di miniature sotto l'immagine principale. Ogni foto prodotto che carichi genera tutte e tre, oltre alle dimensioni standard di WordPress come thumbnail, medium, medium_large e large.

Dove si cambiano le dimensioni delle immagini prodotto in WooCommerce?

Vai su Aspetto, poi Personalizza, poi WooCommerce, poi Immagini prodotto. Trovi la larghezza dell'immagine principale, la larghezza della miniatura e la scelta del ritaglio della miniatura fra 1:1, personalizzato o senza ritaglio. Se i campi della larghezza non ci sono e vedi solo il ritaglio, il tema attivo ha dichiarato larghezze fisse nel codice e il customizer le sta nascondendo di proposito.

Perché le immagini del mio catalogo WooCommerce sono ritagliate male?

La miniatura del catalogo esegue di default un ritaglio rigido a quadrato, tagliando a partire dal centro della foto. Qualsiasi scatto in cui il prodotto è decentrato o riempie il fotogramma da bordo a bordo perde le estremità. Passa il ritaglio della miniatura a senza ritaglio, oppure rifai gli scatti aggiungendo margini uniformi alle immagini sorgente, così che un ritaglio quadrato centrale contenga comunque tutto il prodotto.

Perché non riesco a cambiare la larghezza dell'immagine principale nel mio tema?

Il tema ha passato larghezze fisse quando ha dichiarato il supporto a WooCommerce, e questo dice a WooCommerce di togliere quei controlli dal customizer. È voluto, perché il CSS del tema è costruito attorno a quelle esatte larghezze in pixel. Puoi sovrascriverle con un filtro in un tema child, ma il layout del prodotto potrebbe poi richiedere aggiustamenti CSS per adeguarsi.

Che dimensioni devono avere le immagini prodotto WooCommerce?

Carica immagini sorgente quadrate grandi circa il doppio della tua larghezza di visualizzazione maggiore, quindi 1200 per 1200 pixel per un'immagine principale da 600 pixel, e mantieni ogni prodotto coerente. WordPress non ingrandisce mai, quindi una sorgente più piccola della larghezza configurata non produce alcun file a quella dimensione e il browser ne stira uno più piccolo al suo posto.

Dimensioni delle immagini prodotto WooCommerce: le tre misure e come cambiarle davvero

Q: Devo rigenerare le miniature dopo aver cambiato le dimensioni immagine di WooCommerce?

Sì. Cambiare l'impostazione modifica solo ciò che viene generato per i caricamenti futuri, quindi ogni prodotto esistente continua a servire i vecchi file finché non li ricostruisci. WooCommerce avvia una rigenerazione in background quando salvi il customizer, ma sui cataloghi grandi è più lenta e meno affidabile che eseguire la rigenerazione da te con WP-CLI.

WooCommerce genera tre dimensioni immagine per ogni foto prodotto che carichi, e solo due sono modificabili dalla bacheca di WordPress. woocommerce_thumbnail è l’immagine della griglia del catalogo, woocommerce_single è l’immagine grande nella pagina prodotto e woocommerce_gallery_thumbnail è la piccola striscia di miniature sotto di essa. Le cambi da Aspetto > Personalizza > WooCommerce > Immagini prodotto — e se quel pannello ti mostra un menu a tendina per il ritaglio ma nessun campo per la larghezza, il tuo tema ha bloccato le larghezze nel codice di proposito.

Le tre dimensioni

Nome dimensione	Dove compare	Ritaglio	Modificabile nel customizer
`woocommerce_thumbnail`	Pagina negozio, griglie di categoria, prodotti correlati, cross-sell	Ritaglio rigido a quadrato di default	Larghezza e proporzione
`woocommerce_single`	Immagine principale nella pagina del singolo prodotto	Senza ritaglio — mantiene le proporzioni originali	Solo larghezza
`woocommerce_gallery_thumbnail`	Piccola striscia sotto l’immagine principale del prodotto	Quadrato con ritaglio rigido	No

Queste si aggiungono alle dimensioni standard di WordPress. Una singola foto prodotto produrrà tipicamente thumbnail, medium, medium_large, large, le tre dimensioni WooCommerce ed eventuali extra registrate dal tuo tema con add_image_size. Sono parecchi file per ogni caricamento, ed è il motivo per cui l’importazione di 300 prodotti richiede così tanto tempo.

La miniatura della galleria è quella che sorprende: non ha alcun controllo in bacheca. In un’installazione predefinita è un piccolo quadrato, storicamente da 100px, ed è la dimensione con più probabilità di apparire poco nitida su uno schermo retina, perché il file fisico è davvero minuscolo.

Dove stanno davvero le impostazioni

Aspetto > Personalizza > WooCommerce > Immagini prodotto ti offre tre controlli:

Larghezza immagine principale — la larghezza di woocommerce_single. L’altezza è automatica, quindi le proporzioni originali vengono mantenute.
Larghezza miniatura — la larghezza di woocommerce_thumbnail.
Ritaglio della miniatura — 1:1 (quadrato, il default), Personalizzato (scrivi tu una proporzione come 4:3) oppure Senza ritaglio.

Nota cosa manca: non c’è un campo per l’altezza della miniatura del catalogo, perché l’altezza deriva dalla proporzione di ritaglio. E per la miniatura della galleria non c’è proprio nulla.

Prima di cambiare qualsiasi cosa, aiuta vedere esattamente quali derivati produrrà un dato file — trascina una vera foto prodotto nel tool per le dimensioni immagine di WordPress e ottieni l’elenco completo, incluso se la tua sorgente è abbastanza grande da coprire ogni dimensione senza ingrandimenti.

Perché le immagini del catalogo sembrano sbagliate

La miniatura del catalogo esegue un ritaglio rigido a quadrato. Ritaglio rigido significa che WooCommerce prende un quadrato centrale dalla tua foto e butta via il resto — non aggiunge bande nere e non schiaccia. Uno scatto prodotto da 2000x1200 diventa una fetta 1200x1200 presa dal centro, poi rimpicciolita.

Va benissimo per una bottiglia fotografata perfettamente al centro con margine attorno. È un disastro per:

Prodotti lunghi (sci, cavi, bastoni per tende) — vedi il terzo centrale e nient’altro
Composizioni decentrate — il prodotto scivola verso il bordo dell’inquadratura e viene tagliato
Foto in cui l’oggetto riempie il fotogramma da bordo a bordo — sopra e sotto vengono tagliati
Scatti lifestyle con il prodotto in un angolo

Il consiglio più diffuso è “passa il ritaglio a Senza ritaglio”. Funziona, ma va detto onestamente qual è il costo: senza ritaglio ogni miniatura conserva le proprie proporzioni, quindi una griglia di foto con orientamenti misti diventa visivamente irregolare e le righe non si allineano più, a meno che il CSS del tuo tema non gestisca altezze variabili. La maggior parte dei temi dà per scontati i quadrati.

La soluzione migliore, se puoi permettertela, sta a monte: standardizza su foto prodotto quadrate con l’oggetto centrato e margini uniformi. A quel punto un ritaglio rigido quadrato non fa nulla e tutto il resto diventa prevedibile. Cambiare l’impostazione di ritaglio è il rimedio temporaneo; immagini sorgente coerenti sono la vera soluzione.

Quando il tema blocca le larghezze

Se il tuo pannello Immagini prodotto offre solo il ritaglio, il tuo tema ha dichiarato larghezze fisse quando ha registrato il supporto a WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Quando un tema passa quei valori, WooCommerce rimuove i controlli sulla larghezza dal customizer e lascia solo la proporzione. Non è un bug e non è il tema che fa il dispetto — il CSS del layout prodotto del tema è costruito attorno a quelle esatte larghezze in pixel, e lasciartele cambiare romperebbe la griglia.

Puoi sovrascriverle dal functions.php di un tema child usando il filtro per singola dimensione:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Lo stesso schema vale per woocommerce_get_image_size_thumbnail. È anche l’unico modo per cambiare la miniatura della galleria, dato che non ha interfaccia.

Il costo reale, detto chiaramente: sovrascrivere una larghezza bloccata significa che il file generato da WooCommerce non corrisponde più a quello che il CSS del tema si aspetta. Di solito l’immagine si adatta semplicemente nel browser e viene bene, perché ora è più grande del box. A volte il tema ha un contenitore ad altezza fissa e ottieni bande nere o straripamento. Prova su un prodotto prima di rigenerarne 2.000.

Cambiare le dimensioni significa rigenerare

Ogni impostazione di dimensione riguarda solo i nuovi caricamenti. I prodotti esistenti continuano a servire i file generati al momento del loro caricamento, quindi non cambia niente di visibile finché non li ricostruisci.

WooCommerce avvia una rigenerazione in background quando salvi il customizer. Su un catalogo piccolo basta. Su uno grande dipende dal fatto che WP-Cron scatti in modo affidabile, cosa che su un negozio con poco traffico spesso non succede, e ti ritrovi con una libreria rigenerata a metà. Meglio lanciarla da te:

wp media regenerate --yes

Per ricostruire solo le immagini dei prodotti:

wp media regenerate --yes --post_type=product

Se vuoi togliere di mezzo il processo in background mentre lavori a mano:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Due cose che la rigenerazione non farà. Non elimina i vecchi file: la tua cartella dei caricamenti conserva ogni derivato orfano delle impostazioni precedenti, e continuerà a crescere. E non può creare una dimensione più grande della tua sorgente, perché WordPress non ingrandisce. Se imposti la larghezza dell’immagine principale a 1200 ma le tue foto prodotto sono larghe 800px, nessun file da 1200px viene creato; il browser riceve un file da 800px e lo stira, e srcset non ha niente di meglio da proporre.

La dimensione da caricare davvero

Punta a immagini sorgente quadrate grandi circa il doppio della tua larghezza configurata maggiore — 1200x1200 per un’immagine principale da 600px, 1600x1600 se il tuo tema usa 800px. Così copri gli schermi retina 2x e dai a WordPress pixel a sufficienza per costruire ogni derivato senza ingrandimenti. Mantieni ogni prodotto alle stesse dimensioni, così la griglia resta regolare.

Ancora bloccato?

Se le dimensioni sono configurate correttamente, hai rigenerato e un prodotto continua a venire male, apri l’immagine in una nuova scheda e leggi il nome del file. Un suffisso con dimensioni che non corrisponde a nessuna misura da te configurata significa che l’ha registrata qualcos’altro. Nessun suffisso significa che WooCommerce è ripiegato sul file a dimensione piena, il che quasi sempre vuol dire che la sorgente era troppo piccola per la dimensione richiesta. Passa quel file sorgente nel tool per le dimensioni immagine e confronta ciò che WordPress dovrebbe generare con ciò che il browser ha davvero caricato — quando le due cose non coincidono, in mezzo di solito c’è un plugin di ottimizzazione o un ridimensionatore di immagini della CDN.