Cum să faci atributele produselor WooCommerce mai proeminente

Ce veți crea

Atributele produsului WooCommerce sunt o caracteristică foarte utilă, însă, în mod implicit, ele sunt ascunse destul de mult în jos în pagină informatii suplimentare secțiune. În funcție de tema dvs., este posibil ca acestea să nu fie vizibile până când utilizatorul nu face clic pe o filă, ceea ce înseamnă că mulți utilizatori s-ar putea să nu le privească.

Uneori este mai util să le includeți în partea superioară a paginii cu un singur produs împreună cu categoriile de produse. În acest tutorial vă voi arăta cum să mutați atributele produsului din informatii suplimentare fila în partea de sus a paginii.

Ce ai nevoie

Pentru a urmări, veți avea nevoie de:

O instalare de dezvoltare a WordPress.
Un editor de cod.
WooCommerce instalat și activat.
Produs adăugat - Am importat datele produsului fals care apar cu WooCommerce; pentru detalii despre cum să faceți acest lucru, consultați acest ghid.
Unul sau mai multe atribute de produs au fost adăugate (atributul color încorporat cu datele fictive nu funcționează în mod standard).
O temă compatibilă cu WooCommerce activată - folosesc Storefront.

Pentru a adăuga atributele mai aproape de partea superioară a paginii cu un singur produs, vom face următoarele lucruri:

Creați un plugin gol și activați-l.
Uită-te la codul sursă WooCommerce pentru a identifica filtrul care controlează atributele produsului care sunt adăugate la filele spre partea de jos a paginii.
Adăugați o funcție atașată la filtrul respectiv pentru a elimina fila pentru atribute.
Priviți din nou fișierele sursă pentru a identifica cârligul care atrage conținut în partea de sus a paginii.
Închideți o funcție cu aceasta.

Să începem să aruncăm o privire asupra modului în care atributele noastre de produse vor fi afișate în mod implicit. Am creat un atribut numit mărimea și i-am adăugat trei valori: mici, medii și mari. Aici este afișat în informatii suplimentare secțiunea din partea de jos a paginii de produs:

Vrem să mutăm acele atribute ale produselor din partea de jos a ecranului până la partea superioară din stânga, sub descrierea produsului.

Crearea pluginului

În folderul wp-content / plugins, creați un fișier nou. Îi sun pe a mea woocommerce-proeminent-produs-attributes.php. Deschideți fișierul și adăugați următoarele:

Salvați fișierul și mergeți la Plugin-uri ecran în tabloul de bord WordPress. Activați pluginul.

Cod sursă WooCommerce: afișare atribut de produs

Să începem prin identificarea funcției și a cârligului utilizat pentru a scoate atributele de produs. Aceasta implică călătoria prin câteva dintre fișierele de plugin:

Șablonul care afișează pagina cu un singur produs este woocommerce / template-uri / single-product.php.
În fișierul respectiv, există a get_template_part () sunați la Conținutul-single-product.php fişier.
În acel dosar există o acțiune numită woocommerce_after_single_product_summary. Trei funcții sunt legate de ea: trebuie să ne uităm la ea woocommerce_output_product_data_tabs ().
Puteți găsi woocommerce_output_product_data_tabs () funcția în woocommerce / include / WC-template-functions.php.
Funcția este utilizată wc_get_template () pentru a prelua o altă parte a șablonului, în acest caz wooocommerce / template-uri / un singur produs / file / tabs.php.
În acest fișier (ajungem acolo, vă promit!) Există o variabilă numită $ file, care este definită ca apply_filters ('woocommerce_product_tabs', array ());.
Deci, pentru a elimina fila atributelor produsului, trebuie să creați o funcție care să elimine această filă și să o prindă la woocommerce_product_tabs filtru.

Pfiu! Am ajuns acolo în cele din urmă.

Eliminarea atributelor produsului din filele utilizând un filtru

Din fericire, documentația WooCommerce oferă îndrumări cu privire la modul de eliminare a filelor utilizând acest filtru, ceea ce face munca noastră mai ușoară.

În fișierul pluginului, adăugați acest cod:

/ ** * Înlăturați fila "Informații suplimentare" care afișează atributele produsului. * * @param array $ tabs WooCommerce filele de afișat. * * @aplica tabele WooCommerce pentru afișare, minus "Informații suplimentare". * / funcția tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); întoarce $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);

Această funcție are $ file ca obiect, deoarece aceasta este variabila cu care lucrăm. Îl îndepărtează 'informatii suplimentare' din tabelul de valori stocate de către $ file variabil. Rețineți că am folosit o prioritate numerică mare 100 atunci când cuplează funcția mea pentru a se asigura că se declanșează după funcțiile care adaugă în primul rând filele.

Salvați fișierul și actualizați pagina produsului:

Deci asta a fost eliminat. Acum trebuie să adăugăm atributele produsului înapoi în partea de sus a paginii.

Găsirea locului în cod pentru a adăuga atribute

Încă o dată, trebuie să identificăm unde trebuie să adăugăm o funcție pentru a afișa atributele produsului. Cu alte cuvinte, trebuie să găsim un cârlig de acțiune.

Revenind la Conținutul-single-product.php dosar, este un cârlig numit woocommerce_single_product_summary care este folosită de șapte funcții care fiecare transmite un alt bit de date despre produs, și anume:

titlul
evaluarea
pretul
fragmentul (adică descrierea scurtă)
butonul adăugați în coș
metadate
partajați link-urile

Vreau să adaug atributele mele în secțiunea pentru metadate, așa că haideți să aruncăm o privire la funcția care iese.

Funcția este în wc_template_functions.php fișier, și se folosește wc_get_template () pentru a apela un alt fișier include, woocommerce / template-uri / singur / produs / meta.php.

În meta.php fișier, există cod de ieșire metadate despre produs, cu woocommerce_product_meta_start cârlig în fața lui și a woocommerce_product_meta_end cârlig după el. Deci, putem folosi una din cele două cârlige pentru a scoate atributele noastre de produse. Să folosim ultima, deoarece aceasta va face ca atributele să apară după categorii și etichete.

Scrierea unei funcții pentru ieșirea atributelor produsului

Duplicarea codului deja furnizat de WooCommerce

Pentru a afișa o listă de termeni de taxonomie pentru produsul nostru, putem folosi funcția oferită de WooCommerce numită list_attributes (). Veți găsi această funcție în template-uri / singur / produs / file / suplimentare-information.php fişier.

În fișierul pluginului, adăugați aceasta:

/ ** * Afișează atributele produsului în partea dreaptă sus a paginii produsului unic. * * @param $ product * / funcția tutsplus_list_attributes ($ product) global $ product; $ Produs-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');

Rețineți că nu aveți nevoie să utilizați o prioritate deoarece WooCommerce nu are alte funcții legate de acel cârlig de acțiune.

Actualizați pagina dvs. de produs:

Acum, atributele sunt afișate. Folosesc o interfață asemănătoare tab-ului cu tema Storefront, deoarece este setată pentru implicit informatii suplimentare și HTML-ul de ieșire utilizează o tabelă care oferă aspectul implicit.

Abordare alternativă fără o masă

Acest tabel nu este ideal: ar fi mai bine să aveți o listă de atribute ale produselor, pentru a se potrivi cu lista categoriilor de produse de deasupra. Hai să facem asta.

WooCommerce stochează atributele ca taxonomii personalizate. Blocul pe care-l creați pentru fiecare valoare a atributului este precedat de a pa_ sufix atunci când atributul este stocat în baza de date.

Cu toate acestea, nu stochează aceste taxonomii în wp_term_taxonomy tabelul și wp_terms cum ar fi atunci când înregistrați o taxonomie obișnuită personalizată în WordPress. În schimb, WooCommerce creează tabele pentru atribute, ceea ce înseamnă că datele sunt stocate diferit. Acest lucru înseamnă că trebuie să abordăm o abordare mai girantă pentru a accesa eticheta pentru fiecare taxonomie la afișarea respectivei liste.

În tine tutsplus_list_attributes () , eliminați cele două linii din interiorul funcției. Înlocuiți-le cu acest cod:

produs global $; postare globală $; $ atribute = $ product-> get_attributes (); dacă (! atributele) return;  foreach (atributele $ ca atribut $) // Obțineți taxonomia. $ terms = wp_get_post_terms ($ product-> id, $ atribut ['name'], 'all'); taxonomie $ = taxe [0] -> taxonomie; // Obțineți obiectul taxonomie. $ taxonomy_object = get_taxonomy (taxonomie $); // Obțineți eticheta atributului. $ attribute_label = $ taxonomie_object-> etichete-> nume; // Afișați eticheta urmată de o listă de termeni pe care se poate da clic. echo get_the_term_list ($ post-> ID, $ atribut ['name'], '". $ attribute_label. ':', ',', '
');

Iată ce face acest cod:

Acesta definește globul $ produs variabilă (care este un obiect al funcției noastre).
Folosește $ Produs-> get_attributes () pentru a prelua toate atributele pentru acest produs.
Dacă nu există, nu face nimic.
Dacă există atribute, se deschide a pentru fiecare bucla pentru fiecare dintre ele.
Pentru a prelua eticheta, utilizează wp_get_post_terms () și get_taxonomy () funcții pentru a prelua matricea de date referitoare la această taxonomie pentru acest post.
Apoi, reiese numele (sau eticheta) din taxonomie (sau atribut), urmată de o listă de link-uri către arhive pentru fiecare valoare folosită get_the_term_list ().

Atributele sunt afișate acum într-o listă:

Mult mai bine!

Credință: Mulțumesc Isabel Castillo pentru ca codul să afișeze eticheta atributului.

rezumat

Mutarea atributelor de produs în pagina de produs necesită un pic de muncă încurcând în codul sursă WooCommerce și identificând fișierele șablonului, cârligele și funcțiile care joacă un rol în afișarea atributelor produsului.

Prin găsirea filtrului care controlează filele care sunt afișate, am reușit să eliminăm informatii suplimentare care a eliminat atributele din partea de jos a ecranului. Apoi, prin adăugarea unei noi funcții unui cârlig mai sus în pagină, am reușit să le trimitem acolo unde vrem.

Dacă sunteți interesat să încorporați alte funcții WooCommerce în site-ul dvs., verificați ce este disponibil pe piață, precum și.

Cod