Cum să adăugați un câmp text personalizat Woocommerce pe pagina produsului
Publicat: 2020-09-21
În această postare, vă voi arăta o soluție foarte simplă pentru a adăuga un câmp text personalizat WooCommerce pe pagina de produs. Aceste câmpuri personalizate sunt numite și suplimente de produs și includ câmpuri de text, câmpuri de selectare, casete de selectare și așa mai departe. Motivul principal pentru adăugarea acestui lucru este acela de a permite clientului să introducă informații suplimentare, personalizate despre un produs, la un cost.
WooCommerce este o soluție puternică de comerț electronic pentru WordPress, care a câștigat popularitate de-a lungul anilor. Se estimează că WooCommerce alimentează peste 42% din toate magazinele online disponibile.
Acesta este un procent foarte mare și dacă sunteți în căutarea unui magazin online ușor de configurat și gestionat, atunci WooCommerce este cea mai bună opțiune pentru dvs. Este o soluție gratuită și open-source, care a evoluat într-o soluție de comerț electronic foarte competentă pentru site-urile web bazate pe WordPress.
Câmp text personalizat Woocommerce pe pagina produsului
Dacă faci o căutare rapidă pe internet, mulți oameni îți vor oferi soluții complexe, greu de implementat. În acest scurt tutorial, voi împărtăși un fragment de cod PHP care va adăuga această funcționalitate la pagina dvs. de produs.
Până la sfârșitul acestui tutorial, utilizatorii magazinului dvs. online vor putea adăuga o notă personalizată fiecărui produs. Dacă câmpul personalizat nu este completat, atunci va genera o eroare.
Mai mult, dacă căutați o modalitate mai simplă de a adăuga câmpuri personalizate, atunci pluginul Product Extras pentru WooCommerce va fi cea mai bună soluție pentru dvs. Cu toate acestea, este un plugin premium și va trebui să plătiți o rată anuală de 59 USD. 
De ce ați adăuga câmpuri personalizate pe pagina produsului?
Motivul principal pentru a face acest lucru este îmbunătățirea reținerii clienților, ceea ce este probabil să stimuleze vânzările, deoarece clienții vor putea adăuga o notă personalizată la comandă.
De exemplu, un client ar putea dori ambalaj cadou sau felicitări personalizate pe produs și el sau ea poate adăuga nota personalizată pe produs.
Cu toate acestea așezate pe masă, să aruncăm o privire la pașii pe care trebuie să îi urmați pentru a adăuga un câmp de text personalizat pe pagina produsului din magazinul dvs. WooCommerce. Pagina implicită a produsului arată astfel: 
Pași pentru a adăuga un câmp text personalizat Woocommerce pe pagina produsului
Iată pașii pe care trebuie să-i urmezi:
- Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
- Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va adăuga câmp personalizat WooCommerce pe Pagina de produs .
- Adăugați următorul cod în fișierul functions.php :
/**
* @snippet Adăugați un câmp de introducere la produse - WooCommerce
*/
// ------------------------------------------
// 1. Afișați câmpul de introducere personalizat deasupra Adăugați în coș
add_action( 'woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );
funcția njengah_product_add_on() {
$value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ): '';
echo '<div><label>Supliment de text personalizat <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';
}
// ------------------------------------------
// 2. Aruncă eroare dacă câmpul personalizat de introducere este gol
add_filter( 'woocommerce_add_to_cart_validation', 'njengah_product_add_on_validation', 10, 3 );
funcția njengah_product_add_on_validation( $trecut, $product_id, $qty ){
if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {
wc_add_notice( 'Custom Text Add-On este un câmp obligatoriu', 'eroare');
$trecut = fals;
}
return $trecut;
}
// ------------------------------------------
// 3. Salvați valoarea câmpului de introducere personalizat în datele articolului din coș
add_filter( 'woocommerce_add_cart_item_data', 'njengah_product_add_on_cart_item_data', 10, 2 );
funcția njengah_product_add_on_cart_item_data( $cart_item, $product_id ){
if( isset( $_POST['custom_text_add_on'] ) ) {
$cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
}
returnează $cart_item;
}
// ------------------------------------------
// 4. Afișează valoarea câmpului de introducere personalizat @ Cart
add_filter( 'woocommerce_get_item_data', 'njengah_product_add_on_display_cart', 10, 2 );
funcția njengah_product_add_on_display_cart( $date, $cart_item ) {
if ( isset( $cart_item ['custom_text_add_on'] ) ){
$date[] = matrice(
„name” => „Supliment de text personalizat”,
'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )
);
}
returnează $date;
}
// ------------------------------------------
// 5. Salvați valoarea câmpului de introducere personalizat în meta articol de comandă
add_action( 'woocommerce_add_order_item_meta', 'njengah_product_add_on_order_item_meta', 10, 2 );
funcția njengah_product_add_on_order_item_meta( $item_id, $values ) {
dacă (! gol( $values['custom_text_add_on'] ) ) {
wc_add_order_item_meta( $item_id, 'Custom Text Add-On', $values['custom_text_add_on'], true );
}
}
// ------------------------------------------
// 6. Afișează valoarea câmpului de intrare personalizat în tabelul de comenzi
add_filter( 'woocommerce_order_item_product', 'njengah_product_add_on_display_order', 10, 2 );
funcția njengah_product_add_on_display_order( $cart_item, $order_item ){
if( isset( $articol_comanda['custom_text_add_on'] ) ){
$cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
}
returnează $cart_item;
}
// ------------------------------------------
// 7. Afișează valoarea câmpului de introducere personalizat în e-mailurile de comandă
add_filter( 'woocommerce_email_order_meta_fields', 'njengah_product_add_on_display_emails');
funcția njengah_product_add_on_display_emails( $fields ) {
$fields['custom_text_add_on'] = 'Supliment de text personalizat';
returnează $câmpuri;
}- Pentru a vedea rezultatul , pur și simplu reîmprospătați pagina produsului și ar trebui să vedeți asta:
Dacă un utilizator nu a introdus detaliile, atunci va fi afișată o eroare până când utilizatorul adaugă textul personalizat, după cum se arată mai jos: 
Nota personalizată va apărea și în detaliile comenzii , așa cum se arată aici: 
Cum funcționează codul
În primul rând, codul arată câmpul de introducere personalizat de deasupra Adăugați în coș, iar apoi este adăugată o eroare dacă câmpul de introducere personalizat este gol. Apoi valoarea câmpului de introducere personalizat este salvată și este afișată în coș, articol de comandă, tabel de comandă și în e-mailurile de comandă.
Concluzie
În această postare, v-am oferit o soluție mai simplă pentru utilizatorii nu prea cunoscători de tehnologie care implică utilizarea unui plugin. Apoi am distribuit un fragment de cod PHP care ar trebui să fie plasat în fișierul functions.php pentru a afișa add-on-ul clientului în coș, articol de comandă, tabel de comandă și în e-mailurile de comandă. Sper că această postare v-a ajutat să adăugați un câmp de text personalizat WooCommerce pe pagina produsului.
Articole similare
- Cum să setați produse personalizate legate în WooCommerce
- Cum să utilizați WordPress personalizat Hooks do_action & apply_filters cu exemple
- Cum să eliminați Descărcări Meniul Contul meu Pagina WooCommerce
- Cum să obțineți metode de plată în WooCommerce » Exemplu de cod
- Cum să ascundeți produsele fără imagine în WooCommerce
- Cum să eliminați efectul de zoom pe imaginea produsului WooCommerce
- Cum să adăugați categorii la produsele WooCommerce
- Cum să eliminați gloanțe din lista neordonată în WordPress
- Cum să adăugați un câmp suplimentar în formularul de plată WooCommerce
- Cum să schimbați textul de Proceed To Checkout în WooCommerce
- Cum să adăugați un produs Woocommerce din Frontend
- Cum să numărați articolele adăugate în coș Codul de numărare a coșului WooCommerce
- Cum să schimbați textul butonului de finalizare a comenzii în WooCommerce [Plasați comandă]
- 5 fragmente de cod de paginare WordPress cu exemple [de la simplu la avansat]
- Cum să schimbați textul în stoc în WooCommerce
- Cum să redirecționați utilizatorii WooCommerce după înregistrare în funcție de roluri
- Cum să obțineți ID-ul comenzii în Woocommerce
- Cum să eliminați hash # din adresele URL WordPress cu un truc simplu
- Cum să adăugați o descriere după preț în WooCommerce
- Cum să schimbați anunțul „Adăugat în coș” WooCommerce