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

Comutați

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

Dashboard

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

Add New Plugin 1

Î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

Search Elementor

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.

Elemento Addons

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

Upload Plugin

Accesați stânga sus și faceți clic pe pluginul pentru încărcare.

Pasul 3) Încărcați addon -urile elementare

Upload Elemento Addons

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ă

Add New Plugin

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”

Edit With Elementor page

Î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ă.

Edit with Elementor Page 2

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

2 Side Container Steps

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.

Elementor Image

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.

Elementor Heading

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.

Elementor Text Editor

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.

Text Editor Short Description

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.

Elemento Addons Add to Cart

Î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ș.

Elemento Addons Add to Cart Settings

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.

SKU ID

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ă.

Elementor Social Icons

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.

Elementor Social Icons Setting

Î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.

Elementor Social Icons Description

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.

Elemento Addons Product Slider

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

Product Page Preview 1

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 .

Elemento Addons Widgets

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

Elemento Products

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.

Elemento Products Content

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

Elemento Products Style

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.

Elementor Page Publish

Acum previzualizați site -ul dvs.

Elemento Products Preview

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.

Single Product Page 1

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