Cum să creați formulare WinCommerce Lucky Wheel Optin cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați formulare WinCommerce cu roți norocoase cu Divi și pluginul WP Optin Wheel. Acest tutorial vă va ajuta, sperăm, să creșteți ratele de conversie a formularului de optin. Funcția de gamificare a formularului de roată norocoasă vă va permite să interacționați cu vizitatorii și să îi recompensați cu un cod de reducere pe care îl pot folosi la achizițiile lor online.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Instalați WooCommerce

Căutați plugin și instalare

Primul lucru pe care va trebui să-l faceți dacă nu ați făcut-o deja este să instalați WooCommerce pe site-ul dvs. WordPress. Presupunem, de asemenea, că ați configurat pachetul de machetare magazin hardware pe site-ul web Divi la care lucrați.

Accesați pluginurile și căutați WooCommerce. După ce îl găsiți, faceți clic pe butonul „Instalați acum”.

Activati

Asigurați-vă că activați imediat pluginul WooCommerce.

Configurați WooCommerce

Apoi, WooCommerce vă va redirecționa automat către formularul său de configurare. Aici, va trebui să completați toate detaliile pentru a vă pregăti magazinul pentru a intra în direct. După ce parcurgeți acest proces, toate paginile necesare WooCommerce vor fi adăugate automat pe site-ul dvs. web.

Instalați WP Optin Wheel Plugin

Căutați plugin și instalare

Pentru a crea forma de optimizare a roții norocoase, vom folosi un plugin de gamificare gratuit numit WP Optin Wheel. Reveniți la pluginurile dvs. și căutați pluginul WP Optin Wheel. Apoi, faceți clic pe butonul „Instalați acum”.

Activati

Continuați activând pluginul.

Adăugați produse la WooCommerce

Adăugați un produs nou

Dacă rulați deja un site de comerț electronic, puteți sări peste această parte. Cu toate acestea, dacă încercați lucrurile, vă recomandăm să adăugați câteva produse la pluginul dvs. WooCommerce. Acest lucru vă va ajuta să testați ulterior forma optinului roții norocoase. Pentru a adăuga un produs nou, accesați Produse> Adăugați un produs nou .

Adăugați detalii despre produs

Completați toate detaliile produsului. Aceasta include, dar nu se limitează la, un nume de produs, descriere, imagine prezentată, preț și categorie. Publicați pagina produsului după ce ați terminat de adăugat aceste detalii.

Repetați pentru fiecare produs

Repetați același pas pentru fiecare dintre produsele pe care doriți să le adăugați pe site-ul dvs. web.

Adăugați cupoane la WooCommerce

Accesați Cupoane

Acum este timpul să adăugați cupoane. Mai târziu în această postare, vom folosi cupoanele pe care le creăm în forma optin pentru roata norocoasă. Accesați tabloul de bord WordPress> WooCommerce> Cupoane . Odată ajuns acolo, continuați și începeți să creați primul cupon.

Adăugați cuponul nr. 1: 5% REDUCERE

General

În roata norocoasă a 12 felii, puteți decide câte felii includ un premiu. De exemplu, puteți oferi 4 premii și puteți crea un cupon diferit pentru fiecare dintre ele. De asemenea, puteți utiliza un cupon pentru mai multe locuri pe roată. După ce ați creat primul cupon, continuați și introduceți codul cuponului în partea de sus a paginii. Apoi, modificați setările generale:

• Tip de reducere: Reducere procentuală
• Suma cuponului: 5
• Data de expirare a cuponului: introduceți data dorită

Restricții de utilizare

Continuați trecând la filele de restricție de utilizare. Aici puteți decide dacă există o cheltuială minimă și maximă legată de cupon. De asemenea, puteți bifa următoarele căsuțe:

• Bifați această casetă dacă cuponul nu poate fi utilizat împreună cu alte cupoane.
• Bifați această casetă dacă cuponul nu ar trebui să se aplice articolelor aflate la vânzare. Cupoanele pe articol vor funcționa numai dacă articolul nu este în vânzare. Cupoanele per-cart vor funcționa numai dacă există articole în coș care nu sunt la vânzare.

Repetați pașii pentru alte 3 cupoane

Creați câte cupoane doriți urmând aceiași pași menționați mai sus. Nu vă limitați la oferirea unei reduceri procentuale. De asemenea, puteți crea un cupon care să ofere o reducere fixă ​​pentru coș sau produs și să îl includeți în roata norocoasă.

Creați formularul Optin pentru Lucky Wheel

Accesați Setări plugin

Acum, că am parcurs toți pașii necesari pentru ca forma roții norocoase să funcționeze, putem începe să creăm una! Accesați tabloul de bord WordPress > Roata WP Optin .

Adăugați cheia API MailChimp

Înainte de a începe să creați o roată norocoasă, va trebui să adăugați cheia API MailChimp. Versiunea gratuită a pluginului WP Wheel Optin oferă doar integrare cu MailChimp. Dacă doriți să conectați roata norocoasă la un alt furnizor, va trebui să treceți la versiunea premium.

Creați o roată nouă

Alege Tema

Să începem să creăm roata! Alegeți o paletă de culori la alegere. Pentru acest tutorial, îl alegem pe cel portocaliu, deoarece se potrivește bine cu paleta de culori a pachetului de machete hardware.

Șanse de configurare

Următorul pas în crearea formularului de optimizare a roții norocoase este alegerea unui procent de schimbare câștigătoare. Acest procent indică cât de des oamenii câștigă ceva când învârt roata. În acest caz, fiecare vizitator care învârte roata are șanse de 70% să câștige un cod cupon.

Configurați felii

Continuați configurând cele 12 felii diferite. Puteți dedica fiecare dintre felii uneia dintre cele trei opțiuni:

• Fără premiu: vizitatorul nu câștigă nimic
• Cod cupon: vizitatorul câștigă un cod cupon
• Link: vizitatorii câștigă o carte electronică, de exemplu

În acest exemplu, folosim 4 din cele 12 felii pentru a adăuga un cod de cupon. De asemenea, configurăm șansele pentru fiecare dintre aceste felii în mod individual.

Setup Form Builder

Pasul următor vă ajută să construiți forma optin în sine. Veți observa că există deja un câmp de e-mail acolo. Singurul alt tip de câmp pe care îl puteți adăuga la formularul de opțiune este o casetă de selectare. Au adăugat în mod specific acest tip de câmp pentru a face ca formularul să fie conform cu GDPR.

Setari de continut

Continuând, veți putea configura conținutul scris al formularului de optimizare a roții norocoase. Continuați și schimbați tot conținutul pentru a se potrivi cu site-ul dvs. web.

Setări de proiectare

Deschideți setările de proiectare în continuare și alegeți „Fără model” pentru opțiunea de model de fundal.

Setări de comportament

De asemenea, trebuie să alegeți când formularul de optimizare a roții norocoase apare în setările de comportament.

GDPR

Nu în ultimul rând, vă puteți asigura că datele pe care le partajează vizitatorii nu sunt salvate decât dacă au bifat diferitele casete din formularul dvs. de optin și ați terminat! Salvați formularul de optimizare a roții norocoase și accesați site-ul dvs. web pentru a-l testa.

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Gânduri finale

Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, în care încercăm să punem ceva suplimentar în cutia de instrumente în fiecare săptămână. Sperăm că acest tutorial vă va ajuta să vă construiți listele de e-mailuri mai rapid și într-un mod interactiv. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!