Hur man lägger till anpassade fält och flikar i WooCommerce Product Data Metabox efter kod

I det här inlägget kommer vi att lära oss hur du lägger till dina anpassade metafält i WooCommerces produktdatametabox; hur man lägger till fält och även hur man lägger till en egen anpassad flik. Vi kommer att gå in i detalj om hur du lägger till dina fält, var du lägger till dem, hur du sparar dem och slutligen hur du visar dem i frontend.

Lägga till anpassade fält till befintliga paneler

Först ska vi titta på hur man lägger till ett fält till befintliga paneler. Vi måste haka i två krokar; en för att mata ut fältet och en för att spara värdet på det. Den första kroken beror på vilken flik du vill visa ditt fält i.

Metaboxen Produktdata

Tänk på att flikarnas synlighet varierar beroende på produkttyp. Fliken "Allmänt" tas till exempel bort när du byter till en grupperad produkttyp. Så du bör inte bara tänka på var dina anpassade fält logiskt passar in, utan du måste överväga en panel som är synlig för alla dina önskade produkttyper. är en lista över de mest allmänna tillgängliga krokarna:

• woocommerce_product_options_general_product_data("Allmän")
• woocommerce_product_options_inventory_product_data("Lager")
• woocommerce_product_options_shipping("Frakt")
• woocommerce_product_options_related("Länkade produkter")
• woocommerce_product_options_attributes("Attribut")
• woocommerce_product_options_advanced("Avancerad")

Lägga till en formulärinmatning

När det gäller att mata ut en formulärinmatning kan du manuellt mata ut formulärinmatningen HTML (t.ex. <input type="text"...>), men WooCommerce erbjuder enkla funktioner för att enkelt lägga till fält av alla typer. Jag rekommenderar att du använder dem. Kolla in WooCommerces översikt över alla möjliga indatatyper här, och vilka argument du kan skicka för att styra utdata.

När det gäller denna handledning kommer jag att lägga till en enkel textinmatning på inventeringsfliken för att skriva antalet artiklar i varje paket. När det gäller nyckeln som ditt anpassade värde sparas som, lägg alltid till ett understreck "_" före det, i mitt fall blir det "_number_in_package":

Spara och redigera en produkt. Du bör se ditt anpassade fält visas längst ned på fliken Inventering:

Det anpassade fältet "Nummer i paket" läggs till längst ner

En notering om fältsynlighet beroende på produkttyp

WooCommerces produktdatametabox kommer med en hel del Javascript som döljer och visar både fält och flikar/paneler. Du kan enkelt använda detta om du vill att ditt fält ska vara synligt endast för specifika produkttyper, genom att ange specifika klassnamn till ditt fält.

Låt oss säga att du vill att ditt fält endast ska visas om produkten är av typen enkel produkt, eller du vill att den ska döljas om produkten är en variabel produkt. WooCommerce lyssnar på specifika klassnamn som show_if_<producttype>och hide_if_<producttype>och du kan kombinera flera klasser för att finjustera när ditt fält ska vara dolt eller synligt.

Till exempel, om jag vill att mitt område endast ska vara synligt för enkla produkter; Jag lägger till detta i ‘ wrapper_class‘ till min fältinmatning:

Du kan också ställa wrapper_classin på t.ex. ‘ show_if_simple show_if_grouped‘ för att fältet endast ska vara synligt för produkter som antingen är enkla eller grupperade. Prova själv!

Sparar ditt anpassade fält

Från och med just nu sparas inte allt du anger i ditt fält. Låt oss göra det härnäst. Vi hakar på woocommerce_process_product_metaoch sparar värdet från PHPs globala $_POST(formulärinlämning).

Låt mig snabbt förklara ovanstående kod. Du kan helt enkelt spara fältet genom att använda update_post_meta(), men i nyare versioner av WooCommerce har hanteringen av produktmeta förbättrats avsevärt. Så länge du har produktobjektet (som vi får genom att ringa wc_get_product()med post-ID) kan du enkelt manipulera eventuell produktinformation i objektet, och slutligen ringa save()en gång för att uppdatera eventuella ändringar. Detta är mycket fördelaktigt, särskilt om du vill spara flera fält – i så fall behöver du inte köra databasoperationer för varje fält, bara den sista gången du anropar save().

Använd update_meta_data()på objektet för varje metadata du vill spara.

Med ovanstående funktion bör ditt fält nu sparas när du uppdaterar det i redigera produkt! Observera också att genom att använda WooCommerces funktioner för att mata ut fältet, behöver du inte manuellt få värdet på ditt fält innan du matar ut fältet – det är helt automatiskt.

Mata ut ditt anpassade fält i frontend

Första steget är att ta reda på vilken krok du vill använda för att mata ut ditt anpassade fält. WooCommerce erbjuder massor av tillgängliga krokar för att styra specifikt var du vill ha utdata. Om du är osäker, ta en titt på plugins/woocommerce/templates/och inuti dessa filer kan du enkelt hitta en lämplig krok. Du kan också åsidosätta mallen och lägga till utdata i mallen, men jag rekommenderar alltid att använda krokar istället.

När det gäller mig vill jag att mitt anpassade fält ska matas ut i en enda produkt, inuti meta div – längs där WooCommerce matar ut SKU och kategori. För detta ska jag använda kroken woocommerce_product_meta_start. Inuti krokarna (som med nästan alla mallkrokar) kan du komma åt det globala postobjektet. Jag följer samma tumregel som när jag sparar mitt fält; använd get_meta()på produktobjektet för att få mitt anpassade fält:

Lägga till en anpassad flik och panel till produktdatametabox

Om du vill lägga till en samling anpassade fält som logiskt hör ihop, kan det vara en bra idé att gruppera dem på en anpassad flik. För att lägga till en anpassad flik till produktdatametaboxen måste vi ansluta till ett filter för att lägga till själva fliken och en krok för att mata ut panelens innehåll. Slutligen behöver vi fortfarande lägga till samma krok som ovan för att spara våra fält.

För till exempel kommer jag att lägga till en anpassad panel som heter "Ytterligare info" där jag vill lägga till en textinmatning, en kryssruta och en nummerinmatning.

Först filtrerar vi woocommerce_product_data_tabsoch lägger till vår flik till dess array.

Det finns några användbara argument vi kan ge här. Du kan till exempel använda ‘ class‘ för att kontrollera flikens synlighet beroende på produkttyp. Om du missade det, kolla in avsnittet om fältsynlighet som nämns ovan. Men kom ihåg att i flikar måste du tillhandahålla klasserna som en array, inte en sträng. Du kan också ange ‘ priority‘ för att bestämma var din flik ska visas. Använd t.ex. 25 för att placera fliken direkt efter "Inventering".

Som standard visas din flik med en skiftnyckel som ikon. Tyvärr finns det (för närvarande) inget sätt att styra det via filtret. Om detta är viktigt för dig kan du lägga till admin CSS och tillhandahålla en annan klass på din flik. Här är en översikt över tillgängliga ikoner i WooCommerce.

Panelutgång

Nästa steg är att koppla in woocommerce_product_data_panelsoch mata ut innehållet på din panel. En viktig anmärkning här är att starta utgången med en divmed ett idattribut med samma namn som du angav som nyckel i tabbar (i mitt fall ‘ additional_info‘). När det gäller innehållet är det upp till dig – du kan lägga till vilken HTML du vill, men jag rekommenderar att du använder WooCommerces funktioner för att mata ut formulärfält. Samma fördelar för att gömma eller visa fält kommer att fungera här också.

Efter att du har sparat ska du nu se fliken och dess innehåll i Product data metabox (om inte produkten är en extern produkt förstås).

Allt som återstår är att spara de uppgifter som anges i dina anpassade fält, och för detta använder vi samma process som ovan:

Obs: I WooCommerce finns det en allmän regel där alla kryssrutor sparas som ‘ yes‘ om de är markerade, eller som tom sträng om de är avmarkerade. Genom att följa WooCommerces regel och spara min kryssruta som ‘ yes‘, säkerställer detta att mitt woocommerce_wp_checkbox()fungerar som det är tänkt när det hämtar det aktuella värdet för mitt fält.

Slutsats

I det här inlägget kommer jag att visa hur du lägger till dina anpassade fält till WooCommerces produktdatametabox, hur du sparar dem, hur du kontrollerar deras synlighet och ett enkelt exempel på att mata ut ditt fält i frontend. Jag visade också hur man lägger till en anpassad flik i metaboxen och lägger till dina fält där. Jag hoppas att detta hjälpte dig att anpassa WooCommerce själv!