Skapa anpassade WooCommerce-produktflikar med avancerade anpassade fält

När du tittar på en produkt i WooCommerce visas information om produkten i flikar. Dessa flikar är fixade och genererade av WooCommerce, utanför din kontroll. Det här inlägget kommer att visa dig hur du lägger till kod som gör att författarna kan lägga till anpassade flikar med anpassat innehåll till produkter.

Ansvarsfriskrivning: Det finns ett WooCommerce-tillägg som heter WooCommerce Tab Manager som tillhandahåller den här funktionen. Det är dock inte gratis. Jag har inte testat det själv, men såvitt jag kan se stöder det bara en WYSIWYG-redigerare (det du ser är vad du får) för flikens innehåll. Det här inlägget är för dig som vill ha mer finjustering av flikens innehåll eller vill skriva koden själv utan att betala för ytterligare ett plugin.

Vi kommer att använda plugin -programmet Advanced Custom Fields (ACF) för att förenkla processen. Men du borde ganska enkelt kunna ersätta ACF:s del med din egen anpassade kod om du inte vill använda plugin. ACF kommer i en gratisversion och en Pro-version. I ACF Pro finns en fiffig fälttyp: repeatern, som är perfekt för den här typen av användning. Om du däremot inte har eller vill köpa en Pro-licens, oroa dig inte. Kodhandledningen nedan visar dig hur du lägger till fält med både gratisversionen – och med repeatern i Pro-versionen.

Om du inte redan är bekant med ACF, vad ACF hjälper oss med är enkel installation av post-metafält – av alla slag. Du kan enkelt lägga till en redigerare, en filväljare, datum- eller färgväljare, ett inlägg eller kategoriväljare med stöd för flera val och omordning och mer. Vi kan uppnå samma sak utan ACF men då skulle vi behöva koda visningen och spara av metaboxars innehåll själva.

Vad vi ska göra

För att uttrycka det enkelt vill vi tillåta att lägga till anpassade flikar i produktvyn. Varje flik stöder en titel som visas som fliketikett och innehållet som visas när du klickar på fliken. De anpassade flikarna beror verkligen på vilken typ av projekt eller behov du har; kanske behöver du flikar för tekniska specifikationer, en flik med filer (t.ex. användarmanualer och sådant), ytterligare information eller en anpassad fråga som visar relaterade produkter.

I den här handledningen kommer vi att hålla det enkelt genom att lägga till en WYSIWYG-redigerare för flikens innehåll. Som nämnts ovan är det lätt att implementera andra fälttyper (t.ex. filer eller en inläggsfråga), det är bara en skillnad i koden du skriver för som visas på flikens innehåll – vilket inte är relaterat till denna handledning.

Om du har ACF Pro och vill använda repeatern för att enkelt lägga till flera flikar; hoppa över nästa avsnitt. Om du bara har gratisversionen av ACF, fortsätt. Nackdelen med att inte ha repeaterfältet är att du måste definiera ett fast antal flikar. Så författaren kan inte göra obegränsat antal flikar som de kan med repeatern. Men den här gratislösningen kommer att fungera utmärkt i webbutiker där du bara vill ha specifika (antal) anpassade flikar.

Handledning för ACF gratis version

Lägger till ACF-fälten

Att lägga till en ny metabox med fält i är väldigt enkelt med ACF. Du har två alternativ; använd ACF:s användargränssnitt för att ställa in allt, eller lägg till fälten med kod. Vanligtvis är det rätt väg att ställa in fälten i admin. Men om du behöver försäkra dig om att fälten finns på flera WordPress-webbplatser (t.ex. utveckling av lokalvärd, testserver och liveserver) kan du ha nytta av att lägga till fälten med kod i ditt tema eller plugin.

Du måste ställa in följande:

• En grupp som visar när inläggstypen är lika med WooCommerce-produkter
• En textinmatning för fliktiteln
• Vilket/vilka fält du än vill ha för flikens innehåll. Som ett exempel lägger vi till en WYSIWYG-redigerare.
• (Valfritt) Ytterligare fliktitlar och flikinnehåll för så många flikar vi vill stödja.

Vänligen notera att komma ihåg fältnamnen eftersom du behöver hänvisa till dem senare. Jag har definierat fliktiteln som tab_titleoch WYSIWYG-fältet som tab_contents.

Om du hellre vill lägga till fälten med kod, här är ett exempel. Lägg till detta i ditt tema functions.phpeller plugin-fil:

Om du vill ha mer än bara en flik lägger du bara till ytterligare en uppsättning flikrubriker och flikinnehåll efter line #19. Kom bara ihåg att hålla nameunik.

När vi redigerar en produkt bör vi se denna metabox visas:

Utmatning av dina anpassade flikar

WooCommerce låter oss filtrera woocommerce_product_tabsför att manipulera flikar. Som argument till detta filter får du en array för alla flikar. Arrayen består av arrayer för varje flik med unika nycklar. Men arrayen för varje flik innehåller inte den faktiska utmatningen av flikinnehållet. Istället förväntar den sig en callback – ett namn på en funktion som WooCommerce kommer att köra för att mata ut flikens innehåll.

Väl inne i funktionen kan du använda global $postför att få tillgång till det aktuella postobjektet, eller om du vill att produktobjektet WooCommerce genererar gör du helt enkelt global $product. Vi behöver post-ID för att hämta värdet på våra anpassade fält med ACF:s funktion [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). I kodexemplet nedan hämtar vi bara fliktiteln och kontrollerar om denna är tom eller inte. Om den inte är det lägger den till en ny flik till arrayen. Det är vettigt att inte lägga till flikar där fliktiteln är tom.

Observera att du kan använda ‘ priority‘ för att styra flikens position. Om du till exempel ställer in den till 1 kommer din flik att visas först, före alla WooCommerces flikar. Definiera ett funktionsnamn för callbackelementet ‘ ‘. I rad #17definierar vi funktionen som WooCommerce kommer att köra för att mata ut flikinnehållet.

Dessa flikåteruppringningsfunktioner kommer att få två parametrar; nyckeln och matriselementet för alla värden för den aktuella fliken. Inuti vår callback-funktion matar vi ut fliktiteln igen, genom att hänvisa till den tillhandahållna $tabarrayen. WooCommerce ekar deras fliktitlar inuti en h2så vi gör bara detsamma. Och sedan använder vi get_field()för att få värdet på flikinnehållet och helt enkelt upprepa värdet. Justera linje #23för att passa vilken typ av fälttyper du har lagt till (t.ex. postobjektväljare, bilder eller något annat).

Observera att jag har packat in allt i en if-check som kontrollerar om både WooCommerce och ACF är aktiverade eller inte. Detta är god praxis för att förhindra att din webbplats går sönder.

Och det är det! Du har nu skapat kod för att lägga till anpassade WooCommerce-flikar!

Om du vill göra detta med ACF Pros repeaterfält för att stödja obegränsat antal flikar, läs vidare.

Handledning för ACF Pro och repeater

Lägger till ACF-fälten

Lägg till din grupp med antingen ACF:s admin-gränssnitt eller lägg till dem med kod i dina tema- eller plugin-filer. Vi behöver ställa in följande:

• En grupp som visar när inläggstypen är lika med WooCommerce-produkt
• En repeater med följande underfält:
  • En textinmatning för fliktiteln
  • Vilket/vilka fält du än vill ha för flikens innehåll.

Så här skulle du ställa in det med ACF admin:

Eller så kan du lägga till gruppen med kod så här:

Hur som helst bör du sluta med denna metabox när du redigerar produkter:

Utmatning av dina anpassade flikar

Att skriva ut dina anpassade flikar är mycket likt det vi gjorde ovan i gratisversionen. Vi filtrerar woocommerce_product_tabs, men här går vi igenom varje upprepat objekt från repeatern. Vi behöver ett sätt att identifiera varje element i repeatern med nycklar, så vi genererar en nyckel själva genom att använda looppositionen och en slug-version av fliktiteln. I återuppringningsfunktionen extraherar vi slingpositionen från nyckeln och använder denna för att referera till arrayen för vår repeater.

Inuti vår filterfunktion hämtar vi värdet på repeatern och kontrollerar om den inte är tom. Vi definierar sedan en räknarvariabel, som börjar vid 0 (matriser börjar alltid med position 0), som vi ökar med 1 för varje element inuti slingan (vid linje #18). I slingan för varje repeaterobjekt tilldelar vi dem alla samma återuppringningsfunktion. Vi använder WordPress funktion [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()för att konvertera fliktiteln till en slug-version av den och lägger till den i nyckeln.

I vår callback-funktion at line #31 - 32gör vi några enkla strängmanipulationer för att extrahera räknarvärdet (som börjar på 0 och ökar med 1 för varje objekt). Vi använder sedan helt enkelt detta som index för repeater-arrayen för att hämta rätt flikinnehållsfält.

Och det är det! Du har nu implementerat ett obegränsat antal anpassade flikar till WooCommerce!

Kom ihåg att du kan ersätta WYSIWYG med vilken typ av fält som helst. Du behöver bara ändra hur du matar ut fältet på raden #23.

Slutsats

Att skriva din egen kod för att lägga till anpassade WooCommerce-flikar är väldigt enkelt när du har förstått grundkonceptet för hur WooCommerce gör det. Det kräver inte ens mycket kod. Det här är en alldeles utmärkt lösning för dig som inte vill eller kan investera i förlängningslicenser eller bara behöver en enkel lösning för din webshop.