A WooCommerce megközelítése az e-kereskedelmi webhelyekhez

Először beszéljük meg a WooCommerce e-kereskedelmi webhelyekkel kapcsolatos megközelítését. A WooCommerce egyéni bejegyzéstípust hoz létre, amely többféle információt tartalmaz a termékekről. Ide tartoznak a termékek képei, leírásai, árak, értékesítési információk, kosárba tétel gombok és még sok más. Minden termékbejegyzés egy egyszerű szerkesztővel készül.

Ezek a WooCommerce termékbejegyzés típusának egyedi elemei. A dinamikus elemek, például a cím, a képek, a leírás és az ár a termékszerkesztőben a mezőibe kerülnek. A WooCommerce bejegyzéstípus a kezelőfelületen jeleníti meg őket. Az építők, például a Divi, egyedileg használhatják ezeket az elemeket érdekes elrendezések létrehozásához.

WooCommerce a Divi-vel

Ha aktiválva van a WooCommerce, akkor 25 WooCommerce modult fog látni a Divi Builderben. Ezek a modulok lehetővé teszik a WooCommerce elemek bemutatását bárhol a Divi elrendezéseken belül. Automatikusan dinamikusak, így az adott termékre vonatkozó információkat jelenítik meg.

Ezeket a szokásos Divi modulokkal használhatjuk csodálatos termékoldalak létrehozásához. Ezen modulok egy része szükséges a termékoldal működéséhez, míg mások extra funkciókat biztosítanak.

Annak ellenére, hogy 25 különböző WooCommerce modulhoz férünk hozzá a Divi Builderben, meg kell értenünk, hogy ezen elemek közül melyekre van szükség a termékoldal működéséhez, és melyek azok, amelyek támogató funkciókat hoznak létre.

Ennek megértése érdekében megnézünk egy Divi termékoldalsablont, és megnézzük, hogyan használja a modulokat. A példákhoz a Divi ruhaüzlet-elrendezési csomagjának ingyenes termékoldalsablonját használom .

WooCommerce modulhierarchia és termékoldal-tervezés

Egy jól megtervezett termékoldal egyben tartja a szükséges elemeket, és ezek lesznek az oldal középpontjában. Ez hierarchiát hoz létre az oldalterv számára. Ez a hierarchia biztosítja a felhasználó számára a termékről szükséges információkat, és segít végigvezetni a felhasználót a vásárlási folyamaton. Ennek megtekintéséhez nézzünk meg egy oldalelrendezést.

Íme a teljes termékoldal-kialakítás a példámból. Ez magában foglalja a lényeges és nem alapvető elemeket is. Ez az elrendezés tartalmaz egy felső részt, a fejlécet és a támogató részeket.

Általában az alapvető elemek az oldal tetején találhatók, beleértve a felső részt és a fejlécet. A nem alapvető elemek alul, a lényeges elemek alatt találhatók. Segítenek támogatni a fő elemeket, és elősegítik az upsell-eket vagy más CTA-kat.

A termékoldal alapvető elemei

Most pedig nézzük meg közelebbről a termékoldal lényeges elemeit. Meglátjuk, mik ezek, miért van szükségünk rájuk, és hogyan adhatjuk hozzá őket Divi termékoldalunk elrendezéséhez.

Felső rész

Kezdjük az oldal tetején. A Ruhaüzlet termékoldalának felső része a Woo Breadcrumbs és a Woo Notice modulokat tartalmazza.

Így néznek ki az előlapon. Ebben a példában a képernyő tetején lévő saját részükben helyezkednek el. A termékoldal ezek nélkül is működik. Ez azonban fontos információ, és ez az a hely, ahol a felhasználók látni fogják őket.

Woo Breadcrumbs – megmutatja a látogatónak, hogy hol tartózkodik a navigációs struktúrában. A zsemlemorzsa nagyszerű a navigációhoz. Az oldal enélkül is jól működik, de a kenyérmorzsa kiválóan alkalmas az aktuális kategória azonosítására.

Woo Notice – azt mutatja, hogy egy terméket a kosárba helyeztek. Ez visszajelzést ad a felhasználónak arról, hogy az oldal reagált a kattintására. A kosár linkjét is tartalmazza.

Fejléc szakasz

Következő a fejléc rész a termékoldal elrendezésében. Ez a termékoldal fő része, és minden lényeges elemet tartalmaz az oldal megfelelő és zökkenőmentes működéséhez.

Íme egy pillantás az oldal elülső részének kialakítására. Az általam kiemelt rész a lényeges elemek. Ezek az elemek teszik működőképessé a termékoldalt.

Az elemek a következők:

Woo Product Title – ez a termék címét mutatja.

Woo Product Meta – ez a modul a termék metaadatait jeleníti meg. Kiválaszthatja, hogy mely metaadatelemek jelenjenek meg.

Woo Product Images – ez mutatja a termék összes galériaképét. Akciós jelvényt ad hozzá, ha a termék akciós.

Woo termékleírás – ez a termékleírás. Választhat rövid vagy hosszú leírások között.

Woo Product Price – ez a termék aktuális árát mutatja. Az eredeti árat is mutatja, ha akciós.

Woo termékkészlet – ez a modul a készletben elérhető készletek számát mutatja.

Woo termék Kosárba – ez az a gomb, amellyel a terméket a kosárba helyezi.

termékleírás

A termékleírás kibővíti a termékre vonatkozó információkat. Ez nem szükséges az oldal működéséhez. Ehelyett a termék értékesítését támogatja, és a felhasználók elvárják, hogy látják ezt az információt. Általánosságban elmondható, hogy minél több információt adhat hozzá, annál jobb.

Így néz ki elölről. Kiemeltem a leírási területet.

A következőkkel készült:

Woo Product Title – ez ugyanaz a termékcím, mint a fejléc részben, de stílusa más, hogy illeszkedjen az oldalhierarchiában elfoglalt helyéhez.

Woo termékleírás – válassza a hosszú vagy a rövid leírás megjelenítését. Általában célszerű a rövid leírást a fejlécben, a hosszú leírást pedig a leírás részben kiválasztani. Ez lehetővé teszi az információk bővítését.

Woo termékinformáció – ez további információkat jelenít meg a termékről.

Néhány szövegmodult is tartalmaz a címek létrehozásához.

Választható termékoldalelemek

Ezután megvizsgáljuk az opcionális termékoldal-elemeket. Sok más WooCommerce elemet is hozzáadhat a termékoldalhoz, amelyek javítják az eladásokat. Egyesek WooCommerce modulokkal, mások pedig szabványos Divi modulokkal készülnek. Ezek a részek nem kötelezőek, de érdemes beilleszteni őket. Amint azt a fenti képen kiemeltem, a példaelrendezés legfontosabb elemei alatt látjuk őket.

Tartalmazzák:

Woo Product Rating – ez azt mutatja, hogy a felhasználók milyen csillagos értékelésekkel értékelték a terméket. Néha hozzáadják az alapvető elemekhez vagy az ajánlások mellé.

Woo kapcsolódó termékek – ez a kapcsolódó termékek listáját jeleníti meg. Kiválaszthatja a megjelenő termékek típusát és számát. Válassza ki a kategóriákat, a rendezést, az oszlopok számát és a megjelenített elemeket.

Bolti kategóriák – a különféle boltkategóriákra mutató hivatkozásokat gyakran képekkel és szöveges modulokkal hozzák létre. CTA-ként működnek, amely a felhasználót az üzlet kedvenc területére vezeti.

Woo Product Reviews – ez egy értékelési lehetőséget ad hozzá egy mezővel, ahol a felhasználó véleményt írhat. Megmutatja a többi felhasználó által írt véleményeket is. Csillagos értékelést is megjeleníthet.

Beszámolók – ezek olyan ajánlások, amelyeket a felhasználók e-mailben vagy más módon küldtek el. Gyakran ajánlómodulokkal, csúszkákkal, szöveges modulokkal stb. készülnek.

CTA – cselekvésre ösztönzések CTA-modulokkal, kivonatokkal, képekkel, szöveggel, gombokkal stb. Kiválóan alkalmasak akciók, új termékek, közelgő események stb. bemutatására.

Email Optin – ezek az e-mail optin modulok segítségével készülnek, és ideálisak a hírlevéllista összeállításához.

Közösségi követés – közösségi ikonok adódnak hozzá a közösségi média követési modulhoz. Nagyszerű módja annak, hogy növeld a közösségi követőidet.

Modul példák

Ez a példa a kapcsolódó termékeket és véleményeket tartalmazó szakaszokat mutatja be. WooCommerce modulokkal és néhány támogató modullal készültek, beleértve a képeket és a szöveget.

Ezek a szakaszok ajánlásokat és cselekvésre való felhívást tartalmaznak. Az ajánlások képpel és csúszkával készülnek. A CTA szöveges modulokkal és egy gombbal készült. Ez egy e-mail opciót is tartalmaz.

Woo modulok hozzáadása termékoldalsablonjához

Hozzon létre vagy töltsön fel termékoldalsablont a WordPress irányítópultján a Divi > Theme Builder menüpontban. A feltöltéshez válassza a Hordozhatóság , majd az Importálás lehetőséget , keresse meg a JSON-fájlt, és kattintson a Divi Theme Builder sablonok importálása elemre .

Hozzon létre egy sablont úgy, hogy létrehoz egy törzssablont, és hozzárendeli az Összes termékhez . Válassza az Egyéni törzs létrehozása lehetőséget , és adja hozzá moduljait.

Győződjön meg arról, hogy a WooCommerce aktiválva van, hogy a modulok elérhetőek legyenek. A WooCommerce modulok hozzáadásához kattintson a sötétszürke plusz ikonra, és keresse a „woo” kifejezést a keresőmezőben. Látni fogja az összes elérhető WooCommerce modult.

Hol szerezhet be ingyenes termékoldal-sablonokat

Az Elegant Themes ingyenes termékoldal-sablonokat biztosít az online áruházak Divi elrendezési csomagjaihoz. Ingyenes termékoldalsablonokat találhat az Elegant Themes blogban. Keressen a blogon az „ingyenes terméksablon” vagy hasonló kulcsszavakra. Töltse le és csomagolja ki a sablonfájlokat.

Befejező gondolatok

Ez a mi áttekintésünk a Divi termékoldal sablonjához szükséges elemekről. Könnyen belátható, hogy melyek elengedhetetlenek és melyek nem kötelezőek. Mindig tartsa együtt a lényeges elemeket, és győződjön meg arról, hogy az oldal középpontjában ezek állnak. Ezen irányelvek követése segít nagyszerű termékoldal-sablonok tervezésében a Divi segítségével.

Szeretnénk hallani önről. Készítettél WooCommerce termékoldalakat ezekkel a kötelező elemekkel? Ossza meg velünk tapasztalatait a megjegyzésekben.