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

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:

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:

// 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.