# Testreszabás CSS-sel

> Egyéni CSS használata, a rendelési táblázat elemeinek elrejtése és a termékár megjelenítése adóval.

A beépített beállítások mellett saját CSS-sel is finomhangolhatod az e-mailek megjelenését: például eltávolíthatod a hivatkozások aláhúzását, módosíthatod a betűméretet vagy a térközöket, vagy márkaszíneket adhatsz meg. A változtatásokat az előnézetben azonnal láthatod.

## Egyéni CSS bekapcsolása

Az egyéni CSS mező alapból ki van kapcsolva.

1. Nyisd meg egy sablon szerkesztőjét (**YayCommerce → YayMail → Email Templates**, majd egy sablon).
2. Kattints a fogaskerék ikonra, és nyisd meg a **Global** csoportot.
3. Kapcsold be a **Use custom CSS** kapcsolót. Megjelenik egy CSS mező.
4. Illeszd be a CSS-kódot a mezőbe.
5. Kattints a panel alján a **Save global settings** gombra. A sablonok frissülnek, az eredményt az előnézetben azonnal látod.

![A Global csoport bekapcsolt egyéni CSS mezővel](./kepek/szerkeszto-beallitasok-egyeni-css.webp)

*A Global csoport bekapcsolt egyéni CSS mezővel* (https://minta-bolt.hu/wp-admin/admin.php?page=yaymail-settings)

A képen a **Use custom CSS** kapcsoló be van kapcsolva, alatta a CSS-kódmező és a **Save global settings** gomb látszik.

A használható osztálynevek az előnézetben (**Preview Email**) ellenőrizhetők.

## A rendelési táblázat elemeinek elrejtése

A rendelés részleteit tartalmazó táblázat oszlopait, sorait és szakaszait CSS-sel rejtheted el. A megfelelő kódot illeszd be az egyéni CSS mezőbe.

Mennyiség oszlop:

```css
.yaymail_item_quantity_title,
.yaymail_item_quantity_content {
  display: none !important;
}
```

Termékváltozatok és attribútumok:

```css
.wc-item-meta {
  display: none !important;
}
```

Ár oszlop:

```css
.yaymail_item_price_title,
.yaymail_item_price_content {
  display: none !important;
}
```

A táblázat lábléc része:

```css
.yaymail_element_foot_order_item {
  display: none !important;
}
```

Részösszeg sor:

```css
.yaymail_item_subtoltal_title_row {
  display: none !important;
}
```

Szállítás sor:

```css
.yaymail_item_shipping_title_row {
  display: none !important;
}
```

Adó sor:

```css
.yaymail_item_tax_row {
  display: none !important;
}
```

Fizetési mód sor:

```css
.yaymail_item_payment_method_title_row {
  display: none !important;
}
```

Végösszeg sor:

```css
.yaymail_item_total_title_row {
  display: none !important;
}
```

Hasznos például egyedi termékeknél, digitális termékeknél vagy szolgáltatásoknál, ahol a mennyiség oszlop felesleges, vagy ha a számlát külön küldöd, és az árakat nem akarod az e-mailben mutatni.

## Egyéb gyakori módosítások

- **Hivatkozások színe a számlázási és szállítási címnél:** az e-mail-cím és a telefonszám alapból a böngésző szerinti hivatkozásszínnel jelenik meg. Egyéni CSS-sel a márkádhoz igazíthatod.
- **A rendelési táblázat keretének elrejtése vagy átalakítása:** a táblázat alapból szegéllyel jelenik meg, ezt a CSS-sel eltüntetheted vagy átalakíthatod.
- **A megjegyzés sor elrejtése:** a rendelés részleteinek aljáról a vásárlói megjegyzés sor elrejthető, ha nem használod.
- **Betűméret:** a rendelési táblázat betűmérete egyéni CSS-sel állítható.
- **Oszlop hozzáadása a termék táblázathoz** (például cikkszám, bélyegkép vagy egyéni metaadat): ehhez a téma `functions.php` fájljában egy szűrővel bővíteni kell a WooCommerce e-mail rendelési táblázatát.

## Termékegységár adóval együtt

Ha a termék egységárát adóval együtt szeretnéd mutatni a rendelés részleteiben, add hozzá a következő kódot a Code Snippets bővítményhez, vagy a sablon/gyermeksablon `functions.php` fájljához:

```php
add_filter(
    'woocommerce_order_amount_item_subtotal',
    function( $subtotal, $order, $item, $inc_tax, $round ) {
        if ( ! empty( $item ) ) {
            $subtotal = ( (float) $item->get_subtotal() + (float) $item->get_subtotal_tax() ) / $item->get_quantity();
            $subtotal = $round ? \Automattic\WooCommerce\Utilities\NumberUtil::round( $subtotal, wc_get_price_decimals() ) : $subtotal;
            return $subtotal;
        }
        return $subtotal;
    },
    10,
    5
);
```

A megjelenítéshez kapcsold be a **Show product item cost** beállítást is a **Global** csoportban.