Come modificare le dimensioni delle miniature della Galleria WooCommerce

In qualità di proprietario di un negozio online, avere immagini visivamente accattivanti dei tuoi prodotti è fondamentale per attirare potenziali clienti. WooCommerce, la popolare piattaforma di e-commerce, fornisce una funzionalità di galleria di immagini integrata per mostrare le immagini dei tuoi prodotti. Tuttavia, la dimensione predefinita delle miniature della galleria potrebbe non essere sempre adatta al design e al layout del tuo sito web. In questo articolo ti guideremo su come modificare le dimensioni della miniatura della tua galleria WooCommerce per renderla più adatta al tuo sito web.

Passaggio 1: accesso al file Functions.php del tuo tema

Per modificare le dimensioni della miniatura della tua galleria WooCommerce, il primo passo è accedere al file Functions.php del tuo tema. Puoi farlo accedendo alla dashboard di WordPress e navigando su Aspetto > Editor del tema. Seleziona il file Functions.php dall'elenco sul lato destro dello schermo.

Passaggio 2: aggiunta di una nuova dimensione immagine

Per aggiungere una nuova dimensione dell'immagine per la miniatura della tua galleria WooCommerce, puoi utilizzare la funzione add_image_size() nel file Functions.php del tuo tema. Ecco uno snippet di codice di esempio per aggiungere una nuova dimensione dell'immagine in miniatura:

add_image_size('woocommerce-thumbnail-new', 200, 200, true);

In questo esempio, abbiamo denominato la nuova dimensione dell'immagine "woocommerce-thumbnail-new" e impostato le dimensioni su 200 x 200 pixel. L'ultimo parametro "true" significa che l'immagine verrà ritagliata per adattarsi esattamente alle dimensioni.

Passaggio 3: rigenerazione delle miniature

Dopo aver aggiunto la nuova dimensione dell'immagine, dovrai rigenerare le miniature delle immagini in modo che vengano ridimensionate per corrispondere alle nuove dimensioni. Per eseguire questa operazione è possibile utilizzare un plug-in come Rigenera miniature o Rigenerazione miniature.

Passaggio 4: aggiornamento del CSS del tuo tema

Dopo aver rigenerato le miniature delle immagini, dovrai aggiornare il CSS del tema per visualizzare correttamente la nuova dimensione delle miniature. Puoi farlo aggiungendo il seguente codice CSS al file style.css del tuo tema:

.woocommerce div.prodotto div.immagini .woocommerce-product-gallery__immagine img {
larghezza: 200px! importante;
altezza: 200px! importante;
}

In questo esempio, abbiamo impostato la larghezza e l'altezza in modo che corrispondano alla nuova dimensione dell'immagine creata in precedenza. La dichiarazione "importante" garantisce che le proprietà CSS vengano applicate anche se ci sono altre regole del foglio di stile che sono in conflitto con esse.

Passaggio 5: testare la nuova dimensione della miniatura

Infine, puoi testare la nuova dimensione delle miniature accedendo a una delle pagine dei tuoi prodotti con più immagini e verificando che le immagini in miniatura siano ora visualizzate con la dimensione corretta.

Conclusione

La modifica delle dimensioni delle miniature della galleria WooCommerce può fare una grande differenza nel modo in cui le immagini dei prodotti vengono visualizzate sul tuo sito web. Seguendo i passaggi descritti in questo articolo, puoi facilmente creare una nuova dimensione di immagine per le tue miniature, rigenerare le tue miniature, aggiornare il CSS del tuo tema e testare la nuova dimensione della miniatura. Con un po' di conoscenza dei CSS e alcune semplici modifiche al codice, sarai sulla buona strada per mostrare i tuoi prodotti nel miglior modo possibile.