WooCommerce-popupok: gyorsnézet és vásárlási értesítés

A popupot WooCommerce-es elemekhez is kötheted. Két gyakori példa: a termék gyorsnézete és a kosárba tétel utáni értesítés. Mindkettőhöz kell a WooCommerce, az Elementor, a JetPopup és a JetWooBuilder bővítmény.

Termék gyorsnézet popup

A vásárló a termék adatait egy felugró ablakban látja, nem kell külön oldalra mennie. A megoldás három részből áll: egy üres popupból, egy egyedi termék sablonból (ez adja a popup tartalmát) és egy gombból, amely megnyitja.

1. Üres popup létrehozása

1. Menj a JetPopup → Új popup hozzáadása menüpontra.
2. Adj nevet a popupnak, majd hozd létre, és nyisd meg az Elementor szerkesztőjében.
3. A popupba ne tegyél semmit.
4. A bal alsó sarokban a fogaskerék ikonnal nyisd meg a JetPopup Beállítások panelt, és kapcsold be a Loading content with Ajax és a Force Loading kapcsolót.
5. Kattints a Frissítés gombra.

2. Egyedi termék sablon

1. Menj a JetPlugins → Jet Woo Template oldalra, és kattints az Új sablon hozzáadása gombra.
2. A sablon típusának válaszd az Egyedi (single) értéket, add meg a nevét, és hozd létre.
3. Építsd fel a gyorsnézet kinézetét: például Single Image widget a termékképhez, Single Title a névhez, a termék adatai (cikkszám, kategóriák), az ár, a leírás és a kosárba gomb.
4. Kattints a Közzététel gombra.

3. Archív sablon és a gomb

1. A JetPlugins → Jet Woo Template oldalon hozz létre egy Archív típusú sablont, és válassz hozzá kész elrendezést.
2. Húzz a munkaterületre egy Gomb widgetet.
3. Nyisd meg a Haladó fület, a JetPopup szekciót, és kapcsold be a Jet Woo Builder Quick View kapcsolót.
4. A Csatolt felugró ablak listában válaszd ki a korábban létrehozott üres popupot.
5. Az Indítási típus legyen Kattintás widgetre.
6. A Template listában válaszd ki a 2. lépésben készített egyedi termék sablont.
7. Kattints a Közzététel gombra.

4. Az archív sablon bekötése a boltba

1. Készíts egy bolt (shop) oldal sablont, amelyben szerepel a Products Loop widget. Ha még nincs ilyen, add hozzá.
2. A WooCommerce → Beállítások oldalon rendeld a sablont a bolt oldalához.
3. Ugyanott, a Termékarchívum résznél kapcsold be az Egyéni termékarchívum lehetőséget, és a Termékarchívum sablon listában válaszd ki az archív sablont.
4. Az Általános résznél válaszd az Elementor alapértelmezett sablonját.
5. Mentsd a beállításokat.

Nyisd meg a bolt oldalát: a gombra kattintva megnyílik a popup a termék adataival.

Gyorsnézet a Products Grid widgetben

A gyorsnézet a Products Grid widgetben is használható:

1. Add a Products Grid widgetet a bolt oldalhoz, és az Általános beállításoknál kapcsold be a Show Quick View lehetőséget.
2. A Haladó → JetPopup szekcióban válaszd ki az üres popupot.
3. Az Indítási típus legyen Kattintás egyéni szelektorra, a szelektor mezőbe pedig írd be: .jet-quickview-button
4. Kapcsold be a JetWooBuilder Quick View lehetőséget, és válaszd ki a kívánt sablont.

Vásárlási értesítés popup

Ez a popup a termék kosárba tétele után jelenik meg, például a „A termék bekerült a kosárba” vagy a „Köszönjük a vásárlást” üzenettel. A Products Grid, a Products List és az Archive Add to Cart widgethez csatolható.

1. A popup elkészítése

1. Menj a JetPopup → Új popup létrehozása menüpontra.
2. Válaszd ki a tartalom típusát (például Elementor), írj nevet (nem kötelező), és szükség esetén válassz előbeállítást.
3. Kattints a Létrehozás gombra.
4. A szerkesztőben tedd a popupba a kívánt tartalmat, például egy Címsor widgetet az üzenettel. A kinézetét a Beállítások → Stílus → Popup konténer résznél alakíthatod (például a háttérszín).
5. A Beállítások szekcióban kapcsold be a Loading content with Ajax és a Force Loading kapcsolót.
6. Kattints a Frissítés gombra.

2. Megjelenési feltétel

1. A Display Conditions mező mellett kattints az Edit gombra.
2. A megnyíló ablakban kattints a + Add condition gombra.
3. Állítsd be: Include, Entire, Entire Site, majd mentsd a feltételt.

A feltételekről bővebben a Megjelenési feltételek fejezetben olvashatsz.

3. A popup csatolása a widgethez

1. Nyisd meg az Elementorban azt az oldalt vagy sablont, ahol a termékek megjelennek, és húzd be a Products Grid, a Products List vagy az Archive Add to Cart widgetet.
2. A Haladó fülön nyisd ki a JetPopup szekciót, és kapcsold be a JetWooBuilder Purchase Popup kapcsolót.
3. A Purchase Popup listában válaszd ki az elkészített popupot.
4. Kattints a Frissítés gombra.

Próbáld ki a weboldalon: tegyél egy terméket a kosárba, és megjelenik a vásárlási popup.