# Változatminták a termékrácsban és a terméklistában

> Hogyan jelenítheted meg a Variation Swatches for WooCommerce változatmintáit a JetWooBuilder Termékrács és Terméklista widgetjén gyermeksablonnal.

A JetWooBuilder termékrácsa és terméklistája alapból nem írja ki a változatmintákat (színes, képes vagy gombos változatválasztókat). A Variation Swatches for WooCommerce bővítménnyel pótolhatod, ha a bővítmény két sablonfájlját felülírod a gyermeksablonodban.

## Követelmények

- Az ingyenes Elementor.
- WooCommerce.
- A Variation Swatches for WooCommerce Pro, aktiválva, és legalább egy változatos termék.
- A JetWooBuilder.
- Aktív gyermeksablon.

## 1. A sablonfájlok átmásolása

1. A webhely fájljai között nyisd meg a gyermeksablon mappáját: `wp-content/themes/<a gyermeksablonod mappája>`.
2. Hozz létre benne egy `jet-woo-builder` nevű mappát.
3. Másold át ebbe a bővítmény `wp-content/plugins/jet-woo-builder/templates` mappájából a `widgets` mappát.
4. A másolt `widgets` mappában a **Termékrács** widgethez a `global` mappa kell, a többi mappát töröld. Ha a **Terméklista** widgettel dolgozol, a `products-list` mappát hagyd meg, a többit töröld.
5. A `products-grid` mappában csak az `item-button` és a `loop-item` fájlt tartsd meg.

## 2. CSS-osztály a termékelemhez

1. Nyisd meg a Variation Swatches for WooCommerce beállításait (**GetWooPlugins → Swatches Settings**), az **Archive / Shop** fülön másold ki a **Product wrapper** mező értékét.
2. Nyisd meg a `loop-item` fájlt szerkesztővel.
3. Add hozzá a kimásolt osztályt a `$classes` sorhoz. Az alapértelmezett osztály:

```
wvs-archive-product-wrapper
```

4. Mentsd a fájlt, majd nyisd meg az `item-button` fájlt, és a `$class` blokkba tedd be ezt a sort:

```php
woo_variation_swatches()->show_archive_page_swatches();
```

5. Mentsd a fájlt.

## 3. Kód a functions.php fájlba

A gyermeksablon `functions.php` fájljába először ezt a kompatibilitási részletet írd be. A Variation Swatches for WooCommerce első változatában megvolt a `wvs_pro_get_current_url()` függvény, a 2-es változattól kezdve viszont megváltozott a felépítés, és a függvény már nincs benne, a kód viszont használja:

```php
// Get Current URL
if ( ! function_exists( 'wvs_pro_get_current_url' ) ):
function wvs_pro_get_current_url( $args = array() ) {
global $wp;

return esc_url( trailingslashit( home_url( add_query_arg( $args, $wp->request ) ) ) );
}
endif;
```

A fő kódrészletet ugyanebbe a fájlba kell beilleszteni, de a `<?php` sort ne ismételd meg: az csak egyszer, a fájl legelején állhat, a beillesztett kód az `add_filter…` sorral kezdődik.

Mentsd a fájlt, és nézd meg a **Termékrács** widgetet a weboldalon: a termékkártyákon megjelennek a változatminták.