In questo articolo vediamo l’utilzzo di alcuni filtri (hooks) di WooCommerce per definire le dimensioni delle immagini dei prodotti, delle gallery e delle thumbnails.
I motivi per cui agire via PHP invece che dalle impostazioni di WooCommerce o dal nuovo customizer presente da qualche versione, posso essere diversi, per esempio nonostante si impostino dei parametri via back end i risultati non cambiano, questo potrebbe significare che il tema in uso stia facendo un override di WooCommerce o più semplicemente sia necessario rigenerare le thumbnails, infatti va fatto dopo ogni cambio di dimensione immagini, vi consiglio di usare il plugin Regenerate Thumbnails ; oppure ancora volete sviluppare un template WordPress e vi servono questi hooks 🙂
Come forzare le dimensioni delle immagini WooCommerce via PHP
Cominciamo subito dicendo che esistendo 3 tipi di immagini :
- woocommerce_thumbnail : utilizzate nella vista a griglia nonchè “shop page”
- woocommerce_single : la foto del singolo prodotto
- woocommerce_gallery_thumbnail : sono le anteprime della galleria immagini prodotto
|
1 2 3 4 5 |
add_theme_support( 'woocommerce', array( 'thumbnail_image_width' => 250, 'gallery_thumbnail_image_width' => 150, 'single_image_width' => 600, ) ); |
Utilizzando questo codice nel template in uso, va come sempre copiato nel file functions.php meglio se in un tema child foreremo le dimensioni delle immagini, ma non daremo più la possibilità all’utente di controllarne le dimensioni da Aspetto\Personalizza
Come personalizzare le dimensioni delle immagini WooCommerce via PHP con hooks e filter
Nella tabella sottostante riporto i filtri (filter o hook) di WooCommerce che normalmente vengono utilizzati dagli sviluppatori durante lo sviluppo di plugins o temi per WooCommerce.
| Filtro | Descrizione | Default | Dimensioni predefinite |
| single_product_archive_thumbnail_size | Immagini catalogo prodotti / vista griglia prodotti | woocommerce_thumbnail | 600px di larghezza non ridimensionata (uncropped) |
| subcategory_archive_thumbnail_size | Immagini catalogo categorie / vista griglia categorie | woocommerce_thumbnail | 600px di larghezza ridimensionata (cropped) |
| woocommerce_gallery_thumbnail_size | Thumbnail nella galleria prodotto singolo | woocommerce_gallery_thumbnail | 10×100 ridimensionata (cropped) |
| woocommerce_gallery_image_size | Immagine singola nella galleria prodotto | woocommerce_single | – |
| woocommerce_gallery_full_size | Immagine full o in effetto zoom | full | – |
WooCommerce utilizza la funzione wc_get_image_size per fare un’interrogazione e ricevere le dimensioni delle immagini impostate dal pannello di controllo di WooCommerce; se volessivo ridimensionare le immagini thumbnail della galleria prodotti, utilizzeremo questo hook / filtro :
woocommerce_get_image_size_{NOME_DEL_FILTRO(VEDI TABELLA)_SENZA_PREFISSO_WOOCOMMERCE}
Ora poniamo di voler impostare le thumbnail ad una dimensione di 250×250, scriveremo quindi :
|
1 2 3 4 5 6 7 |
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) { return array( 'width' => 250, 'height' => 250, 'crop' => 0, ); } ); |
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Ciao Alessio complimenti per l’articolo!
Volevo chiederti come modificare la posizione della foto nel composit product. Al momento col tema divi child mostra la foto a sinistra ed il testo a destra, vorrei rendere il tutto a schermo intero mettendo prima la foto e successivamente il testo
grazie in anticipo
Ciao Davide,
lo puoi fare in due modi, o modifichi il template di WooCommerce che renderizza il prodotto, oppure agisci via CSS.
Ottimo consigli, non essendo però molto pratico, potresti gentilmente spiegare meglio cosa scrivere per ridimensionare l’immagine del prodotto singolo (quella che compare su descrizione prodotto) che al momento mi viene enorme?
Ciao Marco, puoi chiedermi un Assistenza WordPres
Ciao, vi è proprio la possibilità di disabilitare l’immagine di un prodotto? Intendo proprio eliminarlo e non far comparire nemmeno il campo immagine “senza immagine”. Ho una categoria in cui pensavo di far comparire un link con marca prodotto con una immagine e creare all’interno i prodotti come una sorta di elenco senza immagine. Volevo evitare nel mio caso di inserire varianti e attributi.
grazie mille per la risposta
Ciao,
la via più semplice è con il CSS, metti il display none e ti nasconde l’ingombro dell’immagine.