Testreszabás CSS-sel

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.

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:

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

Termékváltozatok és attribútumok:

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

Ár oszlop:

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

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

.yaymail_element_foot_order_item {
  display: none !important;
}

Részösszeg sor:

.yaymail_item_subtoltal_title_row {
  display: none !important;
}

Szállítás sor:

.yaymail_item_shipping_title_row {
  display: none !important;
}

Adó sor:

.yaymail_item_tax_row {
  display: none !important;
}

Fizetési mód sor:

.yaymail_item_payment_method_title_row {
  display: none !important;
}

Végösszeg sor:

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

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.