# Mezők helye, gombfelirat és folyamatjelző sáv

> A kiegészítő mezők áthelyezése a Kosárba gomb alá, az archív oldalak gombjának felirata és a kitöltöttséget mutató folyamatjelző sáv.

Ez a fejezet a termékoldal és a bolti lista néhány apró, de gyakran kért módosítását írja le. A kódrészleteket a sablon `functions.php` fájljába vagy egy kódrészlet-bővítménybe tedd.

## A mezők helye a termékoldalon

A kiegészítő mezőknek a WooCommerce kosárba tevő űrlapján belül kell lenniük, mert a bővítmény így kapja meg a vásárló által kitöltött értékeket. Alapból a mezők a **Kosárba teszem** gomb **előtt** jelennek meg.

Ha a gomb **alá** szeretnéd tenni őket, a mezőket kiíró függvényt át kell kötni egy másik horogra:

```php
<?php

add_action( 'init', function () {
	remove_action( 'woocommerce_before_add_to_cart_button', 'pewc_product_extra_fields' );
	add_action( 'woocommerce_after_add_to_cart_button', 'pewc_product_extra_fields' );
} );
```

A mezőket általában nem teheted a termékoldal más részére, mert az űrlapon kívül nem jutnának el a kosárba. Ha mégis ez kell, a megoldás az űrlap más elrendezése vagy a mezők [modális ablakba](https://hub.hellowp.io/hu/plugins/product-extras-for-woocommerce/csoportok-modalis-ablak/) tétele.

## A gomb felirata a bolti listában

Az archív oldalakon (bolt, kategóriák) az ilyen terméknél a **Kosárba teszem** gomb helyett egy **Opciók kiválasztása** gomb áll. A gomb a termékoldalra visz, ugyanúgy, mint a változó termékeknél. Így a vásárló nem teheti kosárba a terméket a kiegészítő mezők kitöltése nélkül.

A feliratot a `pewc_filter_view_product_text` szűrővel cserélheted. A szűrő két paramétert kap: az eredeti szöveget és a termék objektumát. Az alábbi példa minden termékre ugyanazt a szöveget adja:

```php
<?php

add_filter( 'pewc_filter_view_product_text', function ( $szoveg, $termek ) {
	return 'Szabd személyre';
}, 10, 2 );
```

A második paraméterrel terméktől függően más feliratot is adhatsz.

## Folyamatjelző sáv

A folyamatjelző sáv megmutatja a vásárlónak, hogy a testreszabás hány százalékát töltötte már ki.

![A folyamatjelző sáv a termékoldalon: 1 / 3](./kepek/termekoldal-folyamatjelzo.webp)

*A folyamatjelző sáv a termékoldalon: 1 / 3* (https://minta-bolt.hu/product/keramia-bogre/)

A képen a sáv a termékár alatt áll, és a három kitölthető mezőből egyet jelez késznek (**1 / 3**).

1. Nyisd meg a **WooCommerce → Beállítások → Termékkiegészítők → Általános** oldalt.
2. A **Folyamatjelző sáv megjelenítése** listában válaszd ki, mi alapján számoljon a sáv:
   - **Mezők**: a sáv minden kitöltött vagy kiválasztott mezőnél előrébb lép.
   - **Csoportok**: a sáv csak akkor lép előre, ha egy csoport összes mezője kész.
3. Ha csak a kötelező mezők számítsanak, kapcsold be a **Csak a kötelező mezők** beállítást. A választott módnál (**Mezők** vagy **Csoportok**) is működik, a nem kötelező mezők nem mozdítják a sávot.
4. A **Folyamatjelző sáv elrendezése** listában válaszd ki a megjelenést:
   - **Sáv**: hagyományos folyamatjelző sáv.
   - **Lépések**: lépésenként haladó jelzés, amely a szakaszokon vezet végig.
5. Kattints a **Módosítások mentése** gombra.

A szekció a beállítóoldalon a **Folyamatjelző sáv** cím alatt található, a többi beállítással együtt a [Beállítások](https://hub.hellowp.io/hu/plugins/product-extras-for-woocommerce/beallitasok/) fejezet írja le.