Woo Notice Modul hozzáadása Divi termékoldalsablonjához

A megerősítés és a visszajelzés minden e-kereskedelmi oldal fontos eleme. A felhasználó tudni akarja, mi történt azután, hogy a termék megvásárlásához egy gombra kattintott. Arra is vágynak, hogy könnyen megtekinthessék, mi van a kosarukban. A Divi Woo Notice modul pontosan ezeket a funkciókat biztosítja a WooCommerce termékoldalain. Ebben a cikkben megtudjuk, hogyan készíthet stílust, és hogyan adhat hozzá Woo Notice modult Divi termékoldalához. Azt is megbeszéljük, hogy miért van szüksége egy és a legjobb helyre a hozzáadáshoz.

Lássunk neki.

Előnézet

Először is nézzük meg, mit fogunk építeni.

Woo értesítési modul az asztalon

Woo Notice Module mobilon

Töltse le WooCommerce termékoldalsablonját

Először is szerezzünk be egy WooCommerce termékoldalsablont a Divi Theme Builder számára. Készíthet egyet a semmiből, vagy letölthet egyet az Elegant Themes blogról. Keressen rá a blogra a „termékoldalsablonra”, és töltse le a tömörített fájlt. Az INGYENES termékoldal-sablont használom a Divi ruhaüzlet-elrendezési csomagjához .

Ezután csomagolja ki a fájlt. A Divi Theme Builderbe való importálásához lépjen a Divi > Theme Builder elemre a WordPress irányítópulton, válassza a Hordozhatóság lehetőséget , kattintson az Importálás fülre, navigáljon a JSON-fájlhoz , és válassza ki azt, majd kattintson a Divi Theme Builder sablonok importálása elemre . Mentse el a beállításokat. A fájl automatikusan hozzá van rendelve az összes termékoldalhoz.

Divi
Témaépítő
Hordozhatóság
Importálás
Válassza ki a fájlt
Divi témakészítő sablonok importálása
Megment

Mit csinál a Woo Notice Modul

A Woo Notice modul két fontos dolgot végez:

1 – visszajelzést ad a felhasználónak arról, hogy sikeresen elhelyezte a terméket a kosarába.

2 – linket ad a kosárhoz, ahol megtekinthetik a kosárban lévő tételeket.

A Woo Notice modul opciókat tartalmaz a Woo Termék oldalakhoz, a Kosár oldalhoz és a Pénztár oldalhoz. A második lehetőség a kosár állapotát és a kuponinformációkat mutatja. A harmadik egy bejelentkezési mezőt és egy kuponmezőt mutat. Az első lehetőséget használjuk – a termékoldalt .

Megjelenítheti az aktuális termékhez, a legújabb termékhez vagy bármely, a listából kiválasztott termékhez.

Más Woo modulokkal ellentétben a Woo Notice modul csak bizonyos feltételek mellett jelenik meg az oldalon. Csak akkor látható, ha a felhasználó a terméket a kosarába helyezi. Ez a példa a termékoldalt mutatja be, amikor a termék nincs a kosárban.

Miután a terméket a kosárba helyezték, megjelenik a modul.

Adja hozzá a Woo értesítési modult

A Divi Builder összes Woo moduljához hasonlóan a Woo Notice Module is csak akkor választható, ha telepítve van a WooCommerce. A modul hozzáadásához kattintson a szürke plusz ikonra , keresse meg a Woo Notice kifejezést , és válassza ki a modult. A Divi Product oldalsablonok többsége tartalmazza a Woo Notice modult.

Hol helyezze el a Woo értesítési modult

A Woo Notice modul legjobb helye az oldal tetején, a kenyérmorzsa alatt található. Ez kitűnik a felhasználó számára, és ez az a hely, ahol az ilyen típusú információkat láthatják.

Ebben a drótváz nézetben láthatjuk, hogy a modul a termék információi felett van elhelyezve.

A Woo értesítési modul stílusának kialakítása

Az általam használt sablon már rendelkezik a modul stílusával. Megvizsgáljuk ezt a stílust arra az esetre, ha hozzá szeretné adni a sajátját, majd más módon alakítjuk ki az elrendezési csomagból származó tervezési várólisták, valamint a Ruhabolt-elrendezési csomag fejléc- és lábléc-sablonjai segítségével. Tartalmaz egy gombot, amely megváltoztatja a színét a lebegtetéskor.

Először fehérítse a hátteret.

Háttér: #ffffff

Tervezés lap

Válassza a Tervezés lapot, és válassza a Didact Gothic lehetőséget a Cím betűtípusához. Tegye feketére a betűtípust, és állítsa a Vonalmagasságot 2em-re.

Cím betűtípusa: Didact Gothic
Fekete szín
Vonal magasság: 2em

Gombstílusok

Görgessen le a gombra, és engedélyezze az Egyéni stílusokat . Állítsa a szöveg méretét 12 képpontra. Az asztali beállításoknál állítsa a szöveg színét fehérre és a hátteret feketére.

Gomb használata: Igen
Szöveg mérete: 12 képpont
Szöveg színe: #ffffff
Háttérszín: #000000

Válassza a Lebegtetési beállításokat , és állítsa a szöveg színét feketére, a háttérszínt pedig #f8ded5-re.

Lebegő szöveg színe: #000000
Lebegő háttérszín: #f8ded5

Állítsa a szegély szélességét és sugarát 0 képpontra , a betűközt 3 képpontra, a font súlyát félkövérre, a betűstílust pedig TT értékre.

Szegély szélessége: 0 képpont
Szegély sugara: 0 képpont
Betűtávolság: 3 képpont
Betűsúly: félkövér
Betűstílus: TT

Jelölje be a Gomb ikon megjelenítéséhez , válasszon egy jobbra mutató nyilat, és válassza ki, hogy a nyíl csak lebegve jelenjen meg.

Gomb ikon megjelenítése: Igen
Ikon: Kis jobbra nyíl
Csak az ikon megjelenítése az egérmutatón a gombhoz: Igen

Ezután egy kis gombtömítést kell hozzáadnunk , hogy helyet adjunk a szöveg körül. Adjon hozzá 15 képpontot felül és alul, és 30 képpontot a bal és a jobb oldalhoz. Megjegyzés: ez nem a modul kitöltése. Egy perc múlva hozzátesszük.

Gombtömítés: 15 képpont (fent, lent), 30 képpont (bal, jobb)

Görgessen le a Térköz ponthoz . Adjon hozzá 0em margót minden oldalra és 15 képpont kitöltést minden oldalra. Ezek az alapértelmezett beállítások. Zárja be a beállításokat.

Margó: 0em (minden oldalon)
Bélés: 15 képpont (minden oldalon)

Sorbeállítások

Ezután néhány módosítást kell végrehajtanunk a sor beállításain . Nyissa meg a beállításokat, és válassza a Tervezés lapot. Válassza az Egyedi ereszcsatorna-szélesség használatát . Állítsa az ereszcsatorna szélességét 1-re, a szélességet pedig 94%-ra.

Egyedi ereszcsatorna-szélesség használata: Igen
Ereszcsatorna szélessége: 1
Szélesség: 94%

Végül görgessen le a Szóköz részhez, és adjon hozzá 20 képpontos kitöltést a tetejéhez és 10 képpontos kitöltést az aljához. Zárja be a beállításokat, és mentse el munkáját.

Kitöltés: 20 képpont felül, 10 képpont alul

Egy másik egyedi stílus a Woo értesítési modulhoz

Ezután adjunk hozzá és alakítsunk ki egy Woo Notice modult a semmiből. Ehhez töröljük az eredetit, és hozzáadjuk a sajátunkat. Kattintson a szürke plusz ikonra , keresse meg a Woo Notice kifejezést , és adja hozzá a Woo Breadcrumbs modul legfelső sorához. Ennek megtervezéséhez az elrendezésből származó ötleteket használjuk fel. Ugyanazt a sort fogjuk használni, mint az eredeti, így a beállításai megegyeznek az előző példával.

A Woo Notice beállításainál görgessen le a Háttérbeállításokhoz , és válassza a Gradient lehetőséget . Állítsa az első színt fehérre, a második színt pedig #f8ded5-re. A gradiens irányát 90 fokra kell állítani, a kezdő és végpozíciót pedig 50%-ra. Ez olyan színt ad, amely a Termék szakasz tükre.

Első gradiens: #ffffff
Második gradiens: #f8ded5
Lejtési irány: 90 fok
Kezdő pozíció: 50%
Végpozíció: 50%

Tervezés lap

Ezután válassza a Tervezés lapot, és válassza a Didact Gothic lehetőséget a Cím betűtípusához. Állítsa be a betűtípust feketére, az asztal méretét 20 képpontra, a telefon méretét 15 képpontra, a vonal magasságát pedig 2 em.

Cím betűtípusa: Didact Gothic
Szín: #000000
Szöveg mérete: 20 képpont (15 képpont telefonnál)
Vonal magasság: 2em

Gombstílusok

Görgessen le a gombra, és válassza az Egyéni stílusok használata lehetőséget . Állítsa a Szöveg méretét 12 képpontra asztali számítógépen, a telefon szövegméretét pedig 10 képpontra. Az asztali beállításoknál állítsa a szöveg színét feketére, a hátteret pedig #f7eee8-ra.

Egyéni stílusok használata a gombhoz: Igen
Szöveg mérete: 12 képpont (10 képpont telefon esetén)
Szöveg színe: #000000
Háttérszín: #f7eee8

Válassza a Lebegtetés opciót a háttérszínhez , és állítsa be #d8dad5 értékre.

Lebegő háttérszín: #d8dad5

Határ

Állítsa a szegély szélességét 1 képpontra, a sugarat 30 képpontra, a betűközt 3 képpontra, a font súlyát félkövérre , a betűstílust pedig TT értékre. Hagyja a Gomb Ikon beállításait alapértelmezetten. Ekkor megjelenik az ikon lebegve, és tartalmazza az alapértelmezett jobbra nyilat.

Szegély szélessége: 1 képpont
Szegély sugara: 30 képpont
Betűtávolság: 3 képpont
Betűsúly: félkövér
Betűstílus: TT
Gomb ikon megjelenítése: Igen
Ikon: Kis jobbra nyíl
Csak az ikon megjelenítése az egérmutatón a gombhoz: Igen

Ezután fel kell adnunk néhány gombtömítést , hogy növeljük a gomb méretét a gomb szövege körül. Adjon hozzá 15 képpontot felül és alul, és 30 képpontot a bal és a jobb oldalhoz.

Gombtömítés: 15 képpont (fent, lent), 30 képpont (bal, jobb)

Végül görgessen le a Határ elemhez . Adjon hozzá 40 képpontot minden oldalhoz. Így egy lekerekített modult kapunk, amely illeszkedik az elrendezés kialakításához. Zárja be a beállításokat, és mentse el munkáját.

Lekerekített sarok: 40 képpont (minden oldalon)