„Kosárba” dinamikus link a termék listázási elemében

A Dynamic Link widget Add to Cart forrásával a termékek listájában (és az egyszerű termékek oldalán) „Kosárba” gombot jeleníthetsz meg. Előfeltétel: ingyenes Elementor vagy blokkszerkesztő, aktív WooCommerce és JetEngine, valamint egy bolt-oldalsablon (például JetWooBuilder Shop Page Template; helyette JetThemeCore-ral a termékek archívumsablonja is jó, amelybe a Listing Grid kerül).

1. A lekérdezés

1. A JetEngine → Lekérdezéskészítő oldalon add hozzá az új lekérdezést.
2. Add meg a nevet, a lekérdezés típusa WC Product Query.
3. Állítsd be a kívánt szűrőket, és kattints az Add/Update Query gombra.

2. A listázási elem

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra.
2. A Setup Listing Item ablakban a forrás legyen Query Builder, a lekérdezés az előbb létrehozott, add meg a nevet, a nézet pedig Elementor vagy Blocks (Gutenberg). Kattints a Create Listing Item gombra.
3. Töltsd fel a tételt widgetekkel (például Archive Thumbnail, Archive Categories, Archive Title, Archive Price).
4. Húzz bele egy Dynamic Link widgetet, a Source legyen Add to Cart.
5. A Label mezőnél a dinamikus címkék gombbal válaszd a WooCommerce Product Field opciót, a beállításoknál pedig az Add to Cart Text mezőt.
6. A widget Advanced fülén a CSS Classes mezőbe írd: woocommerce. Így érvényesülnek a WooCommerce „Kosárba” gombjának stílusai.
7. Kattints az Update gombra.

3. A lista az oldalon

1. Nyisd meg Elementorral a bolt-oldalsablont (vagy az archívumsablont), ahol a listát meg akarod jeleníteni.
2. Tedd az oldalra a Listing Grid widgetet, és a General fülön válaszd ki a most létrehozott listázási elemet.
3. Kattints az Update gombra.

A frontenden minden terméknél megjelenik a WooCommerce-stílusú „Kosárba” gomb.