Söker du ett sätt att lägga till anpassade fält på WooCommerce-produktsidor?

Oavsett om du vill lägga till detaljerade specifikationer på en WooCommerce-produktsida eller om du är intresserad av att visa alternativa produktvarianter med ett klick på en knapp, tar det bara några ögonblick att lägga till anpassade fält i WooCommerce.

Efter det kan du anpassa alla delar av din WooCommerce-instrumentpanel och snabbt införliva webbplatsinformation som vanligtvis skulle kräva manuell datainmatning.

Exempel på användning av anpassade fält för WooCommerce

När kan anpassade fält i WooCommerce vara användbara?

• För att lägga till ytterligare produktinformation för saker som datorer, där du kan visa tekniska specifikationer som RAM-minne och processorkraft.
• Kampanjmeddelanden som du snabbt kan ändra till något annat.
• Utomatiska medieelement som inte kan infogas med hjälp av standardfunktionerna i WooCommerce, till exempel en extra video.
• Datum och tider för när du har en nedräkning, auktion eller ett lanseringsdatum för en produkt.
• Extra produktalternativ, utöver varianter, som kunderna kan titta igenom.
• Paragrafer för att förklara detaljerade instruktioner för hur man använder en produkt.
• Add-on-erbjudanden där användaren blir presenterad för flera merförsäljningserbjudanden som kompletterar den aktuella produkten. Exempel är borstfästen för elektroniska tandborstar eller olika berlocker till ett armband.
• Någon ovanlig eller extra data som du vill införliva på en produktsida och som antingen inte stöds av WooCommerce eller som är lättare att fylla i med anpassade fält.

Hur du lägger till anpassade fält på WooCommerce-produktsidor

I det här exemplet gör vi en låtsas-datorbutik som säljer bärbara datorer. Det skulle ta mycket tid att skriva in dataspecifikationer för varje ny bärbar dator, så istället inkluderar vi fält för att välja dessa specifikationer baserat på de typer av datorer vi säljer.

För att lägga till anpassade fält till WooCommerce-produkter måste du installera det kostnadsfria insticksprogrammet Advanced Custom Fields på din WordPress-webbplats. Så här ställer du in det…

Här får du veta hur du steg för steg lägger till anpassade fält i WooCommerce produktsidor:

1. Skapa en ny fältgrupp
2. Lägg till dina anpassade fält
3. Konfigurera ytterligare fältgruppsinställningar
4. Lägg till information om produkter
5. Visa information om det anpassade fältet på fronten

Skapa en ny fältgrupp

I din WordPress-instrumentpanel går du till fliken Custom Fields. Klicka sedan på Lägg till ny bredvid Fältgrupper.

Nämn en fältgrupp. Till exempel ”Datorfält”. En fältgrupp är en samling fält som du har för en produkt eller ett avsnitt av din webbplats, till exempel en lista med specifikationer som du vill ska visas på alla produktsidor för bärbara datorer.

Lägg till dina anpassade fält

Klicka på knappen Lägg till fält för att lägga till ett fält i den här gruppen.

Skapa ett:

1. Fälttetikett – främst för din egen referens.
2. Fältnamn – tjänar som bokstäver som du placerar i din egen anpassade kod, eller kortkod i vårt fall. Du kan lämna detta som standardvärdet som insticksmodulen genererar.
3. Field Type – formatet som du skapar för det fältet. Du kan välja mellan alternativ som datumväljare, kryssrutor, dropdowns och radioknappar.

Du kanske också vill lägga in några instruktioner för dig själv eller utvecklaren, tillsammans med en specifikation av om det här fältet är obligatoriskt eller inte.

Om du arbetar med ett fält som har flera alternativ (som radioknappar) måste du härnäst lägga till dina fältval. Det här är de valmöjligheter som du vill ska visas på baksidan av din produktsida, t.ex. olika kärnprocessorer.

Resten av inställningarna är vanligtvis valfria, som standardvärde, layout och om du vill visa värdet eller etiketten.

När du är klar med ett fält eller en grupp klickar du på knappen Publicera eller Uppdatera för att se till att det sparas.

Om du vill lägga till fler fält i din grupp klickar du på knappen Lägg till fält igen.

Här ser det ut med fyra fält i den här gruppen för:

• CPU
• Memory
• Operating System
• Release Date

Konfigurera ytterligare fältgruppsinställningar

När fältgruppen är klar bläddrar du till modulen Location. Det är här du identifierar var du vill att fältgruppen ska visas i din WordPress-instrumentpanel.

Sätt Post Type lika med Product (produkt). Om du vill vara mer specifik kan du också välja en viss kategori av produkter.

Under Inställningar kontrollerar du att fältgruppen är Aktiv. Då kan du se den på dessa produktsidor och eventuellt visa fältvalen för dina kunder.

Stilen beror på dina egna preferenser. Detsamma kan sägas om position, etikettplacering och instruktionsplacering. Allt detta är personliga preferenser och hur du vill formatera din backend. Om du är osäker kan du bara lämna dem som standardvärden.

Sätt ordernummer om du har flera fältgrupper som visas på produktsidor. Detta styr i vilken ordning olika fältgrupper visas.

Du kan också ställa in en beskrivning och dölja vissa detaljer på skärmen.

Lägg till information till produkter

Nästa steg är att navigera till redigeraren för en produkt där du vill lägga till anpassade fält.

Om alla inställningar har konfigurerats på rätt sätt bör du se de anpassade fälten under rutan Produktdata.

För vårt exempel, om du skulle lägga till en ny produktsida för en bärbar dator, kan du välja CPU, Minne, Operativsystem och Utgivningsdatum.

Visa informationen från de anpassade fälten på framsidan

För att slutföra arbetet måste du visa informationen från de anpassade fälten på den enskilda produktsidan på framsidan. Du kan lägga till den här informationen var som helst, men bra utgångspunkter är i den långa eller korta produktbeskrivningen.

För att visa fältinformation på framsidan använder du kortkoden . Lägg till fältnamnet mellan citattecken:

Du kan hitta fältnamnet för varje fält i redigeringsgränssnittet för fältgruppen:

För att slutföra arbetet trycker du på knappen Publicera eller uppdatera.

När du öppnar din produkt i front-end bör du se dina anpassade fält där du lagt till kortkoderna:

Några frågor om hur du lägger till anpassade fält?

Det är ett underbart alternativ för att utöka din kreativitet och göra den tråkiga uppgiften att bygga produktsidor lite enklare.

Vi förstår att insticksprogrammet Advanced Custom Fields har lite av en inlärningskurva, så om du har några tankar eller frågor om att lägga till anpassade fält i WooCommerce, låt oss veta i kommentarerna nedan!

Du kan också kolla in vår fullständiga ACF-handledning för att lära dig mer om hur du använder det här flexibla insticksprogrammet.