Cum să adăugați vizualizare rapidă în WooCommerce

Doriți să includeți funcția de vizualizare rapidă pe site-ul dvs.? Aflați cum să adăugați și să personalizați un buton de vizualizare rapidă în magazinul dvs. WooCommerce .

În fiecare magazin WooCommerce, clienții pot vedea informații detaliate despre produse pe paginile produselor. Cu toate acestea, ei nu pot vedea descrierea, variațiile și alte informații atașate produsului pe pagina implicită a magazinului. Când cumpărătorii sunt pe pagina magazinului, trebuie să facă clic pe imaginea produsului sau pe link-ul pentru a merge la pagina produsului pentru a vedea mai multe informații despre acel produs. Acest lucru nu este ideal pentru că adaugă un pas în procesul de cumpărare și dacă clienții doresc să continue să navigheze în produsele tale, trebuie să se întoarcă la pagina magazinului.

Cu toate acestea, puteți adăuga un buton de vizualizare rapidă pe pagina magazinului WooCommerce și puteți îmbunătăți experiența utilizatorilor . Astfel, cumpărătorii vor putea vedea toate informațiile despre un produs fără a părăsi pagina magazinului. Să aruncăm o privire mai atentă la ceea ce face o vizualizare rapidă a butonului și cum să o adăugați în magazinul dvs. .

Ce este un buton de vizualizare rapidă?

Un buton de vizualizare rapidă permite clienților să vadă detaliile unui produs chiar pe pagina magazinului și fără a fi nevoie să deschidă pagina de produs a fiecărui articol de care sunt interesați. În acest fel, cumpărătorii pot naviga printre produsele din pagina magazinului, îmbunătățind experiență de cumpărare. Când utilizatorul face clic pe butonul de vizualizare rapidă, se va deschide o fereastră pop-up care afișează toate informațiile relevante despre produs pe aceeași pagină. Nu este nevoie să reîncărcați pagina magazinului sau să redirecționați utilizatorii către o altă pagină.

Cum să adăugați un buton de vizualizare rapidă la pagina magazinului WooCommerce

Cel mai simplu mod de a adăuga un buton de vizualizare rapidă în magazinul dvs. este să utilizați un plugin. Pentru această demonstrație, vom folosi Direct Checkout, unul dintre cele mai bune pluginuri de plată pentru WooCommerce. Chiar dacă Direct Checkout are o versiune gratuită, veți avea nevoie de versiunea premium pentru a adăuga butoane de vizualizare rapidă. Puteți alege oricare dintre cele 3 planuri premium care încep de la doar 19 USD (plată unică).

Instalarea și activarea Direct Checkout

Mai întâi, instalați Direct Checkout. Trebuie să obțineți versiunea gratuită de aici și una dintre versiunile premium de la acest link. Rețineți că trebuie să instalați și să activați atât versiunea gratuită, cât și versiunea premium a pluginului pentru a debloca funcția de vizualizare rapidă. După ce le instalați pe ambele, accesați WooCommerce > Direct Checkout > Arhive și activați opțiunea Adăugați butonul de vizualizare rapidă . În această secțiune, puteți înlocui și textul implicit al butonului Adăugați în coș. Rețineți că acest lucru nu va afecta în niciun fel comportamentul butonului de vizualizare rapidă. Asta e! Tocmai ați adăugat un buton de vizualizare rapidă pe pagina magazinului dvs. WooCommerce ! Iată cum arată butonul dacă utilizați tema StoreFront: Și când faceți clic pe butonul de vizualizare rapidă, va apărea pop-up-ul modal și va arăta similar cu acesta: Rețineți că toate informațiile despre produs sunt afișate în fereastra de vizualizare rapidă. Chiar și butonul Adaugă în coș este acolo, ceea ce permite clienților să adauge produse în coșul lor chiar din fereastra pop-up. Acum, să facem un pas mai departe și să vedem cum să personalizăm butonul de vizualizare rapidă cu un pic de CSS.

Cum să personalizați vizualizarea rapidă WooCommerce

În această secțiune, veți învăța cum să personalizați atât butonul de vizualizare rapidă, cât și fereastra pop-up modală de vizualizare rapidă folosind un pic de CSS . Scripturile CSS sunt foarte utile pentru multe sarcini, așa că, chiar dacă ești începător, merită să înveți câteva concepte CSS de bază. Acum, să aruncăm o privire la modul de personalizare a diferitelor elemente atât ale butonului de vizualizare rapidă, cât și ale pop-up-ului modal de vizualizare rapidă.

Rețineți că ar trebui să lipiți următoarele coduri în fișierul style.css al temei secundare sau caseta CSS suplimentară a personalizării temei. Dacă nu aveți o temă copil, puteți consulta această postare pentru a crea una sau puteți utiliza unul dintre aceste pluginuri.

3.1 Editați butonul de vizualizare rapidă

Modificați lățimea butonului de vizualizare rapidă

li.product .qlwcdc_quick_view.button{
width: 40%;
}

Editați culoarea de fundal

li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}

Editați culoarea pictogramei

li.product .qlwcdc_quick_view.button{
color:red;
}

Adăugați margini rotunjite

li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}

Utilizați o imagine ca buton

li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}

Înlocuiți pictograma cu text

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}

Adăugați efect de hover

li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}

3.2) Editați pop-up-ul modal de vizualizare rapidă

Acum, să vedem un cod pentru a personaliza fereastra de tip pop-up de vizualizare rapidă.

Schimbați culoarea de fundal

#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}

Ascunde meta produs

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}

Ascundeți cantitatea și adăugați în coș

#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} #qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
} Tocmai am aruncat o privire asupra diferitelor scripturi pentru a personaliza diferite aspecte ale butonului de vizualizare rapidă în WooCommerce. Dacă doriți să aflați mai multe despre ce puteți face cu CSS, consultați acest ghid.

Exemple de scripturi CSS

Acum că ați învățat cum să adăugați și să faceți personalizări de bază în vizualizarea rapidă în WooCommerce, să facem un pas mai departe. Mai jos veți găsi trei exemple pentru a edita butonul de vizualizare rapidă și pentru a adăuga un pic de aromă paginii dvs. de magazin.

Buton cerc cu pictogramă personalizată

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}

Buton text cu stil

li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}

Utilizarea unei imagini ca buton

li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}

Concluzie

Una peste alta, prin adăugarea unui buton de vizualizare rapidă vei îmbunătăți experiența de cumpărare a clienților tăi. Aceștia vor putea vedea detaliile principale ale produsului direct pe pagina magazinului fără a fi nevoie să deschidă pagina de produs a fiecărui articol pe care doresc să-l vadă. Cel mai simplu și mai convenabil mod de a adăuga un buton de vizualizare rapidă în WooCommerce este să utilizați pluginul Direct Checkout. Acest instrument vă permite să adăugați butonul de vizualizare rapidă pe pagina magazinului în câteva clicuri. Apoi, dacă doriți să faceți un pas mai departe și să personalizați atât butonul, cât și fereastra pop-up, puteți folosi puțin CSS.

Cunoașteți alte modalități de a include un buton de vizualizare rapidă în magazinul dvs.? Ați avut probleme în urma ghidului nostru? Spune-ne în secțiunea de comentarii de mai jos și vom face tot posibilul să te ajutăm.

Pentru mai multe informații despre cum să vă personalizați magazinul, vă recomandăm să consultați următoarele ghiduri:

• Cum să personalizați pagina de magazin WooCommerce
• Cum să personalizați butonul Adaugă în coș în WooCommerce
• Editați pagina de plată WooCommerce