Cum se creează pagini de produs personalizate WooCommerce folosind Elementar
Publicat: 2025-02-19În zilele noastre, Elementar se numără printre constructorii de pagini de top. Este foarte ușor să creezi un site web folosind caracteristicile constructorilor de pagini.
Cu toate acestea, oferă modele premade, dar dacă doriți să creați pe cont propriu, atunci Elementator de constructor de drag-and-drop face ca fiecare operațiune să fie foarte ușoară. Deci este o situație câștig-câștig.
Apropo, paginile de produse se găsesc în aproape fiecare site de comerț electronic, dar o pagină personalizată de produs WooCommerce este construită atunci când proprietarul site -ului trebuie să arate diferit un produs.
În timp ce proiectați site -ul, puteți crea pagini WooCommerce personalizate.
Și în acest blog, vom vedea cum să creăm pagini de produse personalizate WooCommerce folosind Elementar Page Builder într -un site WordPress.
Cuprins
Ce instrumente avem nevoie pentru a crea pagini de produse personalizate WooCommerce
În acest blog, vom avea nevoie de pluginul Elementar. Pe lângă aceasta, vom avea nevoie și de elemente de element.
Elementar face ca procesul de construire a paginilor să fie ușor, iar elementul addon ajută la extinderea puterii elementului prin adăugarea widget-urilor și funcționalități suplimentare la widget-uri.
Elementato Addrons are câteva widget -uri care se simt ilegale de utilizat din cauza funcționării și netezimii lor.
Deci, să începem acum,
Cum se creează pagini de produs personalizate WooCommerce folosind Elementar
În primul rând, să instalăm ambele pluginuri.
Instalarea pluginului Elementar
Pasul 1) Deschideți tabloul de bord

Conectați -vă la tabloul de bord WordPress.
Pasul 2) Accesați plugin -uri și faceți clic pe Adăugați un nou plugin

În tabloul de bord, puteți vedea mai multe meniuri pe partea stângă. Accesați plugin -uri și faceți clic pe Adăugați un nou plugin.
Pasul 3) Accesați bara de căutare și căutați Elementar

Pe această pagină, veți găsi pluginurile. Accesați bara de căutare și căutați elementul.
Pasul 4) Instalați și activați elementul
După căutarea elementului, acesta va apărea în lista pluginului. Faceți clic pe butonul de instalare, după instalare, faceți clic pe butonul Activare pentru a activa pluginul Elementar.
Încărcarea pluginului Elemento Addi
În primul rând, descărcați elementele de la element de la Themehunk.

Accesați pagina Elementto Addon și achiziționați pluginul. Puteți viziona acest tutorial dacă aveți nevoie de o mână de ajutor pentru a obține Addrons Element.
Pasul 1) Deschideți tabloul de bord și accesați pagina pluginului
Repetați aceiași pași și ajungeți la pagina pluginului.
Pasul 2) Faceți clic pe pluginul pentru încărcare

Accesați stânga sus și faceți clic pe pluginul pentru încărcare.
Pasul 3) Încărcați addon -urile elementare

Faceți clic pe Instalare acum și apoi activați pluginul.
Ambele pluginuri sunt instalate și acum putem continua mai departe.
Crearea paginii de produse personalizate WooCommerce
Pasul 1) Creați o nouă pagină

Accesați tabloul de bord și faceți clic pe pagini, apoi faceți clic pe Adăugare pagină nouă.
Pasul 2) Faceți clic pe „Editați -vă cu Elementar”

În bara de sus, veți găsi editarea cu butonul Elementar. Faceți clic pe el.
După aceasta, pagina se va deschide cu Elementar. Puteți accesa și utiliza widget -urile Elementar de pe această pagină.

Vom avea nevoie de două compartimente, așa că mai întâi luați un recipient care are două părți.

Pe o pagină de produs, primul și unul dintre cele mai importante lucruri pe care le vom pune este imaginea. Așa că găsiți widgetul Image și puneți -l în recipientul din stânga.

Acum setați imaginea produsului.
Acum vino în partea dreaptă. Pentru a intra în rubrică, căutați -l și introduceți -l în al doilea container.

Introduceți numele produsului în titlu.
În același mod, vom scrie prețurile produsului. Pentru a scrie prețul, introduceți un widget editor de text sub titlu și scrieți prețul produsului acolo.

Pe paginile produsului, există o scurtă descriere a produsului. Pentru a -l adăuga, introduceți din nou editorul de text și scrieți o scurtă descriere a produsului.


Acum este timpul să adăugați butonul CART. De data aceasta vom folosi widget -ul CART al Addon -ului Elementto, deoarece are mai multe caracteristici și funcționalități.
Căutați adăugarea în coș și introduceți -l în recipient.

În setările butonului CART, căutați numele produsului și selectați produsul din secțiunea Produse. După aceasta, când utilizatorul face clic pe butonul CART, acesta va fi adăugat direct în coș.

Dacă doriți să adăugați ID -ul SKU, atunci puteți face acest lucru la fel cum am adăugat un alt widget. Aici introduceți editorul de text și scrieți SKU -ul produsului.

Una dintre părțile importante ale unei pagini de produs este să aveți butoane de partajare socială. Puteți adăuga și butonul de partajare socială la această pagină.
Căutați pictogramele sociale și puneți -le pe pagină.

Dacă doriți să adăugați mai multe butoane de mânere sociale, atunci faceți clic pe Adăugați nou și adăugați butonul nou. Puteți face mai multe modificări precum schimbarea pictogramei și editarea link -ului și a culorii.

În același mod, puteți adăuga celălalt lucru aici.
Dacă doriți să dați o descriere principală, de asemenea, adăugați editorul de text și scrieți descrierea.

Am adăugat descrierea principală în afara containerului care arată organizat și sistematic.
Când utilizatorii vizitează o pagină de produs, puteți afișa produse conexe, astfel încât să le poată verifica și ele.
Așadar, pentru a adăuga mai întâi produsul conex, adăugați mai întâi o rubrică și căutați glisorul de produse în elementele de adaos.

Acesta este modul în care puteți adăuga pagina de produs WooCommerce personalizată. Acum este timpul să vedem previzualizarea paginii.

Trebuie să vă spun, o pagină de produs poate fi făcută și în câțiva pași simpli. Pentru aceasta, vom avea nevoie de widgetul Elementto Addi.
Să vedem, cum se face.
Utilizați pagina de produs personalizată
După ce faceți clic pe Editare cu Elementar , mergeți în partea stângă, unde veți găsi widget -urile Elementar.
Derulați în jos și ajungeți la elementele de adaos .

Găsiți produse în avans temă, trageți widgetul și aruncați pe pagină.

Când renunțați la widget, setarea sa de personalizare va apărea pe bara din stânga. Puteți edita setările și aspectul addonului.

Dar dacă doriți să schimbați aspectul site -ului, atunci faceți clic pe stil în afară de conținut.

Secțiunea de stil permite schimbarea culorilor, tipografiei și a altor setări ale suplimentului.
După ce faceți toate modificările și configurați pagina, faceți clic pe Publish.

Acum previzualizați site -ul dvs.

Aici puteți vedea, pe pagina produsului personalizat WooCommerce, am adăugat produsele cu ajutorul widget -ului produsului Elementato Addons.
Produsele sunt afișate pe pagină. Să previzualizăm pagina unică a produsului.

Asta este, este construită pagina de produs personalizată WooCommerce.
FAQ
Î. Răspunsul Widget -ului Produs Element Addons?
Ans. Da, widgetul produsului răspunde 100% la toate dispozitivele. Utilizatorii pot accesa Site -ul și pot primi cea mai bună vizualizare pe orice dispozitiv pe care îl doresc.
Î. Cum să selectați produsele pentru a afișa în Widget Products Element Addons?
Ans. Există diverse modalități de a arăta produse. Puteți afișa produse după categorie, data adăugată, etc. Cu toate acestea, dacă adăugați un widget de produs, acesta va obține automat produsele.
Concluzie
Deci am învățat, cum să adăugați pagina de produs personalizată WooCommerce folosind Elementar. Pe măsură ce am folosit și pluginul Elementto Addon, a făcut foarte ușor să adăugați produse și să le arătați pe pagină.
Elementato Addrons are atât de multe suplimente pentru construirea site -urilor web. Nu este cunoscut doar pentru widget -uri, ci și pentru caracteristicile widget -urilor.
Pagini de produs personalizate WooCommerce pot fi necesare pentru a promova caracteristici specifice. De obicei, șabloanele nu au astfel de pagini, astfel încât devine necesară crearea paginii pe cont propriu.
Sper că acest blog te va ajuta. Totuși, dacă aveți întrebări sau sugestii, anunțați -mă în secțiunea de comentarii.
Vă puteți abona la canalul nostru YouTube , încărcăm și conținut excelent acolo, de asemenea, urmează -ne pe Facebook și Twitter .
Descoperiți mai multe articole
- Cum să schimbați URL -ul de conectare WordPress (URL personalizat) în pași simpli
- Cum se creează o pagină de eroare personalizată 404 în WordPress (Ghid ușor)
- Cum să adăugați o bară de căutare personalizată la WooCommerce pentru o descoperire mai ușoară a produsului