Come rendere gli attributi dei prodotti WooCommerce più prominenti

Gli attributi del prodotto WooCommerce sono una funzionalità davvero utile, ma per impostazione predefinita sono nascosti in una certa maniera nella pagina, nel menu Informazioni aggiuntive sezione. A seconda del tema, potrebbero non essere visibili finché l'utente non fa clic su una scheda, il che significa che molti utenti potrebbero non guardarli. 

A volte è più utile averli elencati nella parte superiore della pagina del singolo prodotto insieme alle categorie di prodotto. In questo tutorial ti mostrerò come spostare gli attributi del prodotto da Informazioni aggiuntive scheda nella parte superiore della pagina.

Cosa ti serve

Per seguire, avrai bisogno di:

• Un'installazione di sviluppo di WordPress.
• Un editor di codice.
• WooCommerce installato e attivato.
• Prodotti aggiunti: ho importato i dati dei prodotti fittizi forniti con WooCommerce; per i dettagli su come farlo, consulta questa guida.
• Uno o più attributi del prodotto aggiunti (l'attributo del colore incorporato con i dati fittizi non funziona nel modo standard).
• È stato attivato un tema compatibile con WooCommerce: utilizzo Storefront.

Per aggiungere gli attributi più vicini alla parte superiore della pagina del singolo prodotto, faremo quanto segue:

1. Crea un plugin vuoto e attivalo.
2. Guarda il codice sorgente di WooCommerce per identificare il filtro che controlla gli attributi del prodotto che vengono aggiunti alle schede verso la parte inferiore della pagina.
3. Aggiungi una funzione collegata a quel filtro per rimuovere la scheda per gli attributi.
4. Esamina nuovamente i file di origine per identificare l'hook che richiama il contenuto nella parte superiore della pagina.
5. Agganciare una funzione a quella invece.

Iniziamo dando un'occhiata al modo in cui i nostri attributi del prodotto verranno visualizzati per impostazione predefinita. Ho creato un attributo chiamato Taglia e ho aggiunto tre valori: piccolo, medio e grande. Qui è visualizzato nel Informazioni aggiuntive sezione in fondo a una pagina prodotto:

Vogliamo spostare gli attributi del prodotto dalla parte inferiore dello schermo fino al lato in alto a sinistra, sotto la descrizione del prodotto.

Creazione del plugin

Nella cartella wp-content / plugins, crea un nuovo file. Sto chiamando il mio woocommerce-rilievo-prodotto-attributes.php. Apri quel file e aggiungi il seguente:

Salva il tuo file e vai al plugin schermo nella dashboard di WordPress. Attiva il plugin.
Codice sorgente WooCommerce: visualizzazione attributi prodotto
Iniziamo identificando la funzione e il gancio utilizzati per l'output degli attributi del prodotto. Ciò comporta l'attraversamento di alcuni dei file plugin:
 
Il modello che emette la pagina del singolo prodotto è woocommerce / templates / single-Product.php.
 
All'interno di quel file, c'è un get_template_part () chiamare al content-single-Product.php file.
 
In quel file c'è un'azione chiamata woocommerce_after_single_product_summary. Tre funzioni sono agganciate ad essa: quella che dobbiamo guardare è woocommerce_output_product_data_tabs ().
 
Puoi trovare il woocommerce_output_product_data_tabs () funzione in woocommerce / include / wc-template-functions.php.
 
La funzione utilizza wc_get_template () per recuperare un'altra parte del modello, in questo caso wooocommerce / templates / monoprodotto / schede / tabs.php.
 
In quel file (ci stiamo arrivando, lo prometto!) C'è una variabile chiamata $ linguette, che è definito come apply_filters ('woocommerce_product_tabs', array ());.
 
Quindi, per rimuovere la scheda degli attributi del prodotto, dobbiamo creare una funzione rimuovendo quella scheda e collegandola al woocommerce_product_tabs filtro. 
 
Accidenti! Ci siamo arrivati ​​alla fine.
Rimozione degli attributi del prodotto dalle schede utilizzando un filtro
Fortunatamente, la documentazione di WooCommerce fornisce indicazioni su come rimuovere le schede usando questo filtro, il che rende il nostro lavoro un po 'più semplice.
Nel tuo file plugin, aggiungi questo codice:
/ ** * Rimuove la scheda "Ulteriori informazioni" che visualizza gli attributi del prodotto. * * @param array $ tabs Schede WooCommerce da visualizzare. * * @return array Schede WooCommerce da visualizzare, meno "Ulteriori informazioni". * / function tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); return $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Questa funzione ha $ linguette come oggetto perché è la variabile con cui stiamo lavorando. Rimuove il 'Informazioni aggiuntive' scheda dalla matrice di valori memorizzati dal $ linguette variabile. Si noti che ho utilizzato una priorità numerata elevata di 100 quando si aggancia la mia funzione per assicurarsi che si attivi dopo le funzioni che aggiungono le schede in primo luogo.
Salva il tuo file e aggiorna la pagina del tuo prodotto:
Quindi questa è la scheda rimossa. Ora dobbiamo aggiungere nuovamente gli attributi del prodotto nella parte superiore della pagina.
Trovare il posto nel codice per aggiungere attributi
Ancora una volta abbiamo bisogno di identificare dove nel codice abbiamo bisogno di aggiungere una funzione per visualizzare gli attributi del prodotto. In altre parole, dobbiamo trovare un hook di azione.
Tornando al content-single-Product.php file, c'è un gancio chiamato woocommerce_single_product_summary che viene utilizzato da sette funzioni che ciascuna emette un diverso bit di dati sul prodotto, vale a dire:
 
il titolo
 
la valutazione
 
il prezzo
 
l'estratto (cioè la breve descrizione)
 
il pulsante Aggiungi al carrello
 
metadati
 
condivisione di link
 
Voglio aggiungere i miei attributi nella sezione per i metadati, quindi diamo un'occhiata alla funzione che la produce.
La funzione è nel wc_template_functions.php file e utilizza wc_get_template () chiamare un altro file include, woocommerce / templates / singolo / prodotto / meta.php.
Nel meta.php file, esiste un codice per emettere i metadati relativi al prodotto, con woocommerce_product_meta_start gancio prima e il woocommerce_product_meta_end agganciarlo dopo. Quindi possiamo usare uno di questi due ganci per produrre gli attributi del nostro prodotto. Usiamo l'ultimo, poiché questo farà apparire gli attributi dopo le categorie e i tag.
Scrivere una funzione per l'output degli attributi del prodotto
Duplicazione del codice già fornita da WooCommerce
Per generare un elenco di termini di tassonomia per il nostro prodotto, possiamo utilizzare la funzione fornita da WooCommerce list_attributes (). Troverai questa funzione nel templates / singolo / prodotto / schede / addizionale-information.php file.
Nel tuo file plugin, aggiungi questo:
/ ** * Visualizza gli attributi del prodotto in alto a destra nella pagina del singolo prodotto. * * @param $ product * / function tutsplus_list_attributes ($ product) global $ product; $ Prodotto-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Si noti che non è necessario utilizzare una priorità poiché WooCommerce non ha altre funzioni agganciate a tale hook di azione.
Ora aggiorna la pagina del tuo prodotto:
Ora vengono visualizzati gli attributi. Stanno usando un'interfaccia tab-like con il tema Storefront poiché è quello che è impostato per l'impostazione predefinita Informazioni aggiuntive scheda e l'HTML di output utilizza una tabella che fornisce il layout predefinito. 
Approccio alternativo senza tabella
Quella tabella non è l'ideale: sarebbe meglio avere un elenco di attributi del prodotto, per abbinare l'elenco delle categorie di prodotti sopra di esso. Facciamolo.
WooCommerce memorizza gli attributi come tassonomie personalizzate. La lumaca che crei per ciascuno dei tuoi valori di attributo è preceduta da a papà_ suffisso quando l'attributo è memorizzato nel database. 
Tuttavia, non memorizza queste tassonomie nel wp_term_taxonomy tavolo e wp_terms tabella come si farebbe quando si registra una normale tassonomia personalizzata in WordPress. Invece, WooCommerce crea tabelle per gli attributi, il che significa che i dati sono memorizzati in modo diverso. Ciò significa che dobbiamo adottare un approccio più rotondeggiante per accedere all'etichetta per ogni tassonomia quando si emette quella lista.
Nel tuo tutsplus_list_attributes () funzione, rimuovere le due linee all'interno della funzione. Sostituiscili con questo codice:
prodotto globale $; $ globale post; $ attributes = $ product-> get_attributes (); if (! $ attributes) return;  foreach ($ attributi come attributo $) // Ottieni la tassonomia. $ terms = wp_get_post_terms ($ product-> id, $ attribute ['name'], 'all'); $ tassonomia = $ termini [0] -> tassonomia; // Ottieni l'oggetto tassonomia. $ taxonomy_object = get_taxonomy ($ taxonomy); // Ottieni l'etichetta dell'attributo. $ attribute_label = $ taxonomy_object-> labels-> name; // Visualizza l'etichetta seguita da un elenco di termini selezionabile. echo get_the_term_list ($ post-> ID, $ attributo ['nome'], '
'. $ attribute_label. ':', ',', '
'); 
Ecco cosa fa quel codice:
 
Definisce il globale $ prodotto variabile (che è un oggetto della nostra funzione).
 
Utilizza $ Prodotto-> get_attributes () per recuperare tutti gli attributi per questo prodotto.
 
Se non ce ne sono, non fa nulla.
 
Se ci sono attributi, apre a per ciascuno loop per ciascuno di essi.
 
Per recuperare l'etichetta, usa il wp_get_post_terms () e get_taxonomy () funzioni per recuperare la matrice di dati relativi a questa tassonomia per questo post.
 
Quindi echeggia il nome (o etichetta) della tassonomia (o attributo), seguito da un elenco di collegamenti agli archivi per ciascuno dei valori che utilizzano get_the_term_list ().
 
Gli attributi sono ora visualizzati in una lista:
Molto meglio!
Credito: grazie a Isabel Castillo per il codice per visualizzare l'etichetta dell'attributo. 
Sommario
Spostare gli attributi del prodotto nella pagina del prodotto richiede un po 'di lavoro approfondendo il codice sorgente di WooCommerce e identificando i file modello, i ganci e le funzioni che svolgono un ruolo nella visualizzazione degli attributi del prodotto.
Trovando il filtro che controlla quali schede vengono emesse, siamo stati in grado di rimuovere il Informazioni aggiuntive scheda, che ha rimosso gli attributi dalla parte inferiore dello schermo. Quindi aggiungendo una nuova funzione a un hook più in alto nella pagina, siamo stati in grado di produrli dove volevamo.
Se sei interessato ad incorporare altre funzionalità di WooCommerce nel tuo sito, controlla anche ciò che è disponibile nel marketplace.



		
			
	   
	




Codice