Cum să adăugați butonul Adăugați în coș în paginile magazinului Divi

Publicat: 2020-06-21

Folosiți Divi și doriți să vă personalizați paginile magazinului? În acest tutorial, veți învăța cum să includeți butonul Adaugă în coș în paginile magazinului Divi.

Dacă intenționați să începeți un magazin online, WooCommerce este cel mai simplu și rapid mod de a face acest lucru. Chiar dacă nu sunteți dezvoltator, câteva teme WooCommerce excelente vă pot ajuta să începeți și să îmbunătățiți caracteristicile magazinului dvs. Una dintre cele mai bune opțiuni de acolo este Divi.

De ce să includeți un buton Adaugă în coș în paginile magazinului?

Tema Divi este una dintre cele mai populare opțiuni pentru magazinele WooCommerce. Este o temă foarte flexibilă, care vine cu o mulțime de funcții puternice. Cu toate acestea, un dezavantaj este că produsele de pe paginile magazinului nu au un buton Adaugă în coș. Aceasta adaugă un pas în canalul de achiziție și poate afecta conversiile. Vestea bună este că există o modalitate de a remedia asta.

În acest ghid, vă vom arăta cum puteți adăuga cu ușurință butonul Adaugă în coș în paginile magazinului Divi .

Cum să adăugați butonul Adăugați în coș în Divi?

Aici, vă vom arăta cele mai simple și mai eficiente modalități de a include butonul Adaugă în coș în Divi. Chiar dacă vom face unele modificări la fișierele de bază ale temei, aceste metode sunt foarte ușor de urmat chiar și pentru începători.

Principalele două metode de a adăuga butonul Adaugă în coș în paginile magazinului sunt:

  1. Modificarea fișierului functions.php
  2. Folosind pluginul Fragmente de cod

Ambele metode sunt prietenoase pentru începători și vă vor permite să adăugați butonul Adaugă în coș în cel mai scurt timp.

Înainte de a începe

Înainte de a începe, vă recomandăm:

  • Generați o copie de rezervă completă în cazul în care ceva nu merge bine.
  • Creați o temă secundară: nu vă recomandăm să modificați direct fișierele temei. În schimb, puteți crea o temă copil și îi puteți modifica. Există diferite metode de a face acest lucru. În acest tutorial, vom folosi un plugin.

1) Includeți butonul Adaugă în coș din functions.php

Creați o temă pentru copii

Înainte de a adăuga butonul Adaugă în coș în Divi, trebuie să creați o temă copil. Pentru a face asta, vom folosi un plugin gratuit WordPress numit Child Themify. Deci, mai întâi, trebuie să instalați Child Themify pe site-ul dvs.

Apoi, activează-l.

După aceea, veți vedea setările pluginului în secțiunea Aspect .

Din meniul derulant, va trebui să selectați o temă părinte. În cazul nostru, vom crea o temă copil pentru Divi. Apoi, numește noua temă pentru copil.

Există, de asemenea, câteva opțiuni avansate, dar nu trebuie să le folosiți pentru asta.

După selectarea temei părinte și denumirea temei secundare, apăsați butonul Creare temă copil .

După aceea, accesați secțiunea Aspect > Teme și veți vedea noua temă copil. Activează-l.

Acum, verificați pagina magazinului dvs. În cazul nostru, am creat un magazin demonstrativ folosind câteva produse eșantion.

După cum puteți vedea în captura de ecran de mai sus, nu există niciun buton Adaugă în coș. Deci, atunci când un utilizator dorește să adauge un produs în coș, nu o poate face direct din pagina magazinului. În schimb, trebuie să meargă la paginile specifice ale produselor și să adauge articolele în coș de acolo.

Vestea bună este că există o modalitate ușoară de a include un buton Adaugă în coș pe pagina magazinului. Pentru a face acest lucru, va trebui să adăugați câteva rânduri de cod la tema copilului.

Schimbați fișierul functions.php

Pentru a include butonul Adaugă în coș pe pagina magazinului din Divi, accesați editorul de teme și selectați fișierul functions.php . Copiați codul de mai jos și inserați-l în fișierul functions.php .

 // Acest cod adaugă butoanele „Adăugați în coș” la o pagină care afișează bucla magazinului
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Butonul Adaugă în coș în scriptul Divi - PHP

După ce lipiți codul, faceți clic pe Actualizare fișier . Și dacă verificați interfața paginii magazinului, veți vedea modificările.

Butonul Adaugă în coș în Divi cu php

Ați adăugat butoanele Adaugă în coș pe pagina magazinului !

2) Pluginul pentru fragmente de cod

Alternativ, în loc să actualizați fișierul functions.php , puteți include butonul Adaugă în coș în Divi folosind un plugin. În experiența noastră cu WordPress și personalizare, Fragmente de cod este unul dintre cele mai bune instrumente pentru această sarcină.

În primul rând, trebuie să instalați și să activați pluginul Code Snippets pe site-ul dvs.

Pluginul Fragmente de cod pentru a include butonul de adăugare în coș în Divi

Apoi, va trebui să adăugați un nou fragment pe site-ul dvs. web.

Pur și simplu numiți fragmentul dvs. în scopuri de identificare, copiați codul de mai jos și inserați-l în câmpul Cod.

 // Acest cod va include butoanele „Adaugă în coș” la o pagină care afișează bucla magazinului
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Apoi, salvați și activați fragmentul.

Încă o dată, veți vedea butoanele Adaugă în coș pe pagina magazinului dvs.

Butonul Adaugă în coș în pagina magazinului Divi

După cum vedeți, ambele metode sunt foarte simple și eficiente. Dacă sunteți începător, vă recomandăm să utilizați Fragmente de cod. Este un instrument gratuit care vă permite să modificați cu ușurință fișierele de bază și nu vă va distruge site-ul.

Cum să personalizați butonul Adăugați în coș

Acum că ați inclus cu succes un buton Adaugă în coș în paginile magazinului Divi, trebuie să personalizați butonul.

Pentru a face acest lucru, trebuie să specificați o clasă CSS personalizată pentru butonul dvs. Un cod PHP simplu va face treaba. Apoi, puteți adăuga un pic de CSS și personaliza butonul.

Deci, pentru a face acest lucru, inserați codul PHP de mai jos în secțiunea Fragmente de cod ca unul nou.

 add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

funcția quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Apoi, puteți utiliza CSS pentru a modifica butonul. În acest cod, am menționat clasele CSS implicite ale butonului, cum ar fi: button product_type_simple add_to_cart_button ajax_add_to_cart . În plus, puteți adăuga clasa dvs. CSS personalizată, înlocuind my_class_here .

Când includeți CSS suplimentar la tema dvs., puteți utiliza ceva de genul: .my_class { option:value !important; } .my_class { option:value !important; } . Asigurați-vă că veți înlocui my_class cu clasa dvs. CSS.

De exemplu, puteți utiliza un cod CSS ca acesta:

 .woocommerce-LoopProduct-link + un {
    /* CSS-ul dvs. personalizat aici */
}

Tema Divi vine cu un editor CSS personalizat și puteți lipi tot codul CSS acolo. Pe de altă parte, puteți utiliza secțiunea CSS suplimentară prin personalizarea WordPress. Vă recomandăm să utilizați Personalizatorul deoarece vă permite să vedeți ceea ce faceți în timp real.

Concluzie

Așadar, așa puteți include cu ușurință un buton Adaugă în coș în paginile magazinului Divi. În acest fel, puteți îmbunătăți procesul de achiziție, puteți oferi clienților o experiență mai bună și puteți crește conversiile. În plus, vă va ajuta să reduceți abandonul coșului în magazin.

O altă opțiune interesantă pentru a crește conversia în magazinul dvs. este să includeți link-uri de finalizare directă a comenzii în magazin. În acest fel, scurtați procesul de achiziție și reduceți șansele ca utilizatorii să renunțe. Pentru mai multe informații despre aceasta, consultați ghidul nostru despre cum să creați link-uri de plată directă WooCommerce.

În plus, dacă doriți să vă personalizați magazinul, vă recomandăm să consultați următoarele tutoriale:

  • Cum să personalizați pagina de magazin WooCommerce?
  • Funcția de adăugare în coș în mod programatic în WooCommerce
  • Cum se implementează butonul AJAX de adăugare în coș în WooCommerce?
  • Cum să personalizați pagina de plată WooCommerce?

În cele din urmă, pentru a profita la maximum de Divi Theme, puteți arunca o privire la ghidurile noastre:

  • Cum să ascundeți și să eliminați subsolul din Divi?
  • Formularul de contact Divi nu funcționează? Iată cum să o remediați!

Dacă ați găsit acest articol util, vă rugăm să luați în considerare distribuirea acestei postări prietenilor dvs. pe rețelele sociale. Îi va ajuta pe alții să personalizeze paginile magazinului Divi.

Pentru mai multe informații despre cum să îmbunătățiți conversiile, consultați cele mai bune plugin-uri de cumpărare rapidă WooCommerce.