V závislosti od vášho obchodného modelu možno budete musieť pridať vlastné polia do svojho WooCommerce Produkty.
Môžu to byť textové polia, výberové políčka, prepínače alebo akýkoľvek iný typ vstupu, na ktorý si spomeniete. Môžete ich pridať tak, aby sa zobrazovali iba v backende pri správe vašich objednávok, alebo ich môžete zobraziť na svojej webovej stránke a v e-mailoch. Naše vlastné polia nebudú pridané do vlastného metaboxu ako zvyčajne. Zobrazia sa v oblasti „Údaje o produkte“ hneď vedľa bežných polí produktov.
V tomto článku vás prevediem pridaním vlastného poľa do produktu WooCommerce – pre vlastnú SKU. Vysvetlím vám, ako môžete toto pole pridať do e-mailových upozornení správcu na nové objednávky. V tomto príklade prevádzkujete dropshippingovú firmu.
Prečo by ste chceli pridať vlastné polia do produktov WooCommerce
Vlastné polia WooCommerce vám umožnia zadávať kódy SKU vášho dodávateľa a zároveň zákazníkom zobrazovať vaše vlastné. Týmto spôsobom môžete rýchlejšie spracovať nové objednávky a tiež môžete na backende WooCommerce vyhľadať svoje vlastné SKU.
WooCommerce je jedným z najjednoduchších doplnkov na rozšírenie a keďže ho v roku 2015 získala spoločnosť Automattic, nikam nevedie. Takže je bezpečné povedať, že háčiky a funkcie, ktoré použijeme v tomto článku, budú k dispozícii aj v budúcnosti.
Predávajte svoje produkty online bez starostí
Náš hosting, oficiálne odporúčaný spoločnosťou WooCommerce, je určený pre online podniky, ako je ten váš
Čo je to háčik?
WordPress poskytuje háčiky ako spôsob, ako pridať vlastnú funkčnosť alebo vlastný dizajn na váš web na preddefinovaných miestach (napr. v hlavičke alebo päte) alebo na preddefinovaných akciách (napr. pridanie produktu do košíka). Umožňujú vývojárom jednoducho implementovať nové funkcie bez toho, aby museli prepisovať celú tému alebo kód pluginu.
Háčiky je možné použiť ako Akcie (tieto háčiky niečo robia) príp Filtre (tieto háčiky manipulujú s údajmi). Dnes použijeme niekoľko akčných háčikov.
Ako pridať vlastný meta produkt WooCommerce
Tu je návod, ako pridať vlastný meta box do produktu WooCommerce. Najprv sa ponoríme do kódu. WooCommerce API nám umožňuje využívať vstavané funkcie, ktoré pridávajú do oblasti produktu všetky druhy vstupných polí. Konkrétne môžete pridať šesť rôznych typov vstupov:
- Textové polia
- Vyberte políčka
- Začiarkavacie políčka
- Prepínače
- Textové oblasti
- Skryté polia
Každé z týchto polí možno pridať na bežné karty produktov WooCommerce viackrát alebo v akejkoľvek kombinácii, ktorú si vyberiete. Tie karty sú:
- generál
- Inventár
- Doprava
- Prepojené produkty
- Atribúty
- Variácie
- Pokročilé
Každá z týchto kariet má špecifické háčiky, ktoré môžeme použiť na pridanie vlastných polí na túto kartu. Čoskoro načrtnem tieto háčiky podrobnejšie, ale najprv by som chcel zdôrazniť, že nie všetky karty sa zobrazujú pre každý typ produktu. Napríklad karta Variácie sa nezobrazuje pre typy produktov Jednoduché a karta Doprava chýba, ak je váš produkt Externý.
Na pridanie polí na ktorúkoľvek z týchto kariet môžete použiť množstvo háčikov:
Všeobecné Tab
woocommerce_product_options_pricing
woocommerce_product_options_downloads
woocommerce_product_options_tax
woocommerce_product_options_general_product_page
Zásoby Tab
woocommerce_product_options_sku
woocommerce_product_options_stock
woocommerce_product_options_stock_fields
woocommerce_product_options_stock_status
woocommerce_product_options_sold_individuálne
woocommerce_product_options_inventory_product_data
Záložka Doprava
woocommerce_product_options_dimensions
woocommerce_product_options_shipping
Karta Prepojené produkty
woocommerce_product_options_related
Atribúty Tab
woocommerce_product_options_attributes
Variácie Tab
woocommerce_variable_product_bulk_edit_actions
Karta Rozšírené
woocommerce_product_options_recenzie
woocommerce_product_options_advanced
Príslušný háčik na použitie môžete nájsť prehľadávaním súborov HTML v priečinku woocommerce/includes/admin/views. Tieto súbory tvoria metaboxy, ktoré vidíte v správcovskom rozhraní pri úprave produktov.
V našom príklade použijeme háčik woocommerce_product_options_sku na pridanie poľa pre druhú SKU priamo pod existujúce pole SKU. Aby sme to dosiahli, implementujeme funkcie poskytované rozhraním WooCommerce API.
Každá funkcia má pole argumentov, ktoré som načrtol v nasledujúcich zhrnutiach. Každý z nich môžete skopírovať a vložiť priamo do súboru functions.php vašej témy (nezabudnite použiť podradenú tému).
Pridanie textového poľa:
https://gist.github.com/jan-koch/cfa2731ff5755fe297990269dd816e2b
Pridanie textovej oblasti:
https://gist.github.com/jan-koch/7fbec8d1a0b89fd6761343a9245e77e0
Pridanie poľa výberu:
https://gist.github.com/jan-koch/5dd8897b974969ed66204e92f6a05ef4
Pridanie prepínačov:
https://gist.github.com/jan-koch/c0efab4f2ec7222eab50e4646be01971
Pridanie začiarkavacieho políčka:
https://gist.github.com/jan-koch/312cfc891e7118f29a2fc99f13af7612
Pridanie skrytého poľa:
https://gist.github.com/jan-koch/d28d02ed4885eb096642501ddcc20245
Pravdepodobne už tušíte, že textové pole použijeme na uloženie našej vlastnej SKU. Aby sme to dosiahli, implementujeme nasledujúcu funkciu do funkcií podradenej témy.php:
function jk_add_custom_sku() {
$args = pole(
‘label’ => __( ‘Vlastné SKU’, ‘woocommerce’ ),
‘placeholder’ => __( ‘Sem zadajte vlastnú SKU’, ‘woocommerce’ ),
‘id’ => ‘jk_sku’,
‘desc_tip’ => pravda,
‘description’ => __( ‘Toto SKU je len na interné použitie.’, ‘woocommerce’ ),
);
woocommerce_wp_text_input( $args );
}
add_action( ‘woocommerce_product_options_sku’, ‘jk_add_custom_sku’ );
Pri použití tohto útržku kódu uvidíte vlastné pole SKU na karte Inventár priamo pod pôvodným poľom SKU. Neváhajte a prispôsobte štítok a popis podľa potreby.
Pri úprave ID ‘jk_sku’ však buďte opatrní, pretože funkcie ukladania a zobrazenia závisia od tohto ID a bolo by potrebné ich upraviť.
Ukladanie meta produktu WooCommerce Custom Product
Keď pridáme pole pre vlastnú jednotku SKU, musíme to povedať WooCommerce čo s tým robiť, keď je produkt uložený. Sám o sebe vyššie uvedený kód neurobí nič a neuloží hodnotu. To samozrejme nie je to, čo chceme, takže rozšírme tento kód a pridajte funkciu ukladania.
Aby sme to dosiahli, využijeme háčik woocommerce_process_product_meta. S nasledujúcou funkciou váš Obchod WooCommerce uloží nové vlastné pole SKU keď uložíte produkt:
function jk_save_custom_sku( $post_id ) {
// získajte vlastný kód SKU z $_POST
$custom_sku = isset( $_POST[ ‘jk_sku’ ] ) ? sanitize_text_field( $_POST[ ‘jk_sku’ ] ): ”;
// chytiť produkt
$produkt = wc_get_product( $post_id );
// uložte vlastnú SKU pomocou vstavaných funkcií WooCommerce
$product->update_meta_data( ‘jk_sku’, $custom_sku );
$product->save();
}
add_action( ‘woocommerce_process_product_meta’, ‘jk_save_custom_sku’);
Tu je zhrnutie obsahujúce oba útržky kódu. Kód môžete pridať priamo do svojho súboru functions.php.
Dovoľte mi vysvetliť funkciu začínajúcu jej spúšťacím bodom, háčikom woocommerce_process_product_meta. Pripája sa k funkcii WC_Meta_Box_Product_Data::save, ktorá nám umožňuje aktualizovať meta polia produktu bez volania bežných funkcií „add_post_meta“ alebo „update_post_meta“.
Uprednostňujem tento prístup pred používaním bežných funkcií na manipuláciu s meta poľami WooCommerce, pretože zaisťujeme, že všetky údaje o produktoch sa pri ukladaní našich vlastných polí WooCommerce správne spracujú.“
Bezpečné spracovanie údajov a dezinfekcia údajov
Keďže ako vývojári nemôžeme očakávať, že budeme vedieť, ako používateľ toto nové pole využije, ani ako dobre bude web v budúcnosti spravovaný (napr. udržiavanie aktualizácie webu alebo vynucovanie silných hesiel), musíme si dávať pozor na to, aké skladujeme v tomto poli.
Aby sme zaistili, že naša funkcia ukladá iba platné údaje, pred pridaním do databázy spúšťame hodnotu poľa prostredníctvom poľa sanitize_text_field.“
Prístup k vlastným metapolám produktu WooCommerce vo frontende alebo v e-mailoch
Teraz, keď sme úspešne implementovali backendovú funkcionalitu vlastného poľa SKU, poďme ju využiť pri každodennom prevádzkovaní eCommerce obchodu.
V našom príklade použijeme vlastný kód SKU a zobrazíme ho v e-mailoch s upozornením „nová objednávka“, ktoré sa posielajú správcovi obchodu. Pomôže to majiteľovi obchodu posielať objednávky dropshippingovému predajcovi a ušetrí to obrovské množstvo času v porovnaní so správou nejakého druhu tabuľky, mapovaním názvov produktov na SKU predajcu.
Na pridanie vlastnej SKU do frontendu využijeme výkonný systém šablón WooCommerce. Najprv skopírujeme súbor email-order-items.php z wp-content/plugins/woocommerce/emails/ do wp-content/themes/your-child-theme/woocommerce/emails. Ak tento priečinok vo vašej podradenej téme neexistuje, musíte ho vytvoriť cez FTP/SFTP.
Možnosť prepísať e-mailové šablóny (ako aj iné šablóny, ako je stránka s podrobnosťami o produkte) je jednou z veľkých výhod používania WooCommerce.
Jednoduchým skopírovaním súboru obsahujúceho šablónu zoznamu položiek objednávky v e-mailoch do priečinka motívov môžete použiť svoj vlastný štýl a obsah. Uvedomte si, že budúce aktualizácie WooCommerce môžu vyžadovať, aby ste aktualizovali aj svoje vlastné šablóny.
Po skopírovaní súboru šablóny ho otvorte v editore podľa vášho výberu (práve prechádzam z PHPStorm na VS Code). Uvidíte šablónu zobrazujúcu štruktúru tabuľky s prvkami tela predstavujúcimi každú pozíciu objednávky. V tomto kontexte musíme načítať vlastné SKU pre každý produkt, aby sme ho mohli zobraziť.
Našťastie pre nás WooCommerce štandardne zobrazuje SKU iba v admin e-mailoch, takže to nemusíme riešiť sami.
Na zobrazenie vlastného poľa použijeme bežnú funkciu get_post_meta:
// načítanie vlastného SKU
$custom_sku = get_post_meta( $product->get_id(), ‘jk_sku’, true );
if ( is_string( $custom_sku ) ) { // zobrazí iba vlastnú jednotku SKU
// ak je nastavený
// v prípade potreby zmeňte tento riadok
ozvena”
” . wp_kses_post( “Vlastné SKU: $custom_sku” );
}
Tu je a Github podstata obsahujúcu úplnú šablónu e-mailu, ktorú si môžete priamo stiahnuť a pridať do priečinka s témou.
Po pridaní súboru sa v e-mailoch správcov zobrazí tento formát:
Vlastné SKU je teraz pridané priamo pod názov produktu. Pozíciu a tiež štítok môžete samozrejme zmeniť úpravou šablóny e-mailu vyššie podľa vášho preferovaného rozloženia.
Začnite s pridávaním vlastných polí
V tomto článku sme preskúmali len malú časť flexibility, ktorú WooCommerce prináša. Schopnosť tak jednoducho pridať vlastné polia je jedným z dôvodov, prečo by ste mohli zvážte WooCommerce nad Shopify.
Akvizícia prostredníctvom Automattic len zvýši dôležitosť WooCommerce v priestore WordPress. A úsilie spoločností ako Hostinger podporovať používateľov WooCommerce pomocou vlastných hostingových plánov len potvrdzuje tento trend.
Ak sa chcete dozvedieť viac o rozšírení WooCommerce, pozrite si Úryvky kódu WP Mastery a začnite experimentovať s príkladmi, ktoré na tejto stránke uvádzam.
Získajte plne spravovaný WooCommerce od spoločnosti Hostinger
S Hostinger, .
So špecializovaným riešením pre hosting WooCommerce získate:
- Automatizované škálovanie, aby bol váš web rýchly počas nárastu návštevnosti.
- Automaticky optimalizované obrázky pre rýchle načítanie.
- Bleskové časy načítania vďaka nášmu vstavanému CDN.
- A viac!
Pozrite sa, prečo nám používatelia dali a 4,6 z 5 hviezdičiek na Trustpilot. Zažite optimalizovaný hosting WooCommerce pre váš obchod ešte dnes.
