Slik lager du WooCommerce-produktegenskaper mer fremtredende

WooCommerce produktattributter er en veldig nyttig funksjon, men som standard er de skjult ganske langt nedover siden, i Tilleggsinformasjon seksjon. Avhengig av temaet ditt, kan de ikke være synlige før brukeren klikker på en kategori, noe som betyr at mange brukere kanskje ikke ser på dem. 

Noen ganger er det mer nyttig å få dem oppført i den øvre delen av produktsiden sammen med produktkategorier. I denne veiledningen vil jeg vise deg hvordan du flytter produktattributter fra Tilleggsinformasjon fanen til den øverste delen av siden.

Hva du trenger

Å følge med, du trenger:

• En utviklingsinstallasjon av WordPress.
• En kodeditor.
• WooCommerce installert og aktivert.
• Produkter lagt til - Jeg har importert dummy produktdata som følger med WooCommerce; For detaljer om hvordan du gjør dette, se denne veiledningen.
• Én eller flere produktattributter lagt til (den innebygde fargeattributtet med dummy-dataene fungerer ikke på standard måte).
• Et WooCommerce-kompatibelt tema aktivert-jeg bruker Storefront.

For å legge til attributtene nærmere toppen av produktsiden, gjør vi følgende:

1. Opprett et tomt plugin og aktiver det.
2. Se på WooCommerce kildekoden for å identifisere filteret som styrer produktattributter som legges til fanene mot bunnen av siden.
3. Legg til en funksjon knyttet til det filteret for å fjerne fanen for attributter.
4. Se på kildefilene igjen for å identifisere kroken som trekker i innhold øverst på siden.
5. Ta en funksjon til det i stedet.

La oss begynne med å se på hvordan våre produktattributter vil bli vist som standard. Jeg har opprettet et attributt som heter Størrelse og jeg har lagt tre verdier til det: små, mellomstore og store. Her vises det i Tilleggsinformasjon delen nederst på en produktside:

Vi ønsker å flytte disse produktattributtene fra bunnen av skjermen til øverst til venstre, under produktbeskrivelsen.

Opprett plugin

I din wp-innhold / plugins-mappe, opprett en ny fil. Jeg ringer til min woocommerce-prominent-produkt-attributes.php. Åpne filen og legg til følgende for det:

Lagre filen og gå til plugins skjermen i WordPress dashbordet. Aktiver plugin.
WooCommerce Kildekode: Product Attribute Display
La oss begynne med å identifisere funksjonen og kroken som brukes til å utføre produktattributter. Dette innebærer å reise gjennom noen av pluginfilene:
 
Malen som utgir enkeltproduktsiden er woocommerce / templates / single-product.php.
 
I den filen er det en get_template_part () ring til innhold-enkelt-product.php fil.
 
I den filen er det en handling kalt woocommerce_after_single_product_summary. Tre funksjoner er hekta på den: den vi trenger å se på er woocommerce_output_product_data_tabs ().
 
Du kan finne woocommerce_output_product_data_tabs () fungere i woocommerce / includes / wc-templat-functions.php.
 
Funksjonen bruker wc_get_template () for å hente en annen maldel, i dette tilfellet wooocommerce / templates / single-produkt / tabs / tabs.php.
 
I den filen (vi kommer dit, lover jeg!) Det heter en variabel $ faner, som er definert som apply_filters ('woocommerce_product_tabs', array ());.
 
For å fjerne produktattributter-fanen må vi derfor opprette en funksjon som fjerner den kategorien og koble den til woocommerce_product_tabs filter. 
 
Puh! Vi kom dit til slutt.
Fjerne produktegenskaper fra fanene ved hjelp av et filter
Heldigvis gir WooCommerce-dokumentasjonen veiledning om hvordan du fjerner faner ved hjelp av dette filteret, noe som gjør jobben litt enklere.
I din plugin-fil legger du til denne koden:
/ ** * Fjerner "Tilleggsinformasjon" -fanen som viser produktattributtene. * * @param array $ tabs WooCommerce-faner å vise. * * @return array WooCommerce-faner å vise, minus "Tilleggsinformasjon". * / funksjon tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); returner $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Denne funksjonen har $ faner som objekt fordi det er variabelen vi jobber med. Det fjerner 'Additional_information' tab fra mengden verdier lagret av $ faner variabel. Legg merke til at jeg har brukt en høy nummerert prioritet for 100 når du hekker min funksjon for å sikre at den brenner etter funksjonene som legger til fanene i første omgang.
Lagre filen og oppdatere produktsiden din:
Så det er fanen fjernet. Nå må vi legge til produktattributene tilbake på toppen av siden.
Finne stedet i koden for å legge til attributter
Igjen må vi identifisere hvor i koden vi trenger å legge til en funksjon for å vise produktattributter. Med andre ord må vi finne en handlingskrok.
Kommer tilbake til innhold-enkelt-product.php fil, det er en krok kalt woocommerce_single_product_summary som brukes av syv funksjoner som hver skriver ut en annen bit av data om produktet, nemlig:
 
tittelen
 
vurderingen
 
prisen
 
utsnittet (det vil si den korte beskrivelsen)
 
Legg til i handlekurven
 
metadata
 
dele koblinger
 
Jeg vil legge til mine attributter i delen for metadata, så la oss se på funksjonen som utsender det.
Funksjonen er i wc_template_functions.php fil, og den bruker wc_get_template () å ringe en annen inkludere fil, woocommerce / templates / single / produkt / meta.php.
I meta.php fil, det er kode for å sende metadata om produktet, med woocommerce_product_meta_start krok før den og den woocommerce_product_meta_end krok etter det. Så vi kan bruke en av de to krokene til å utføre våre produktattributter. La oss bruke den siste, da det vil gjøre attributtene vises etter kategoriene og kodene.
Skrive en funksjon til produktegenskaper fra produktene
Dupliserer koden allerede levert av WooCommerce
For å utgjøre en liste over taksonomiske vilkår for vårt produkt, kan vi bruke funksjonen som tilbys av WooCommerce som heter list_attributes (). Du finner denne funksjonen i templates / enkel / produkt / faner / ekstra-information.php fil.
I din plugin-fil legger du til dette:
/ ** * Viser produktattributter øverst til høyre på produktsiden. * * @param $ produkt * / funksjon tutsplus_list_attributes ($ produkt) global $ product; $ Produkt-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Vær oppmerksom på at du ikke trenger å bruke en prioritet, da WooCommerce ikke har noen andre funksjoner knyttet til den aktuelle handlingen.
Oppdater nå produktsiden din:
Nå vises attributter. De bruker et fliklignende grensesnitt med Storefront-temaet som det er det som er satt opp til standardinnstillingen Tilleggsinformasjon fanen, og output-HTML bruker en tabell, som gir standardoppsettet. 
Alternativ tilnærming uten bord
Det bordet er ikke ideelt: det ville være bedre å få en liste over produktattributter, for å matche listen over produktkategorier over den. La oss gjøre det.
WooCommerce lagrer attributter som egendefinerte taksonomier. Den slug du lager for hver av attributtverdiene dine er foran en av pa_ suffiks når attributtet er lagret i databasen. 
Det lagrer imidlertid ikke disse taksonomiene i wp_term_taxonomy bord og wp_terms tabell som du ville da du registrerte en normal tilpasset taksonomi i WordPress. I stedet lager WooCommerce tabeller for attributter, noe som betyr at dataene lagres annerledes. Dette betyr at vi må ta en mer rundkjøring tilnærming til å få tilgang til etiketten for hver taksonomi når den utgår fra listen.
I din tutsplus_list_attributes () funksjon, fjern de to linjene inne i funksjonen. Erstatt dem med denne koden:
global $ produkt; global $ post; $ attributter = $ produkt-> get_attributes (); hvis (! $ attributter) return;  foreach ($ attributter som $ attributt) // Få taksonomien. $ terms = wp_get_post_terms ($ produkt-> id, $ attributt ['navn'], 'alt'); $ taksonomi = $ vilkår [0] -> taksonomi; // Få taksonomiobjektet. $ taxonomy_object = get_taxonomy ($ taksonomi); // Få attributtetiketten. $ attribute_label = $ taxonomy_object-> labels-> navn; // Vis etiketten etterfulgt av en klikkbar liste over vilkår. echo get_the_term_list ($ post-> ID, $ attributt ['navn'], '
'. $ attribute_label. ':', ',', '
'); 
Her er hva den koden gjør:
 
Det definerer den globale $ produktet variabel (som er et objekt av vår funksjon).
 
Det bruker $ Produkt-> get_attributes () for å hente alle attributter for dette produktet.
 
Hvis det ikke er noen, gjør det ingenting.
 
Hvis det er attributter, åpnes det a for hver loop for hver av dem.
 
For å hente etiketten bruker den wp_get_post_terms () og get_taxonomy () Fungerer for å hente utvalget av data knyttet til denne taksonomien for dette innlegget.
 
Det ekko deretter navnet (eller merkelapp) av taksonomien (eller attributten), etterfulgt av en liste over lenker til arkivene for hver av verdiene som bruker get_the_term_list ().
 
Attributtene vises nå i en liste:
Mye bedre!
Kreditt: Takk til Isabel Castillo for at koden skal vise attributtetiketten. 
Sammendrag
Flytte produktattributter på produktsiden tar litt arbeid deling inn i WooCommerce kildekoden og identifisering av malfiler, kroker og funksjoner som spiller en rolle i å vise produktattributter.
Ved å finne filteret som styrer hvilke faner som er ute, var vi i stand til å fjerne Tilleggsinformasjon fanen, som fjernet attributter fra bunnen av skjermen. Ved å legge til en ny funksjon til en krok høyere opp på siden, kunne vi sende dem der vi ønsket.
Hvis du er interessert i å inkorporere annen WooCommerce-funksjonalitet på nettstedet ditt, kan du sjekke ut hva som er tilgjengelig på markedet.



		
			
	   
	




Kode