Share
Cosa starai creandoWooCommerce ti offre alcune opzioni su cosa puoi visualizzare nelle tue pagine di archivio:
Quando creo un negozio, di solito seleziono la terza opzione: prodotti e categorie / sottocategorie. Ciò significa che i visitatori del mio negozio possono selezionare prodotti direttamente dalla home page o perfezionare la loro ricerca facendo clic su un archivio di categorie di prodotti.
Tuttavia, c'è un errore in questo approccio: visualizza le categorie / sottocategorie insieme, senza separazione tra i due. Ciò significa che se le immagini del tuo prodotto hanno dimensioni diverse dalle immagini del tuo prodotto, il layout può sembrare un po 'disordinato. Anche se le tue immagini hanno le stesse dimensioni, se una delle righe nella pagina di archivio include sia categorie che prodotti, l'assenza di un pulsante "Aggiungi al carrello" per le categorie rende quella riga disordinata, poiché non tutti i suoi elementi hanno stesse dimensioni.
In questo tutorial ti mostrerò come visualizzare le categorie in un elenco separato prima di visualizzare i prodotti.
Per fare ciò, seguiremo quattro passaggi:
Ma prima di iniziare, avrai bisogno di un'installazione WooCommerce con alcuni prodotti aggiunti e le categorie di prodotti e le sottocategorie configurate.
Per seguire, avrai bisogno di:
Diamo un'occhiata a ciò che WooCommerce ci offre di default.
Ho iniziato aggiungendo alcune immagini alle mie categorie di prodotti e sottocategorie, poiché i dati fittizi di WooCommerce non includono quelli. Ho semplicemente usato un'immagine di uno dei prodotti di ogni categoria o sottocategoria, come puoi vedere nello screenshot:
Ora diamo un'occhiata a come WooCommerce visualizza le categorie di prodotti e i prodotti nelle pagine di archivio.
Se non lo hai già fatto, vai a WooCommerce> Impostazioni, seleziona il Prodotti scheda, quindi scegliere il Display opzione. Per ciascuno dei Visualizza la pagina del negozio e Visualizzazione categoria predefinita opzioni, selezionare Mostra entrambi:
Clicca il Salva I Cambiamenti pulsante per salvare le impostazioni e visitare la pagina del negozio del tuo sito. Il mio assomiglia a questo:
Come succede, perché ho tre categorie di prodotti e le mie immagini di categoria hanno le stesse dimensioni delle immagini dei miei prodotti, è piuttosto ordinata. Ma ecco uno degli archivi delle categorie di prodotto:
Poiché questa categoria ha due sottocategorie, il primo prodotto viene visualizzato insieme a loro, in una griglia di tre elementi di larghezza. Voglio rendere più importanti le mie categorie e sottocategorie e semplicemente presentarle separatamente dalle schede di prodotto. Quindi facciamolo.
Il primo passo è identificare come WooCommerce generi categorie e sottocategorie. Quindi analizziamo il codice sorgente di WooCommerce per trovare la funzione pertinente.
Il file utilizzato da WooCommerce per visualizzare le pagine di archivio è archive-Product.php, che è nel modelli cartella.
All'interno di quel file, puoi trovare questo codice, che genera le categorie e i prodotti:
Quindi c'è un woocommerce_product_subcategories () funzione che sta emettendo le categorie o le sottocategorie prima di eseguire il ciclo che emette i prodotti.
La funzione è collegabile, il che significa che potremmo sovrascriverlo nel nostro tema. Sfortunatamente questo non funziona come WooCommerce ha uno stile integrato per la cancellazione degli elementi, che apparirà all'inizio di una riga con il display predefinito.
Quindi, al posto di ciò, disattiveremo la visualizzazione di categorie e sottocategorie nelle nostre pagine di archivio, in modo che vengano visualizzati solo i prodotti. Quindi creeremo una nuova funzione che restituisce le categorie di prodotto o sottocategorie e la colleghiamo al woocommerce_before_shop_loop azione, assicurandoci di utilizzare una priorità elevata in modo che si attivi dopo le funzioni che sono già agganciate a tale azione.
Nota: poiché WooCommerce aggiunge clear a ogni terza lista di prodotti, non possiamo usare il woocommerce_product_subcategories () funzione o una versione modificata di esso per visualizzare le categorie. Questo perché cancellerà la terza, la sesta (e così via) categoria o prodotto elencato, anche quando usiamo questa funzione per visualizzare le categorie separatamente. Potremmo provare a ignorarlo, ma è più semplice scrivere la nostra funzione.
Quindi creiamo un plugin che lo faccia.
Nel tuo wp-content / plugins directory, creare una nuova cartella e dargli un nome univoco. Sto chiamando il mio archivi tutsplus-separati-prodotti-categorie-in-. Al suo interno, crea un nuovo file, sempre con un nome univoco. Sto usando lo stesso nome: tutsplus-separati-prodotti-categorie-in-archives.php.
Apri il tuo file e aggiungi questo codice:
Potresti voler modificare i dettagli dell'autore poiché questo è il tuo plug-in che stai scrivendo. Salva il tuo file e attiva il plugin tramite l'amministratore di WordPress.
Scrivendo la nostra funzione
Ora scriviamo la funzione. Ma prima di iniziare, disattiva gli elenchi di categorie nelle schermate di amministrazione. Vai a WooCommerce> Impostazioni, seleziona il Prodotti scheda, quindi scegliere il Display opzione. Per ciascuno dei Visualizza la pagina del negozio e Visualizzazione categoria predefinita opzioni, selezionare Mostra prodotti. Salva le tue modifiche.
La pagina del tuo negozio sarà ora simile a questa:
Nel tuo file plugin, aggiungi questo:
function tutsplus_product_subcategories ($ args = array ()) add_action ('woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50);Ora aggiungi questo codice all'interno della funzione:
$ parentid = get_queried_object_id (); $ args = array ('parent' => $ parentid); $ terms = get_terms ('product_cat', $ args); se ($ termini) echo '
Diamo un'occhiata a cosa fa questa funzione:
Accentsconagua
$ parentid.get_terms () identificare i termini con l'oggetto attualmente interrogato come genitore. Se questa è la pagina principale del negozio, restituirà le categorie di livello superiore; se questo è un archivio di categoria, restituirà le sottocategorie.per ciascuno ciclo e a ul elemento.Li elemento, quindi restituisce l'immagine della categoria utilizzando woocommerce_subcatgeory_thumbnail (), seguito dal nome della categoria in un collegamento al suo archivio.Ora salva il tuo file e aggiorna la pagina principale del negozio. Il mio assomiglia a questo:
Le categorie vengono visualizzate, ma hanno bisogno di uno stile. Facciamolo dopo.
Per poter aggiungere uno stile, abbiamo bisogno di un foglio di stile all'interno del nostro plug-in, che dovremo accodare.
Nella cartella del plugin, crea una cartella chiamata css, e al suo interno, crea un file chiamato style.css.
Ora, nel tuo file plugin, aggiungi questo sopra la funzione che hai già creato:
function tutsplus_product_cats_css () / * registra il foglio di stile * / wp_register_style ('tutsplus_product_cats_css', plugins_url ('css / style.css', __FILE__)); / * accoda lo stylsheet * / wp_enqueue_style ('tutsplus_product_cats_css'); add_action ('wp_enqueue_scripts', 'tutsplus_product_cats_css');Questo accoda correttamente il foglio di stile che hai appena creato.
Ora apri il tuo foglio di stile e aggiungi il codice qui sotto. WooCommerce usa il primo stile mobile, quindi è quello che useremo anche noi.
ul.product-cats li list-style: none; margin-left: 0; margin-bottom: 4.236em; allineamento del testo: centro; posizione: relativa; ul.product-cats li img margin: 0 auto; @media screen e (min-width: 768px) ul.product-cats margin-left: 0; chiaro: entrambi; ul.product-cats li width: 29.4117647059%; fluttuare: a sinistra; margine-destra: 5.8823529412%; ul.product-cats li: nth-of-type (3) margin-right: 0;
Ho copiato le esatte larghezze e margini dallo stile usato da WooCommerce.
Ora controlla di nuovo la pagina del tuo negozio principale. Ecco il mio:
Ecco il Musica archivio delle categorie:
Ed ecco come appare sugli schermi più piccoli:
Le categorie di prodotti sono una grande caratteristica di WooCommerce, ma il modo in cui vengono visualizzate non è sempre l'ideale. In questo tutorial, hai imparato come creare un plug-in che restituisce le categorie di prodotto o le sottocategorie separatamente dalle schede di prodotto, e quindi hai stilizzato i tuoi elenchi di categorie.
È possibile utilizzare questo codice per generare un elenco di categorie o sottocategorie altrove nella pagina (ad esempio sotto i prodotti), agganciando la funzione a un altro hook di azione all'interno del file di modello WooCommerce.
Se attualmente gestisci un negozio che stai cercando di estendere, o stai cercando alcuni plugin aggiuntivi da studiare in relazione a WooCommerce, non esitare a vedere quali plugin sono disponibili sul mercato Envato.
