Hur man gör WooCommerce-produktattribut mer framträdande

WooCommerce-produktattribut är en väldigt användbar funktion, men de är som regel dolda helt ner på sidan, i ytterligare information sektion. Beroende på ditt tema kan de inte vara synliga förrän användaren klickar på en flik, vilket innebär att många användare kanske inte tittar på dem. 

Ibland är det mer användbart att få dem listade i den övre delen av produktsidan tillsammans med produktkategorier. I denna handledning visar jag dig hur du flyttar produktattribut från ytterligare information fliken till den övre delen av sidan.

Vad du behöver

För att följa med, behöver du:

• En utvecklingsinstallation av WordPress.
• En kodredigerare.
• WooCommerce installerad och aktiverad.
• Produkter tillagd-Jag har importerat de dummiga produktdata som följer med WooCommerce; För detaljer om hur du gör det, se den här guiden.
• Ett eller flera produktattribut läggs till (den inbyggda färgattributen med dummy-data fungerar inte på standard sätt).
• Ett WooCommerce-kompatibelt tema aktiverat-jag använder Storefront.

För att lägga till attributen närmare toppen av produktsidan gör vi följande saker:

1. Skapa ett tomt plugin och aktivera det.
2. Titta på källkoden WooCommerce för att identifiera filtret som styr produktegenskaper som läggs till i flikarna längst ner på sidan.
3. Lägg till en funktion som är ansluten till det filtret för att ta bort fliken för attribut.
4. Titta på källfilerna igen för att identifiera kroken som drar i innehåll längst upp på sidan.
5. Haka en funktion till det istället.

Låt oss börja med att titta på hur våra produktattribut ska visas som standard. Jag har skapat ett attribut som heter Storlek och jag har lagt till tre värden: små, medelstora och stora. Här visas den i ytterligare information avsnitt längst ned på en produktsida:

Vi vill flytta de här produktegenskaperna längst ner på skärmen upp till vänster, under produktbeskrivningen.

Skapa plugin

Skapa en ny fil i din wp-innehåll / plugins-mapp. Jag ringer min woocommerce-framträdande biprodukt-attributes.php. Öppna den filen och lägg till följande:

Spara filen och gå till plugins skärm i din WordPress dashboard. Aktivera plugin.
WooCommerce Källkod: Produkt Attribut Display
Låt oss börja med att identifiera funktionen och kroken som används för att utföra produktegenskaper. Detta innebär att du reser genom några av pluginfilerna:
 
Mallen som matar ut den enskilda produktsidan är woocommerce / mallar / single-product.php.
 
Inom den filen finns det a get_template_part () ring till innehåll-single-product.php fil.
 
I den filen finns en åtgärd som heter woocommerce_after_single_product_summary. Tre funktioner är anslutna till den: den vi behöver titta på är woocommerce_output_product_data_tabs ().
 
Du kan hitta woocommerce_output_product_data_tabs () funktion i woocommerce / includes / wc-template-functions.php.
 
Funktionen använder wc_get_template () att hämta en annan malldel, i det här fallet wooocommerce / mallar / enkel-produkt / flikar / tabs.php.
 
I den filen (vi kommer dit, lovar jag!) Det heter en variabel $ flikar, som definieras som apply_filters ('woocommerce_product_tabs', array ());.
 
Så för att ta bort fliken produktattribut måste vi skapa en funktion som tar bort den fliken och koppla den till woocommerce_product_tabs filtrera. 
 
Phew! Vi kom dit i slutet.
Ta bort produktattribut från flikarna med hjälp av ett filter
Lyckligtvis innehåller WooCommerce-dokumentationen vägledning om hur man tar bort flikar med hjälp av det här filtret, vilket gör vårt jobb lite enklare.
Lägg till den här koden i din plugin-fil:
/ ** * Tar bort fliken "Ytterligare information" som visar produktattributen. * * @param array $ tabs WooCommerce-flikar som ska visas. * * @return array WooCommerce-flikar som ska visas, minus "Additional Information". * / funktion tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); returnera $ flikar;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Denna funktion har $ flikar som dess syfte eftersom det är den variabel vi jobbar med. Det tar bort 'ytterligare information' fliken från den grupp av värden som lagras av $ flikar variabel. Observera att jag har använt en hög numrerad prioritet på 100 när du hakar min funktion för att säkerställa att den brinner efter de funktioner som lägger till flikarna i första hand.
Spara filen och uppdatera produktsidan:
Så det är fliken borttagen. Nu måste vi lägga till produktattributen tillbaka längst upp på sidan.
Hitta platsen i koden för att lägga till attribut
Återigen måste vi identifiera var i koden vi behöver lägga till en funktion för att visa produktegenskaper. Med andra ord måste vi hitta en handkrok.
Kommer tillbaka till innehåll-single-product.php fil, det är en krok som heter woocommerce_single_product_summary som används av sju funktioner som varje utmatar en annan bit data om produkten, nämligen:
 
titeln
 
betyget
 
priset
 
utdraget (dvs den korta beskrivningen)
 
knappen Lägg till i kundvagnen
 
metadata
 
dela länkar
 
Jag vill lägga till mina attribut i avsnittet för metadata, så låt oss ta en titt på funktionen som matar ut det.
Funktionen är i wc_template_functions.php fil, och den använder wc_get_template () att ringa en annan inkludera fil, woocommerce / mallar / enkel / produkt / meta.php.
I meta.php fil, det finns kod för att mata ut metadata om produkten, med woocommerce_product_meta_start krok före den och woocommerce_product_meta_end krok efter det. Så vi kan använda en av de två krokarna för att utföra våra produktegenskaper. Låt oss använda den sista, eftersom det kommer att göra att attributen visas efter kategorier och taggar.
Skriva en funktion för att utföra produktegenskaper
Duplicera koden redan tillhandahållen av WooCommerce
För att skriva ut en lista med taxonomi villkor för vår produkt kan vi använda den funktion som tillhandahålls av WooCommerce kallad list_attributes (). Du hittar den här funktionen i templates / enkel / produkt / flikar / extra-information.php fil.
Lägg till följande i din plugin-fil:
/ ** * Visar produktegenskaper längst upp till höger på produktsidan. * * @param $ produkt * / funktion tutsplus_list_attributes ($ produkt) global $ product; $ Produkt-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Observera att du inte behöver använda en prioritet eftersom WooCommerce inte har några andra funktioner anslutna till den här handlingen.
Uppdatera nu din produktsida:
Nu visas attributen. De använder ett flikliknande gränssnitt med temat Storefront som det är vad som är inställt för standard ytterligare information fliken och HTML-utgången använder en tabell, som tillhandahåller standardlayouten. 
Alternativ metod utan tabell
Det bordet är inte idealiskt: det är bättre att ha en lista över produktegenskaper, för att matcha listan över produktkategorier ovanför den. Låt oss göra det.
WooCommerce lagrar attribut som anpassade taxonomier. Den slug du skapar för var och en av dina attributvärden föregås av a årligen_ suffix när attributet är lagrat i databasen. 
Det lagrar dock inte dessa taxonomier i wp_term_taxonomy bord och wp_terms tabell som du skulle när du registrerade en normal anpassad taxonomi i WordPress. Istället skapar WooCommerce tabeller för attributen, vilket betyder att data lagras annorlunda. Det innebär att vi måste göra ett mer rundabot-tillvägagångssätt för att komma åt etiketten för varje taxonomi vid utmatning av den listan.
I din tutsplus_list_attributes () funktion, ta bort de två linjerna inuti funktionen. Byt ut dem med den här koden:
global $ produkt; global $ post; $ attribut = $ produkt-> get_attributes (); om (! $ attribut) return;  foreach ($ attribut som $ attribut) // Hämta taksonomin. $ terms = wp_get_post_terms ($ produkt-> id, $ attribut ['name'], 'all'); $ taxonomy = $ termer [0] -> taxonomi; // Hämta taxonomiobjektet. $ taxonomy_object = get_taxonomy ($ taxonomy); // Hämta attributetiketten. $ attribute_label = $ taxonomy_object-> labels-> name; // Visa etiketten följt av en klickbar lista med termer. echo get_the_term_list ($ post-> ID, $ attribut ['name'], '
'. $ attribute_label. ':', ',', '
'); 
Här är vad den här koden gör:
 
Det definierar det globala $ produkt variabel (vilket är ett föremål för vår funktion).
 
Det använder $ Produkt-> get_attributes () för att hämta alla attribut för denna produkt.
 
Om det inte finns något gör det ingenting.
 
Om det finns attribut, öppnas det a för varje slinga för var och en av dem.
 
För att hämta etiketten använder den wp_get_post_terms () och get_taxonomy () Funktionerna för att hämta den mängd data som gäller denna taxonomi för detta inlägg.
 
Det echoes sedan namnet (eller märka) av taxonomin (eller attributet), följt av en lista med länkar till arkiven för var och en av de värden som används get_the_term_list ().
 
Attributen visas nu i en lista:
Mycket bättre!
Kredit: Tack till Isabel Castillo för att koden ska visa attributetiketten. 
Sammanfattning
Flytta produktattribut på produktsidan tar lite arbete som delas in i källkoden WooCommerce och identifierar mallfiler, krokar och funktioner som spelar en roll för att visa produktegenskaper.
Genom att hitta filtret som styr vilka flikar som matas ut kunde vi ta bort ytterligare information fliken, som tog bort attribut från undersidan av skärmen. Genom att lägga till en ny funktion till en krok högre upp på sidan kunde vi utmata dem där vi ville ha det.
Om du är intresserad av att integrera annan WooCommerce-funktionalitet i din webbplats, kolla vad som finns tillgängligt på marknaden.



		
			
	   
	




Koda