Cum să adăugați WooCommerce Product Search: Un ghid pentru îmbunătățirea experienței de cumpărături

Publicat: 2023-05-17

Doriți să îmbunătățiți căutarea de produse în magazinul dvs. WooCommerce? Dacă doriți să faceți mai ușor pentru clienții dvs. să găsească ceea ce caută și să vă creșteți vânzările, ați venit în locul potrivit!

Știm cu toții cât de frustrant poate fi atunci când nu găsești ceea ce cauți, nu? Prin înlocuirea funcției implicite de căutare în WooCommerce cu o soluție mai inteligentă, puteți face mai ușor pentru clienții dvs. să descopere produse și să aibă o experiență grozavă de cumpărături. În acest articol, vă vom arăta cum să creați o experiență de căutare mai inovatoare și mai rapidă pentru magazinul dvs. online.

Vă vom ghida prin proces pas cu pas. Așadar, pregătiți-vă să vă supraîncărcați căutarea de produse WooCommerce! Până la sfârșitul acestui ghid, veți avea lucrurile de care aveți nevoie pentru a duce căutarea de produse WooCommerce la nivelul următor. Deci, cum să adăugați căutare de produse WooCommerce? Să aflăm!

Cum să adăugați WooCommerce Product Search într-o pagină?

Căutarea implicită de produse WooCommerce are limitări care pot afecta eficacitatea descoperirii produselor. Poate oferi rezultate inexacte, poate funcționa lent pe măsură ce catalogul crește, poate lipsi opțiunile de filtrare, poate avea probleme cu sinonimele sau greșelile de ortografie și poate oferi opțiuni limitate de sortare. Depășirea acestor limitări este crucială pentru îmbunătățirea experienței de căutare, creșterea vânzărilor și creșterea satisfacției clienților.

ProductX depășește aceste limitări și vă permite să faceți căutarea produsului WooCommerce perfectă pentru magazinul dvs. Cu puterea căutării WooCommerce AJAX și un set complet de opțiuni de personalizare, ProductX este ceea ce aveți nevoie cu adevărat. Deci, instalați ProductX pentru a trece înaintea jocului.

Și, așa cum am spus mai devreme, să ne aprofundăm în adăugarea căutării de produse în WooCommerce fără întârziere. Există 2 moduri de a utiliza căutarea de produse WooCommerce. Îl puteți folosi pe orice pagină sau puteți adăuga opțiunea de căutare în antetul Magazinului. Vom acoperi ambele sensuri, așa că rămâneți până la sfârșit.

Pasul 1: Adăugarea blocului de căutare de produse pe pagină

Odată ce ați instalat cu succes ProductX, blocurile de căutare de produse sunt acum disponibile pentru utilizare împreună cu personalizarea sa extinsă. Așadar, fără alte prelungiri, permiteți-ne să vă arătăm cum să adăugați WooCommerce Product Search în magazinul dvs.

Adding WooCommerce Product Search Block
Adăugarea blocului de căutare de produse WooCommerce

În primul rând, trebuie să accesați o pagină. Puteți accesa opțiunea de pagină WordPress și faceți clic pe Adăugare nou pentru a crea o pagină nouă. Apoi, căutați „Căutare produs” pentru a selecta acest bloc. Și aceasta va adăuga blocul Căutare la pagină.

Pasul 2: Personalizarea blocului de căutare de produse WooCommerce

După adăugarea unui bloc de căutare de produse, îl puteți personaliza în funcție de nevoile dvs. Acest bloc oferă multe opțiuni de personalizare pentru a face căutarea perfectă a produsului pentru magazinul dvs.

Lasă-ne să vedem opțiunile de personalizare pe care le vei primi fără întârziere.

Aspecte câmpuri de căutare

Faceți clic pe opțiunea de aspect pentru a selecta diferite aspecte pentru câmpurile dvs. de căutare. Puteți experimenta diferite aspecte pentru a găsi pe cel care se potrivește cel mai bine design-ului site-ului dvs. și experienței utilizatorului.

Search Field Layout
Aspect câmp de căutare

Există 5 modele de câmp de căutare din care puteți alege și puteți face clic cu ușurință pentru a selecta aspectul dorit.

Căutați în lista de produse

Puteți utiliza aspectul listei de produse de căutare pentru a crea o afișare plăcută vizual și organizată a rezultatelor căutării. Veți obține trei aspecte diferite ale listei de produse de căutare și, de asemenea, veți ajusta lățimea, numărul de coloane și decalajul coloanelor pentru a optimiza aranjarea miniaturilor, titlurilor, prețurilor și evaluărilor produselor.

Product List Layout
Aspect listă de produse

Stil formular de căutare

Utilizați setările stilului formularului de căutare pentru a modifica culorile (culoarea de intrare și fundalul), tipografia, chenarele și alte elemente vizuale, cum ar fi raza formularului și umplutura de introducere a formularului de căutare.

Search Form Style Settings
Setări pentru stilul formularului de căutare

Panoul de setări este foarte intuitiv și puteți selecta setările la alegere pentru a personaliza setările adiacente.

Stil de categorie

Cu această setare, puteți personaliza stilul categoriilor de produse afișate în rezultatele căutării. Ajustați culorile textului, fontul, spațierea și aspectul pentru a vă evidenția categoriile și a le face atractive vizual.

Category Style Settings
Setări stil categorie

Puteți personaliza opțiunea de tipografie pentru textul selectat și textul drop-down. De asemenea, puteți ajusta lățimea, lățimea separatorului, înălțimea și culorile separatorului.

Pictograma Căutare

Pictograma de căutare este cea mai intuitivă pictogramă pe care oamenii o folosesc pentru a determina un câmp de căutare. Din setările pictogramei de căutare, îi puteți ajusta dimensiunea, culorile și culorile de fundal pentru modurile normal și hover. Personalizați-i raza, lățimea și marginile butoanelor pentru a plasa perfect pictograma de căutare.

Search Icon Settings

Butonul Mai multe rezultate

Butonul „Mai multe rezultate” permite utilizatorilor să încarce rezultate de căutare suplimentare fără a părăsi pagina, oferind o modalitate convenabilă de a explora mai multe produse. Pentru a vă proiecta perfect căutarea de produse, puteți modifica tipografia, textul și culoarea cursorului din setările acesteia.

More Results Settings
Mai multe setări pentru rezultate

Stil derulant

În aceste setări, puteți personaliza stilul meniurilor drop-down din blocul dvs. de căutare. Ajustați culorile, chenarul și raza. De asemenea, veți obține setarea umbrei casetei, spațierea elementelor (X și Y) și o opțiune de a alege culoarea separatorului și de a regla lățimea separatorului.

Dropdown Style Settings
Setări de stil derulant

imaginea produsului

Controlați afișarea imaginilor produselor în rezultatele căutării cu această setare. Reglați cu ușurință lățimea, înălțimea și raza imaginii cu setări intuitive.

Product Image Settings
Setări pentru imaginea produsului

Titlul produsului

Personalizați aspectul titlurilor produselor în rezultatele căutării. Modificați toate setările legate de tipografie, treceți cu mouse-ul și căutați culoarea evidențiată pentru a o face să arate superb.

Product Title Settings
Setări pentru titlul produsului

Prețul produsului

Personalizați culoarea și setările de tipografie necesare de aici pentru a afișa mai bine prețul produsului în caseta de căutare a produsului.

Product Price Settings
Setări pentru prețul produsului

Evaluare produs

Controlați culoarea evaluărilor produselor în rezultatele căutării. Activați sau dezactivați evaluările cu un singur clic sau schimbați cu ușurință culorile evaluării dvs.

Product Rating Settings
Setări de evaluare a produsului

Cum să adăugați WooCommerce Product Search în antet

De asemenea, puteți adăuga căutarea produsului WooCommerce în antet. Vă vom arăta un ghid pas cu pas, astfel încât să îl puteți utiliza fără nicio bătaie de cap.

Pasul 1: Creați un șablon salvat

Mai întâi, trebuie să activați Addonul de șablon salvat.

Enabling Saved Template Addon
Activarea suplimentului de șablon salvat

Acum accesați ProductX→Saved Template. Și faceți clic pe „Adăugați un șablon nou”.

Adding WooCommerce Product Search Block
Adăugarea blocului de căutare de produse WooCommerce

Adăugați „Blocul de căutare de produse” și personalizați-l după cum este necesar. Și apoi faceți clic pe Publicare.

Pasul 2: Copiați codul scurt

Reveniți la pagina „Șablon salvat” (ProductX → Șablon salvat). Și veți vedea un Shortcode.

Copying The Shortcode
Copierea codului scurt

Faceți clic pe shortcode pentru a-l copia.

Pasul 3: Accesați Personalizatorul temei

„Notă: puteți personaliza majoritatea temelor din elementul de personalizare. Și adăugarea căutării produsului WooCommerce se poate face din secțiunea antet a unei teme. Diferite teme pot avea nume diferite de meniu. Astăzi folosim tema Kadence, de exemplu.”

Acum accesați Aspect → Personalizare.

Go to Theme Customize
Accesați Tema Personalizare

Selectați „Header” pentru a introduce setările acestuia.

Theme Header Customization
Personalizare antet teme

Adăugați HTML în secțiunea preferată.

Pasul 4: Lipiți codul scurt

Acum, faceți clic pe HTML și accesați fila Text. Veți vedea un câmp de text aici.

Adding and Editing HTML in Header
Adăugarea și editarea HTML în antet

Lipiți codul scurt în câmpul de text și faceți clic pe Publicare.

Pasting Shortcode in HTML
Lipirea codului scurt în HTML

Aceasta va adăuga opțiunea de căutare a produsului WooCommerce la secțiunea antet.

Notă: Temele diferite au lățimi diferite ale secțiunii antetului. Dacă căutarea de produse nu se potrivește, ajustați „Lățimea” din setările generale ale blocului „Căutare produse”.

Concluzie

În concluzie, personalizarea blocului de căutare de produse WooCommerce cu ProductX vă permite să vă controlați pe deplin experiența de căutare.

Cu ajutorul setărilor complete de personalizare, puteți crea o experiență de căutare personalizată și atractivă din punct de vedere vizual pentru clienții dvs.

Îmbunătățirea funcției de căutare a produselor îmbunătățește experiența utilizatorului și crește șansele ca clienții să găsească produsele pe care le doresc, conducând în cele din urmă la vânzări îmbunătățite și la satisfacția clienților.

Cu ProductX, vă puteți optimiza magazinul WooCommerce și puteți oferi cumpărătorilor o experiență de căutare ideală și eficientă.

Puteți consulta tutoriale video WordPress pe canalul nostru YouTube. De asemenea, găsiți-ne pe Facebook și Twitter pentru actualizări regulate!

Vă place acest articol? Imprastie vestea
  • How to Create a Food Blog in 9 Easy Steps

    Cum să creezi un blog cu alimente [în 9 pași simpli]

  • WooCommerce Pagination

    2 tipuri de paginare WooCommerce cu setări

  • How to Reorder Posts in WordPress

    Cum să reordonezi postările în WordPress (3 moduri eficiente)

  • How To Display WordPress Video as Featured Image With PostX

    Cum să afișați videoclipuri WordPress ca imagine recomandată cu PostX