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

Módosítania kell a termékoldalát, hogy megkülönböztesse e-kereskedelmi áruházát a versenytől, és egyedi élményt nyújtson ügyfeleinek. Ezenkívül a termékoldal esztétikus testreszabásának lehetősége kritikus fontosságú az online webáruházban az egységes látványterv fenntartása érdekében.

Az Elementor az egyik vezető WordPress weboldal-készítő a piacon, de tudta-e azt is, hogy WooCommerce üzleteket is létrehozhat ezzel?

Számos beépített Elementor WooCommerce modul lehetővé teszi a WooCommerce tartalom vagy funkcióblokkok beszúrását vagy stílusosítását az Elementor készítővel. Nagyon jó, igaz?

A WooCommerce stílusa és testreszabása PHP-t és CSS-t igényelt minden apró változtatáshoz, de ahogy az Elementorhoz hasonló eszközök javulnak és összetettebbé válnak, egyre több lehetőség áll rendelkezésre az áruház kinézetének és működésének irányításához.

Kezdjük el.

• Elementor sablon létrehozása
• Building Elementor termék kép vagy galéria
• WooCommerce termék megnevezése, ára és kosárba helyezése
• Az Elementor termékfülek beállítása
• Az Elementor termék rövid leírása
• Az Elementor és a WooCommerce termékek értékesítése
• Következtetés - Elementor termékoldal -készítő

Elementor sablon létrehozása

Az eljárás első lépése egy új Elementor sablon létrehozása a WordPress irányítópult Sablonok elemére navigálásával. Kattintson az "Új építés" gombra, majd válassza az Egy termék lehetőséget a létrehozni kívánt sablonként.

Amint 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 a szokásos Elementor készítő képernyőt egy új oldal eléréséhez.

Building Elementor termék kép vagy galéria

Minden WooCommerce termékhez tartozik egy termékkép vagy képgaléria, amely bemutatja a vásárló számára a termék fényképeit. Az Elementor beépített Product Images modult biztosít, amely lehetővé teszi számunkra, hogy ezt beillesszük a sablonunkba.

Hozzon létre egy egyszerű 2 oszlopos sort, és írja be a Product Images modult a bal oldali oszlopba; ez praktikusnak tűnik és elvégzi a munkát, de testre szabhatjuk az értékesítési jelvényt, hogy megfeleljen a cikkben használt Elementor Hello témának. Ehhez egy kis sort kell alkalmaznunk az egyedi CSS-ről, amelyet az Advanced> Custom CSS fejléc alatt vezethet be, és illessze be az alábbi kódot.

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

WooCommerce p roduct cím, ár és kosárba

A jobb oldali oszlopba felvesszük az Elementor modulokat a termék címéhez, a termék árához és a kosárhoz adáshoz.

Keresse meg ezt a három modult az Elementor konstruktorban, majd húzza át és dobja át őket a fent megadott sorrendbe rendezéshez; ez teljesen működőképes, de szeretnénk testre szabni, hogy illeszkedjen a stílushoz, mint a fenti szakasz Hello Elementor témája. A modulok stílusa az Elementor segítségével egyszerű, csak rákattint a modulra, és a szerkesztőnek meg kell nyitnia a bal oldali stílusbeállításokat.

Ezeknek a moduloknak a tartalma kiváló. Így a Stílus fül alatt fogunk dolgozni. Először frissítsük a Termék cí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 Product Price és a Add to Basket modulok esetében is, ha rákattintunk az egyes modulokra és módosítjuk a szöveg színét. A termék árához sötétszürke színt fogok használni a címsorral való ellentétben, ezért írja be ezt a hexakódot, ha követi - # 54595f

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

• Állítsa a tartalmat "Kosárba" értékre.
• Állítsa be a háttér színét „# cc3366” értékre
• Állítsa a szegély sugarát 0-ra

Megváltoztattam az összegválasztó határsugarát 0-ra, amit megtehet a Stílus fülön a Mennyiséghez.

Az Elementor termékfülek beállítása

Minden terméknek tartalmaznia kell néhány alapvető információt, például termékleírást és véleményeket, ha vannak; ezt általában a termékfüleken keresztül kezelik.

Kérjük, hozzon létre egy új sort a felső szakasz alatt, és húzza a Termékadatok lapok modult az Elementor készítőjéből a sorba a beszúráshoz. Itt nem sok stílusra van szükség, mert egyes stílusokat a Hello Elementor témából örököl. Módosítsuk azonban az áttekintés beküldésének gombját.

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

.woocommerce #review űrlap #válasz .form-submit bemenet {background-color: # cc3366; szín: #fff; határ-sugár: 0px; }

Elementor p roduct rövid leírás

Oké, tehát eddig rendes, egyszerű megjelenésű kialakítással rendelkezünk, de kissé ritkának tűnik. A termék rövid leírása modul hozzáadása a felső részhez elősegítheti ennek kitöltését és további kontextus hozzáadását.

Kérjük, 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 fölé.

Itt még nincs szükség stílusra, mivel a stílusokat a Hello Elementortól örökölte.

Elementor és WooCommerce p roduct upsells

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 Product Upsells modult, amellyel könnyedén integrálhatja a testreszabást az áruházba.

Kérjük, keresse meg a termék Upsells modult az Elementor készítőben, és helyezze be egy új sorba a Termékadatok fülek mögé.

Amint láthatja, ehhez egy kis kiigazításra van szükség a stílusunk többi részének kiegészítésére. Kezdje el módosítani a modult, é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 Fejléc színét - # cc3366 értékre
• Állítsa az Ár színét - # 54595f
• Állítsa a gomb háttérszínét - # cc3366 értékre
• Állítsa a Gomb színét - #fff értékre
• Állítsa be a gomb határának sugárát t0 - 0

A késztermék a fentieknek fog kinézni. A színes hex kódot tetszés szerint módosíthatja, ha ezt az útmutatót a sablon kiindulópontjaként használja.

Miután végzett, közzéteszi a sablonját. A következő ablakban megjelenik a „Hol szeretné megjeleníteni a sablonját?” Kérdést. Kattintson a „Feltétel hozzáadása” elemre annak meghatározásához, hogy ezt a sablont mikor kell használni. A sablon használatához az összes termékoldalon kiválaszthatja az „Összes termék” lehetőséget. Azt is megadhatja, 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ók számára nehézségekbe ütközhet 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 áruház 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 widgetjeivel a teljesen testreszabott megjelenés érdekében. Használjon egy üres oldalt, zárja be a sablonkönyvtár felugró ablakát, amikor megjelenik, és kezdje el építkezni az újonnan létrehozott oldalon. Az egyedi „Kosárba” gomb, „Termék ára”, „Termék kép” és „Termék címe és leírás” csak néhány a WooCommerce widgetek közül, amelyekkel testre szabhatja termékoldalát. Ezen az oldalon megtekintheti a jelenleg elérhető összes kütyüt. Ha szeretné, az oldal elrendezésénél bárhol elrendezheti a kütyüket, és testre szabhatja azok stílusát a kívánt megjelenésnek megfelelően.

Módosítania kell a termékoldalát, hogy megkülönböztesse e-kereskedelmi áruházát a versenytől, és egyedi élményt nyújtson ügyfeleinek. Ezenkívül a termékoldal esztétikus testreszabásának lehetősége kritikus fontosságú az online webáruházban az egységes látványterv fenntartása érdekében. Az Elementor egy fantasztikus eszköz a WooCommerce áruház oldalainak testreszabásához, és nagyon ajánlott. Az egyszerű használat mellett az oldalkészítő tartalmazza az összes szükséges modult és stíluslehetőséget, amelyek segítenek az egyedi termékoldalak létrehozásában. Reméljük, hogy informatívnak találta ezt az oktatóanyagot, és megadta a szükséges információkat a WooCommerce termék és termékarchívum oldalainak az Elementor használatával történő testreszabásához. Korábban az Elementort használta WooCommerce oldalak létrehozásához? Szívesen megosztja gondolatait a megjegyzések részben. Örömmel vessünk egy pillantást.