Cum să adăugați un buton personalizat de adăugare în coș în WooCommerce

Doriți să aflați cum să adăugați un buton personalizat de adăugare în coș în WooCommerce?

Personalizarea butoanelor din magazinul dvs. WooCommerce vă poate ajuta să captați atenția, îmbunătățind ratele de conversie și vânzările.

În acest articol, vă vom arăta cum să adăugați un buton personalizat de adăugare în coș în WooCommerce pas cu pas.

De ce să vă personalizați butonul de adăugare în coș WooCommerce?

Editarea butonului de adăugare în coș vă ajută să îl aliniați la produsele WooCommerce pe care le vindeți. Dacă rămâneți cu butonul implicit pentru coș, este posibil să nu aibă nicio legătură cu tipul de produs.

De exemplu, este posibil să doriți să modificați textul de adăugare în coș și să îl înlocuiți cu o pictogramă sau o casetă de selectare pentru mai multe produse. Alternativ, poate doriți să schimbați culoarea butonului pentru a ieși mai mult în evidență pe site-ul dvs.

De asemenea, este posibil să doriți să afișați butoanele coșului în altă parte pe site-ul dvs. WooCommerce, cum ar fi pagina dvs. de plată, categoriile și pagina coșului de cumpărături.

Pentru a face oricare dintre cele de mai sus, veți avea nevoie de o modalitate de a vă personaliza cu ușurință butonul de adăugare în coș, cu minimum de agitație.

Cum să adăugați un buton personalizat de adăugare în coș în WooCommerce

Din fericire, împărtășim 2 metode pentru a crea un buton personalizat de adăugare în coș WooCommerce. Prima metodă folosește un plugin WordPress ușor și puternic, iar a doua metodă vă arată cum să vă personalizați manual butoanele coșului fără un plugin.

Metoda 1: Adăugați un buton personalizat de adăugare în coș cu SeedProd

Pentru prima metodă, vom folosi SeedProd, cel mai bun constructor de site-uri web pentru WordPress.

Acest plugin puternic include un generator de pagini drag-and-drop care vă permite să personalizați orice parte a site-ului dvs. fără cod. Puteți crea teme WordPress personalizate, puteți crea pagini de destinație cu conversie ridicată și puteți personaliza orice aspect prin punctare și clic.

Deoarece SeedProd include suport WooCommerce, îl puteți folosi pentru a proiecta și lansa site-uri întregi WooCommerce fără un dezvoltator. Urmați pașii de mai jos pentru a utiliza SeedProd pentru a adăuga un buton personalizat de adăugare în coș pe site-ul dvs. WooCommerce.

Pasul 1. Instalați și activați SeedProd

Mai întâi, accesați pagina de prețuri SeedProd și alegeți planul SeedProd. Pentru a accesa funcțiile WooCommerce, veți avea nevoie de planul SeedProd Elite .

Apoi, conectați-vă la contul dvs. SeedProd, faceți clic pe fila Descărcări și descărcați fișierul plugin .zip. De asemenea, puteți copia cheia de licență pe aceeași pagină.

Acum puteți încărca pluginul pe site-ul dvs. WordPress. Dacă aveți nevoie de ajutor în acest sens, urmați acest ghid despre instalarea și activarea unui plugin WordPress.

După instalarea SeedProd, accesați pagina SeedProd » Setări și inserați cheia de licență pe care ați salvat-o mai devreme.

Asigurați-vă că faceți clic pe butonul Verificați cheia înainte de a trece la pasul următor.

Notă: SeedProd vă permite să adăugați butoane personalizate de adăugare în coș la WooCommerce în două moduri:

• Utilizarea unei pagini de destinație
• Crearea unei teme personalizate WooCommerce

Pentru acest tutorial, vom crea o temă WooCommerce personalizată, deoarece creează automat toate paginile dvs. de magazin WooCommerce.

Pasul 2. Alegeți un kit pentru site-uri web

Pentru următorul pas, navigați la pagina SeedProd » Theme Builder . Aici puteți construi diferitele părți ale temei dvs. WooCommerce și puteți personaliza designul fiecărui șablon.

Puteți face acest lucru fie construind fiecare parte de la zero, fie folosind un kit de site-uri web prefabricat. Vom merge cu a doua variantă pentru că este mai ușor și mai rapid.

Pentru a alege un kit de site, faceți clic pe butonul Teme .

Pe următorul ecran, veți vedea kiturile disponibile pentru site-uri web. Kiturile compatibile cu WooCommerce vor avea „WooCommerce” lângă titlurile lor.

Puteți apoi să plasați cursorul peste un design care vă place și să faceți clic pe pictograma bifă pentru a-l importa în Creatorul de teme.

Pentru acest ghid, folosim setul pentru site-ul web WooCommerce Pottery Shop .

După importarea setului de site-uri web, veți vedea părțile individuale ale temei dvs. într-o listă ca aceasta:

SeedProd creează automat pagini de conținut, cum ar fi paginile despre, coșul de cumpărături, paginile de achiziție și de contact. Puteți vizualiza aceste pagini accesând Pagini » Toate paginile din tabloul de bord WordPress și personalizați-le cu ajutorul generatorului de pagini drag-and-drop de la SeedProd.

Să începem procesul de personalizare personalizând butonul de adăugare în coș WooCommerce.

Pasul 3. Personalizați-vă butonul de adăugare în coș

Mai jos vă vom arăta cum să adăugați un buton personalizat de adăugare în coș în WooCommerce pe paginile dvs. de magazin, produse, arhive de produse și blog.

Adăugarea unui buton de adăugare în coș pentru pagina de magazin personalizată

În primul rând, vom începe prin a vă edita pagina magazinului WooCommerce. Pentru a face acest lucru, găsiți partea șablon Pagina de magazin și faceți clic pe linkul Editați design .

Pagina dvs. de magazin WooCommerce se va deschide în generatorul de pagini drag-and-drop al SeedProd, unde vă puteți personaliza designul fără cod.

Puteți face clic pe previzualizarea live pentru a edita orice element de pagină și a personaliza setările acestuia. În mod similar, puteți trage blocuri din panoul din stânga și le puteți plasa pe pagina dvs. pentru a adăuga mai mult conținut.

În mod implicit, șablonul Pagina de magazin utilizează blocul Grile de produse . Făcând clic pe acesta, vă vor afișa setări pentru a controla cum arată înregistrările dvs. de produse.

De exemplu, puteți modifica numărul de coloane, puteți filtra produsele după ID-ul produsului, Interogare sau Tip și puteți modifica ordinea pe care le afișează.

De asemenea, puteți face clic pe fila Avansat pentru a vedea mai multe opțiuni de personalizare, inclusiv stiluri de font, culori, chenare și multe altele.

În secțiunea Butoane, puteți personaliza butonul de adăugare în coș WooCommerce cu câteva clicuri. De exemplu, în meniul derulant Button Style, puteți alege:

• Apartament
• 2D
• Epocă
• Fantomă
• Legătură

În plus, puteți modifica culoarea butonului, tipografia, dimensiunea și raza chenarului.

Experimentați cu opțiunile de personalizare pentru a găsi un aspect care să se potrivească nevoilor dvs. de afaceri. Apoi, apăsați butonul Salvare din colțul din dreapta sus pentru a stoca modificările și faceți clic pe pictograma X pentru a reveni la Creatorul de teme.

Modificarea butonului de adăugare în coș a paginii de produs

Acum să ne uităm la personalizarea butonului de adăugare în coș pe paginile unui singur produs. Va trebui să găsiți șablonul Pagina de produs și să faceți clic pe linkul Editați design pentru a-l deschide.

De data aceasta, veți vedea detaliile unice ale produsului în editorul vizual al SeedProd.

În mod implicit, va afișa:

• imaginea produsului
• Titlul produsului
• Prețul produsului
• scurta descriere
• Butonul Adaugă în coș
• File cu date despre produs

Puteți personaliza fiecare element făcând clic pe el pentru a le afișa setările. De exemplu, făcând clic pe butonul de adăugare în coș vă permite să schimbați textul butonului cu ceva mai captivant.

De asemenea, puteți modifica alinierea butoanelor și puteți adăuga o pictogramă din biblioteca de pictograme Font Awesome.

Fila Avansat vă va permite să vă schimbați culorile butoanelor, tipografia, umbrele și spațierea ca înainte.

Editarea butonului Coșul arhivelor dvs. de produse

Modificarea butonului de adăugare în coș din Arhivele de produse urmează un proces similar cu pagina magazinului. Găsiți pur și simplu partea de șablon Arhive de produse și faceți clic pe linkul Editați design pentru a o deschide în editorul vizual.

Blocul pe care SeedProd îl folosește în această pagină este blocul Archive Products . Utilizatorii vor vedea această pagină dacă fac clic pe un titlu de categorie de produs sau folosesc bara de căutare a magazinului dvs.

Acest bloc nu va afișa o previzualizare în editorul vizual live; cu toate acestea, puteți personaliza în continuare ceea ce arată blocul pe partea frontală deschizându-și setările.

De exemplu, puteți modifica numărul de coloane, puteți afișa articolele după număr și puteți ordona după filtru. În plus, puteți activa filtrarea după interogare, cum ar fi:

• Interogare după atribut
• Selectați După etichete
• Selectați După categorie
• Selectați După SKU de produs
• Selectați După grup
• Selectați După vizibilitate

Apoi, în fila Avansat , puteți personaliza butonul de adăugare în coș schimbându-i culorile, fontul, spațierea, dimensiunea și multe altele.

Adăugarea unui buton personalizat de adăugare în coș pe pagina de blog

Pagina dvs. de blog este un alt loc unde puteți afișa un buton de adăugare în coș. Astfel, puteți recomanda produse după postările de pe blog pentru a crește vânzările.

Pentru a face asta cu SeedProd, găsiți șablonul Pagina de blog și faceți clic pe linkul Editare design .

În mod implicit, pagina dvs. de blog va afișa o listă cu cele mai recente postări de blog, dar o puteți personaliza pentru a include orice alt conținut care vă place.

Să adăugăm o secțiune la această pagină care prezintă un produs nou. Mai întâi, trageți un bloc de coloane pe pagină și alegeți un aspect de coloană.

Apoi, alegeți blocul Imagine și adăugați o imagine a produsului.

În a doua coloană, puteți utiliza blocurile Titlu și Paragraf pentru titlul și descrierea produsului. Apoi, trageți peste butonul Adaugă în coș, astfel încât utilizatorii să poată adăuga produsul în coșul de cumpărături.

Acum, faceți clic pe bloc pentru a-i deschide setările și adăugați textul personalizat pentru butonul de adăugare în coș.

De asemenea, veți avea nevoie de ID-ul produsului pentru acel produs specific. Îl puteți găsi accesând Produse » Toate produsele din tabloul de bord WordPress și copiend valoarea ID-ului.

După aceea, puteți lipi ID-ul în câmpul ID produs de pe butonul de adăugare în coș. Acest lucru va asigura că un anumit produs este adăugat în coș după ce faceți clic pe URL-ul Adaugă în coș.

Nu uitați să faceți clic pe butonul Salvare pentru a salva modificările.

Pasul 4. Salvați și publicați modificările

Când ești mulțumit de felul în care arată paginile tale WooCommerce, ești gata să-ți faci magazinul live. Pentru a face acest lucru, întoarceți-vă la Theme Builder și, în colțul din dreapta sus, rotiți comutatorul Enable SeedProd Theme în poziția „Pornit”.

Să aruncăm o privire la câteva dintre paginile pe care le-am personalizat:

Pagina de magazin

Pagina de produs

Pagină de arhivă

Pagina de blog

Metoda 2: Adăugați un buton personalizat de adăugare în coș cu cod

Următoarea metodă pe care ți-o vom arăta implică schimbarea codului de pe site-ul tău WordPress. De obicei, nu vă recomandăm să faceți acest lucru dacă sunteți începător, deoarece vă poate distruge site-ul.

Acestea fiind spuse, înțelegem că unii oameni nu doresc să-și suprascrie complet designul site-ului web existent.

Înainte de a începe, vă sugerăm să creați o temă copil pentru a vă asigura că nu vă pierdeți modificările atunci când actualizați tema WordPress. De asemenea, ar trebui să faceți backup pentru site-ul dvs. WordPress pentru a-l restabili în siguranță dacă ceva nu merge bine.

Deoarece ne vom ocupa de fragmente de cod pentru această metodă, este o idee bună să instalați un plugin pentru fragmente de cod, cum ar fi WPCode. Aceasta înseamnă că nu va trebui să editați direct fișierele tematice.

Când aveți totul gata, puteți începe să adăugați manual butoane personalizate de adăugare în coș în WooCommerce.

Modificați textul butonului Adăugați în coș de pe paginile de produse

În primul rând, ne vom uita la modificarea textului butonului de adăugare în coș în WooCommerce. De exemplu, poate doriți să schimbați textul butonului în „Cumpărați acest articol”.

Pentru a face acest lucru, creați un fragment de cod personalizat în WPCode și inserați următorul cod PHP:

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

Salvați modificările, apoi când vedeți un singur produs, veți vedea noul text al butonului de adăugare în coș.

Schimbați culoarea butonului de adăugare în coș

Dacă doriți să schimbați culoarea butonului de adăugare în coș, va trebui să adăugați niște CSS personalizate. Puteți face acest lucru accesând Aspect » Personalizare » CSS suplimentar din tabloul de bord WordPress.

Acum lipiți următorul cod CSS:

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Puteți face același lucru pentru paginile dvs. de arhivă de produse inserând următorul fragment de cod CSS:

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

Iată-l!

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un buton personalizat de adăugare în coș în WooCommerce.

S-ar putea să vă placă și această postare: Cum să editați un meniu în WordPress pentru navigare personalizată.

Sunteți gata să vă personalizați butoanele de adăugare în coș WooCommerce?

Multumesc pentru lectura. Vă rugăm să ne urmăriți pe YouTube, Twitter și Facebook pentru mai mult conținut util pentru a vă dezvolta afacerea.