Ti sei imbattuto in una situazione che richiede un'immagine per ciascuno dei tuoi tag WooCommerce? Fortunatamente per te, anche noi! Avevamo una serie di prodotti e una serie di categorie, ma volevamo mantenere i marchi separati dalle categorie effettive, quindi invece di utilizzare le sottocategorie sotto un genitore di "Marchi" abbiamo utilizzato i tag. Centinaia di prodotti dopo, il nostro cliente voleva mostrare un'immagine su ciascuna delle pagine dei tag, in particolare il logo del marchio. Uh Oh! Nessuna tale opzione.
Potremmo esaminare ogni singolo prodotto, prendere il tag del marchio, creare una categoria e assegnarlo a una categoria principale di "Marchi", ma sembra un lavoro extra. Ciò è particolarmente vero considerando che in realtà ci è piaciuto il modo in cui i marchi sono stati visualizzati in una nuvola di tag sul front-end del sito.
Soluzione:il plug-in Taxonomy Images
Il plug-in delle immagini della tassonomia funziona con tassonomie personalizzate e assegna un'opzione GUI per allegare immagini a tale tassonomia. In questo caso la nostra tassonomia è un tag prodotto. L'implementazione richiede due passaggi, l'installazione/configurazione del plug-in e il caricamento delle immagini, nonché l'impostazione del modello di tag WooCommerce.
Impostazione del plug-in e caricamento delle immagini
- Accedi al tuo amministratore di WordPress e scegli Plugin> Aggiungi nuovo
- Cerca e installa il plug-in "Taxonomy Images". Assicurati di attivarlo dopo l'installazione!
- Vai a Impostazioni> Immagini tassonomia
- Seleziona la casella "Tag prodotto" e scegli "Salva modifiche"
Ora dovresti vedere l'opzione per caricare un'immagine accanto a ogni singolo tag di prodotto in Prodotti> Tag. Siamo già a metà strada! Procedi e carica un'immagine per ogni tag come faresti normalmente con le immagini in WordPress:assicurati di selezionare il pulsante "Associa con tag_name" dopo il caricamento (dove tag_name è il nome effettivo del tag). Aggiorna il tuo tag e sei quasi a posto!
Configurazione del modello WooCommerce
Ora dobbiamo informare WooCommerce che desideri visualizzare l'immagine sulla pagina a tag singolo. Questo è un po 'più complicato e richiede la modifica di un po' di codice. Avrai anche bisogno dell'accesso FTP alla tua installazione di WordPress per modificare alcuni file modello.
Inizia impostando il tuo file modello:
- Accedi tramite FTP e vai alla directory dei temi di WordPress (wp-content/themes/{your_theme_name})
- Crea una nuova cartella chiamata woocommerce se non esiste già (questa cartella contiene tutte le sostituzioni dei modelli)
- Copia il modello della pagina del tag in questa cartella. Il modello della pagina del tag si trova in wp-content/plugins/woocommerce/templates/taxonomy-product_tag.php . Ma aspetta! C'è un trucco qui, in realtà estrae solo tutto il contenuto da wp-content/plugins/woocommerce/templates/archive-product.php , anche se in realtà vogliamo sovrascrivere solo i tag... non tutte le pagine dei prodotti. Per fare ciò, copia archive-product.php file da wp-content/plugins/woocommerce/templates in wp-content/themes/{your_theme_name}/woocommerce quindi rinominalo in taxonomy-product_tag.php
Ora abbiamo impostato un file modello di override che sostituirà solo i tag di prodotto, ma contiene tutto il contenuto di cui abbiamo bisogno. Ora dobbiamo modificare il file modello per inserire del codice che mostrerà le immagini dei tag del prodotto. Ecco come:
Apri il tuo nuovo file modello (wp-content/themes/{your_theme_name}/woocommerce/taxonomy-product_tag.php ) con il tuo editor di testo preferito.
Direttamente sopra la linea che assomiglia a questa:
<?php do_action( 'woocommerce_archive_description' ); ?>
Inserisci quanto segue:
<aside id="tag-brand-logo"><?php print apply_filters( 'taxonomy-images-queried-term-image', '' ); ?></aside>
Salva il file e vai a una delle tue singole pagine di tag prodotto (assicurati che sia quella in cui hai effettivamente caricato un'immagine!) E crogiolati nella gloria di aver hackerato WooCommerce per portare le tue immagini dove le volevi.
Puoi anche modellare la tua immagine con alcuni CSS come questo (per esempio):
#tag-brand-logo{ float:right !important; margin-top:-25px; } Hai trovato questo post utile? Desideri una consulenza più esperta nei blog del tuo host web e direttamente dal tuo team di supporto tecnico di hosting? Ospita il tuo sito web WordPress con Websavers dove il supporto va oltre il semplice hosting!