Készítsen és tervezzen egy csodálatos WooCommerce termékoldalt az Elementor segítségével

Módosítania kell termékoldalát, hogy megkülönböztesse e-kereskedelmi üzletét a versenytársaktól, és egyedi élményt nyújtson ügyfelei számára. Ezenkívül a termékoldal esztétikus személyre szabásának lehetősége kritikus fontosságú ahhoz, hogy az egész online áruházban egységes látványterv maradjon fenn.

Az Elementor az egyik vezető WordPress webhelykészítő a piacon, de azt is tudtad, hogy WooCommerce üzleteket építhetsz vele?

Számos beépített Elementor WooCommerce modul lehetővé teszi a WooCommerce tartalom vagy funkcióblokkok beillesztését, vagy stílusát az Elementor építő segítségével. Elég nagyszerű, igaz?

A WooCommerce stílusa és testreszabása korábban minden apró változtatáshoz PHP-t és CSS-t igényelt, de ahogy az Elementorhoz hasonló eszközök fejlődnek és egyre bonyolultabbá válnak, egyre több lehetőség válik elérhetővé az üzlet kinézetének és működésének irányítására.

Kezdjük el.

• Elementor sablon készítése
• Building Elementor termékkép vagy galéria
• WooCommerce termék címe, ára és kosárba helyezés
• Az Elementor terméklapok beállítása
• Az Elementor termék rövid leírása
• Az Elementor és a WooCommerce termékek eladása
• Következtetés – Elementor termékoldal-készítő

Elementor sablon készítése

Az eljárás első lépése egy új Elementor-sablon létrehozása a WordPress irányítópultján található Sablonok oldalra való navigálással. Kattintson az "Új létrehozása" gombra, majd válassza ki az Egyetlen terméket létrehozni kívánt sablonként.

Ahogy ezt a sablont a semmiből fejlesztjük, nincs szükség blokkokra; lépjen ki a következő mezőből, amíg el nem éri az új oldal szokásos Elementor építő képernyőjét.

Building Elementor termékkép vagy galéria

Minden WooCommerce termékhez tartozik egy termékkép vagy képgaléria, amely a termékről készült fényképeket mutatja be az ügyfeleknek. Az Elementor beépített Product Images modult biztosít, amely lehetővé teszi, hogy ezt beillesszük a sablonunkba.

Hozzon létre egy egyszerű 2 oszlopos sort, és írja be a Termékképek modult a bal oldali oszlopba; ez praktikusnak tűnik és teljesíti a feladatot, de szabjuk testre az értékesítési jelvényt, hogy megfeleljen a cikkben használt Elementor Hello témának. Ehhez alkalmaznunk kell egy kis sor egyéni CSS-t, amelyet a Speciális > Egyéni CSS menüpontra kattintva vezethetünk be, és beilleszthetjük az alábbi kódot.

választó .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce termék címe, ára és kosárba helyezés

A jobb oldali oszlopban hozzáadjuk az Elementor modulokat a Termék megnevezéséhez, a Termék áraihoz és a Kosárba

Keresse meg ezt a három modult az Elementor konstruktorban, majd húzza át őket a fent leírt sorrendbe rendezéséhez; ez teljesen működőképes, de szeretnénk testreszabni, hogy illeszkedjen a stílushoz, mint a fenti Hello Elementor téma. A modulok stílusbeállítása az Elementorral egyszerű, csak rá kell kattintani a modulra, és a szerkesztőnek balra meg kell nyitnia a stíluslehetőségeket.

Ezeknek a moduloknak a tartalma kiváló. Így a Stílus fül alatt fogunk dolgozni. Először is frissítsük a termékcím betűtípusát és színét, hogy megfeleljen a Hello Elementor témában használtaknak.

Ezután ugyanezt kell tennünk a Termékár és a Kosárba adás moduloknál is úgy, hogy mindegyik modulra kattintunk, és módosítjuk a szöveg színét. A termék áránál sötétszürke kontrasztot fogok használni a címsorhoz, ezért írja be ezt a hexadecimális kódot, ha követi – #54595f

Ezután a Kosárba helyezés modulban frissítünk néhány dolgot. A gomb háttérszíne és a gomb keretének sugara az alábbi beállításokkal:

• Állítsa a tartalmat a "Kosárba" értékre.
• Állítsa a háttérszínt '#cc3366'-ra
• Állítsa a szegély sugarát 0-ra

Módosítottam a mennyiségválasztó szegély sugarát 0-ra, amit megtehet a Stílus lapon a Mennyiségnél.

Az Elementor terméklapok beállítása

Minden terméknek tartalmaznia kell néhány alapvető információt, például a termékleírást és az értékeléseket, ha elérhetők; ezt általában a terméklapokon keresztül kezelik.

Kérjük, hozzon létre egy új sort a felső rész alatt, és húzza be az Elementor Builderből a Termékadatlapok modult a sorba a beszúráshoz. Itt nincs szükség sok stílusra, mert bizonyos stílusokat a Hello Elementor témából örököl. Módosítsuk azonban az áttekintés benyújtása gomb stílusát.

Ehhez ismét szükségünk lesz egy kis egyéni CSS-re. Kezdje el a Termékadatok lapok szerkesztését, majd kattintson a Speciális fülre, és görgessen le az Egyéni CSS-hez. Adja meg az alábbi CSS-t, és beállíthatja a színeket a tervezésnek megfelelően.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; szín: #fff; határsugár: 0 képpont; }

Az Elementor termék rövid leírása

Rendben, tehát eddig egy tisztességes, egyszerűnek tűnő dizájnunk van, de kissé ritkásnak tűnik. A termék rövid leírása modulnak a felső részhez való hozzáadása segíthet kijavítani ezt, és több kontextust adhat hozzá.

Keresse meg a WooCommerce Rövid leírás modult, majd húzza át a Termék ára alatt és a Kosárba helyezés modul felett.

Itt még nincs szükség stílusra, mivel a Hello Elementor stílusait örökölte.

Az Elementor és a WooCommerce termékek eladása

Az átlagos kosárérték növelése kulcsfontosságú minden WooCommerce webhely számára, ezért jó, hogy az Elementor tartalmaz egy Termékfelújítási modult, amellyel könnyedén integrálhatja a testreszabást az üzletébe.

Kérjük, keresse meg a termék Upsells modult az Elementor builderben, és illessze be egy új sorba a Termékadatok fülek mögé.

Amint látja, ez egy kis kiigazítást igényel, hogy kiegészítse stílusunk többi részét. Kezdje el a modul módosítását, és hajtsa végre a következő módosításokat:

• Állítsa a cím színét – #cc3366 értékre
• Állítsa a címsor színét – #cc3366 értékre
• Állítsa az Ár színét – #54595f értékre
• Állítsa a Gomb háttérszínét – #cc3366-ra
• Állítsa a Gomb színét – #fff értékre
• Állítsa be a gombszegély sugarát t0 – 0 értékre

A kész termék a fentihez hasonlóan fog kinézni. A szín hexadecimális kódját saját belátása szerint módosíthatja, ha ezt az útmutatót a sablon kiugró pontjaként használja.

Ha elkészült, közzéteszi a sablont. A következő ablakban megjelenik a „Hol szeretné megjeleníteni a sablont?” kérdés. Kattintson a „Feltétel hozzáadása” gombra, hogy meghatározza, mikor kell használni ezt a sablont. Kiválaszthatja az „Összes termék” lehetőséget, hogy a sablont minden termékoldalán használni tudja. Kiválaszthatja azt is, hogy ezt a sablont csak azokhoz a termékekhez használja, amelyek egy adott kategóriába tartoznak, vagy amelyekhez egy adott címke van társítva.

Következtetés – Elementor termékoldal- készítő

Egyes felhasználóknak nehézségekbe ütközhetnek a testreszabott tervezési beállítások, például a betűszín és a tipográfia megjelenítése az Elementor használatakor. A WooCommerce áruház megjelenését befolyásolhatja, ha olyan WordPress témát használ, amely szabályozhatja az üzlet megjelenését. Ha ezzel a problémával találkozik, ne feledje, hogy a cikk bizonyos esetekben felülírhatja az egyéni oldalbeállításokat.

Választhat egy üres oldalt is, és az alapoktól kezdve létrehozhat egyet a termék widgetjei segítségével a teljesen testreszabott megjelenés érdekében. Használjon üres oldalt, zárja be a sablonkönyvtár előugró ablakát, amikor megjelenik, és kezdje el az újonnan létrehozott oldal építését. Az egyéni „Kosárba helyezés” gomb, a „Termék ára”, „Termék képe” és „Termék címe és leírása” csak néhány a WooCommerce widgetek közül, amelyek segítségével személyre szabhatja termékoldalát. Ezen az oldalon megtekintheti az összes jelenleg elérhető widgetet. Ha úgy tetszik, a widgeteket bárhol elrendezheti az oldalelrendezésen, és testreszabhatja stílusukat a kívánt megjelenéshez.

Módosítania kell termékoldalát, hogy megkülönböztesse e-kereskedelmi üzletét a versenytársaktól, és egyedi élményt nyújtson ügyfelei számára. Ezenkívül a termékoldal esztétikus személyre szabásának lehetősége kritikus fontosságú ahhoz, hogy az egész online áruházban egységes látványterv maradjon fenn. Az Elementor egy fantasztikus eszköz a WooCommerce áruház oldalainak testreszabásához, és erősen ajánlott. Amellett, hogy egyszerűen használható, az oldalkészítő minden szükséges widgetet és stílusbeállítást is tartalmaz, amelyek segítséget nyújtanak az egyéni termékoldalak létrehozásához. Reméljük, hogy hasznosnak találta ezt az oktatóanyagot, és megadta azokat az információkat, amelyekre szüksége volt a WooCommerce termék és termékarchívum oldalainak testreszabásához az Elementor használatával. Használta már az Elementort WooCommerce oldalak létrehozásához? Szívesen megoszthatja gondolatait a megjegyzés rovatban. Szívesen megnéznénk.