Cum să ascundeți și să eliminați butonul Adăugați în coș în WooCommerce
Publicat: 2020-12-10Doriți să ascundeți butonul Adaugă în coș din magazinul dvs.? În acest ghid, veți învăța cum să eliminați butonul Adăugați în coș din WooCommerce în mod programatic (fără pluginuri).
De ce să eliminați butonul Adaugă în coș din WooCommerce?
Mai întâi, să începem să înțelegem de ce ați putea dori să ascundeți butonul Adăugați în coș. Eliminarea butonului Adaugă în coș este una dintre cele mai bune modalități de a dezactiva procesul de cumpărare pentru un anumit produs sau magazin. Chiar dacă poate suna contraintuitiv, adevărul este că ștergerea butonului Adaugă în coș poate fi foarte utilă în unele situații.
Pe lângă faptul că vă oferă mai multe opțiuni atunci când vine vorba de personalizarea magazinului dvs., există mai multe motive pentru care este posibil să doriți să eliminați butonul Adăugați în coș din unele pagini ale magazinului dvs.:
- Pentru că folosești WooCommerce ca catalog
- Când epuizați stocul sau un produs nu mai este disponibil
- Pentru a elimina butonul în funcție de condiții logice (adică pentru anumite roluri de utilizator sau produse, utilizatori neconectați și așa mai departe.)
- Pentru că produsul nu este încă disponibil pentru cumpărare
- Când doriți ca utilizatorii să folosească acel buton pentru a trimite un mesaj sau pentru a programa un interviu în loc să urmeze procesul standard de achiziție WooCommerce
Acestea sunt doar câteva situații în care ar putea fi necesar să eliminați sau să ascundeți butonul Adăugați în coș din magazinul dvs., dar există multe altele. Acum, să mergem mai departe și să vedem cum să eliminați butonul de adăugare în coș WooCommerce din magazinul dvs.
Cum să eliminați butonul Adăugați în coș din WooCommerce
În această secțiune, veți afla diferite moduri de a ascunde butonul de adăugare în coș . Pentru a vă oferi diferite alternative, vă vom arăta cum să:
- Eliminați sau ascundeți butonul Adăugați în coș la nivel de site
- Ascundeți butonul Adaugă în coș pentru utilizatorii neconectați
- Eliminați butonul Adaugă în coș în funcție de rolurile utilizatorului
- Ascunde butonul Adaugă în coș pentru anumite produse
- Eliminați butonul temporar și afișați-l automat după o dată
Să aruncăm o privire la fiecare dintre ele.
Inainte sa incepi
Deoarece vom edita fișierele de bază WordPress, vă recomandăm să creați o copie de rezervă completă a site-ului dvs. în cazul în care ceva nu merge bine. În plus, puteți utiliza o temă pentru copii. Dacă nu aveți unul, puteți fie să creați unul urmând acest ghid, fie să utilizați un plugin pentru temă copil.
1) Eliminați sau ascundeți butonul Adăugați în coș la nivel de site
Există mai multe moduri de a ascunde complet butonul Adaugă în coș din magazinul tău . Una dintre cele mai ușoare este să utilizați următorul script în fișierul functions.php
al temei copilului dvs.:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
Cu primul hook remove_action()
, dezactivăm butonul Adaugă în coș de pe pagina produsului și cu cel de-al doilea, facem același lucru pe pagina magazinului. Cu toate acestea, o soluție mai curată și mai fiabilă este dezactivarea opțiunii de cumpărare a produselor. În acest fel, veți face produsele neachiziționabile și veți împiedica utilizatorii să le adauge în coș.
Puteți face asta și face produsele dvs. neachiziționabile în întregul magazin cu următorul script:
add_filter( 'woocommerce_is_purchasable', '__return_false');
Rețineți că acest lucru va dezactiva Adăugare în coș în WooCommerce, dar nu va elimina butonul. Pur și simplu îl va înlocui cu un buton Citiți mai multe , redirecționând utilizatorii către pagina produsului, unde nu există deloc buton. Dacă, pe lângă eliminarea butonului Adaugă în coș, doriți să ascundeți și butonul Citiți mai multe , ar trebui să aplicați o regulă CSS. Cu toate acestea, deoarece clienții nu vor putea adăuga produse în coș, ei nu vor putea cumpăra nimic, chiar dacă știu să folosească instrumentul de dezvoltare a browserului pentru a-l ascunde. Când este posibil, ar trebui să încercați întotdeauna să utilizați cârligul add_filter
în loc de remove_action()
.
Pentru mai multe informații despre cum să utilizați cârligele WooCommerce, consultați acest ghid complet.
2. Ascundeți butonul Adaugă în coș pentru utilizatorii neconectați
Să presupunem că derulați o ofertă specială pentru utilizatorii dvs. înregistrați. Puteți să creați o pagină de destinație specială și să trimiteți un e-mail cu linkul numai clienților dvs. înregistrați, dar ce se întâmplă dacă aceștia îl distribuie altor utilizatori? Pentru a evita acest tip de situație și pentru a vă asigura că oferiți reducerile doar clienților potriviți, puteți elimina butonul Adaugă în coș din magazinul dvs. WooCommerce numai pentru utilizatorii neconectați . Pentru a face asta, inserați următorul script în fișierul functions.php
al temei dvs. pentru copil:
/* REMOVE ADD TO CART BUTTON FOR NON-LOGGED-IN USERS */
if (!is_user_logged_in()) {
// in product page
add_filter('woocommerce_is_purchasable', '__return_false'); }
Folosind funcția nativă WordPress is_user_logged_in()
, vom dezactiva butonul Adaugă în coș numai pentru utilizatorii neconectați.
3. Eliminați butonul Adaugă în coș în funcție de rolurile utilizatorului
O altă opțiune interesantă este eliminarea butonului Adaugă în coș pe baza rolurilor utilizatorului . De exemplu, să vedem cum să ascundeți butonul pentru orice utilizator administrator:
/* REMOVE ADD TO CART BUTTON FOR ADMIN USERS */ add_action('wp_loaded','get_user_role'); function get_user_role(){ $current_user = wp_get_current_user(); if(count($current_user->roles)!==0){ if($current_user->roles[0]=='administrator'){ add_filter('woocommerce_is_purchasable', '__return_false'); }
}
}
Scriptul preia obiectul utilizator WordPress și îi aplică două condiționale. Primul este de a ști dacă un utilizator are un rol și al doilea de a face produsele neachiziționabile doar dacă rolul de utilizator se potrivește cu cel pe care îl specificăm noi (administrator în acest caz). Puteți adapta acest cod și schimba rolul pe care nu doriți să-l vedeți butonul Adăugați în coș editând rolul în if($current_user->roles[0]=='your_role'){.
4. Ascundeți butonul Adaugă în coș pentru anumite produse
Acum, să presupunem că ați epuizat stocul pentru anumite produse, așa că doriți să ascundeți temporar butonul Adăugați în coș pentru acele produse .
Pentru a elimina butonul pentru anumite produse, copiați și lipiți acest script în fișierul functions.php
al temei copil:
/* REMOVE ADD TO CART BUTTON ON SPECIFIC PRODUCT IDs*/ add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2); function filter_is_purchasable($is_purchasable, $product ) { global $product; if( in_array( $product->get_id(), not_purchasable_ids() )) { return false; } return $is_purchasable; } function not_purchasable_ids() { return array( 624,625 ); }
În acest exemplu de script, dezactivăm butonul Adăugați în coș pentru produsele cu ID-urile 624 și 625. Pentru a-l adapta la magazinul dvs. WooCommerce, înlocuiți pur și simplu acele ID-uri cu ID-urile produsului. După cum puteți vedea, puteți adăuga mai multe produse doar separând ID-urile cu o virgulă.
Pentru a afla ID-ul unui produs, accesați tabloul de bord WordPress > WooCommerce > Produse și plasați mouse-ul peste un produs din listă. Alternativ, dacă faceți clic pe produs, veți vedea ID-ul acestuia în adresa URL a browserului dumneavoastră.
5. Dezactivați butonul Adaugă în coș pentru anumite categorii
În mod similar, puteți elimina butonul Adaugă în coș pentru anumite categorii . De exemplu, să presupunem că doriți să ascundeți butonul din categoria „Laptop-uri”, ați folosi acest cod:
add_action('wp', 'QL_remove_add_to_cart_from_category');
funcția QL_remove_add_to_cart_from_category(){
if( is_product_category( 'laptop-uri' ) ) {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
}
}
Pur și simplu luați acest cod și amintiți-vă să înlocuiți „laptop-urile” în rândul 3 cu numele categoriei în care doriți să ascundeți butonul Adaugă în coș.
6. Eliminați temporar butonul Adaugă în coș și afișați-l automat după o dată
Acum să facem lucrurile cu un pas mai departe și să combinăm unele dintre lucrurile pe care le-am învățat. Imaginați-vă că sunteți pe cale să lansați un produs, astfel încât să creați pagina produsului cu toate caracteristicile sale. Dacă doriți să utilizați pagina respectivă pentru a crea un hype și a promova produsul înainte de lansare, puteți ascunde butonul Adaugă în coș până la data lansării și apoi îl puteți afișa automat în ziua lansării .
De exemplu, să presupunem că intenționați să vă lansați produsul pe 15 decembrie 2020, așa că doriți să eliminați butonul Adăugați în coș până atunci și apoi să afișați butonul la data respectivă. Pentru a face asta, pur și simplu copiați și lipiți următorul script:
add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 ); function hide_add_to_cart_button_until_date( $is_purchasable = true, $product ) { $current_date = date('Ym-d'); $release_date = date( 'Ym-d', strtotime('2020-12-15') ); if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) { $is_purchasable = false; } return $is_purchasable; }
Aceasta va înlocui butonul Adaugă în coș cu un buton Citiți mai multe care redirecționează utilizatorii către pagina produsului până la data lansării. Acum, să înțelegem mai bine cum funcționează scenariul. Codul compară data curentă cu data lansării și, dacă data curentă este anterioară, face produsul neachiziționabil.
Când data curentă este egală cu data lansării sau este ulterioară, produsul va fi disponibil pentru cumpărare și va fi afișat automat butonul Adaugă în coș. Nu uitați să specificați nu numai data, ci și ID-ul produsului (624 în exemplul nostru).
Bonus: personalizați butonul Adaugă în coș
Pentru unele dintre situațiile descrise mai sus, este foarte util să personalizați butonul Adăugați în coș și să faceți o impresie asupra cumpărătorilor dvs. Pe lângă ascunderea butonului, puteți modifica textul și culoarea acestuia, adăugați text deasupra sau sub el, editați comportamentul butonului și multe altele. Să începem cu ceva simplu și să vedem cum să schimbăm textul butonului Adaugă în coș.
Să presupunem că în loc de „Adăugați în coș”, doriți să afișați textul „ Cumpărați acest articol ” în buton. Pur și simplu copiați și lipiți următorul script în fișierul functions.php :
('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce'); funcția QL_customize_add_to_cart_button_woocommerce(){ return __('Cumpără acest articol', 'woocommerce'); }
În plus, pentru a schimba culoarea butonului pe produse individuale, utilizați acest script și alegeți culorile dorite.
.un singur produs .produs .single_add_to_cart_button.button { culoare de fundal: #FF0000; culoare: #C0C0C0; }
Acestea sunt doar două exemple de bază, dar puteți face mult mai mult și puteți personaliza butonul în multe alte moduri. Pentru mai multe exemple și informații, consultați ghidul nostru pas cu pas despre cum să editați butonul Adăugați în coș.
Concluzie
În concluzie, ascunderea butonului Adaugă în coș poate fi utilă în multe situații diferite:
- Când utilizați WooCommerce ca catalog
- Când epuizați stocul sau un produs nu mai este disponibil
- Pentru a rula campanii pentru anumite tipuri de utilizatori sau roluri de utilizator
- Când sunteți pe cale să lansați un produs nou
- Când utilizați butonul pentru a efectua o anumită acțiune care nu urmează procesul standard de cumpărare WooCommerce
În acest ghid, ați învățat diferite moduri de a elimina butonul Adăugați în coș. Am văzut cum să-l ascundem din întregul magazin, pentru anumite produse, utilizatori și roluri de utilizator și chiar cum să-l ascundem și apoi să-l afișăm din nou automat după o anumită dată. Acest lucru vă va oferi puțină flexibilitate pentru a vă personaliza magazinul în diferite situații. Pur și simplu utilizați aceste scripturi ca bază și editați-le pentru a profita la maximum de ele în magazinul dvs.
Dacă nu doriți să eliminați butonul Adăugați în coș, dar aveți probleme cu acesta, vă recomandăm să consultați acest ghid care vă ajută să remediați cele mai frecvente probleme cu Adăugați în coș.
Pentru mai multe informații despre cum să profitați la maximum de butonul Adăugați în coș, consultați următoarele tutoriale:
- Cum să personalizați butonul Adaugă în coș în WooCommerce
- Funcția WooCommerce Adaugă în coș în mod programatic
Ai avut probleme cu scripturile? Cunoașteți alte modalități de a elimina butonul Adaugă în coș? Anunțați-ne în secțiunea de comentarii de mai jos!