{"id":6564,"date":"2022-01-04T10:39:00","date_gmt":"2022-01-04T10:39:00","guid":{"rendered":"https:\/\/musilda.cz\/?p=6564"},"modified":"2022-01-04T10:39:00","modified_gmt":"2022-01-04T10:39:00","slug":"jak-upravit-vzhled-woocommerce-e-mailu-pomoci-css","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/jak-upravit-vzhled-woocommerce-e-mailu-pomoci-css\/","title":{"rendered":"Jak upravit vzhled WooCommerce e-mail\u016f pomoc\u00ed css"},"content":{"rendered":"\n

Vzhled e-mail\u016f ve WooCommerce je definov\u00e1n pomoc\u00ed inline styl\u016f. V p\u0159\u00edpad\u011b, \u017ee do e-mail\u016f p\u0159id\u00e1v\u00e1te vlastn\u00ed html k\u00f3d, \u010dasto je t\u0159eba jej nastylovat. Uk\u00e1\u017eeme si jak.<\/p>\n\n\n\n

V podstat\u011b m\u00e1te t\u0159i mo\u017enosti, jak upravovat vzhled html v e-mailu.<\/p>\n\n\n\n

P\u0159id\u00e1n\u00ed inline styl\u016f do vlastn\u00edho html k\u00f3du<\/h2>\n\n\n\n

V jednom z p\u0159edchoz\u00edch \u010dl\u00e1nk\u016f jsme do e-mailu vlo\u017eili k\u00f3d s informac\u00ed o slevov\u00e9m kup\u00f3nu. Kdy\u017e do html k\u00f3du p\u0159id\u00e1te inline styly, v e-mailu se to projev\u00ed.<\/p>\n\n\n\n

echo '<h2>Sleva na p\u0159\u00ed\u0161t\u00ed n\u00e1kup!<\/h2>';\necho '<p style=\"font-style:italic;\">D\u011bkujeme za v\u00e1\u0161 n\u00e1kup a jako pod\u011bkov\u00e1n\u00ed jsme pro v\u00e1s p\u0159ipravili slevu na dal\u0161\u00ed n\u00e1kup ve v\u00fd\u0161i 10%. P\u0159i dal\u0161\u00edm n\u00e1kupu pou\u017eijte v pokladn\u011b k\u00f3d <strong>SLEVANAKUP<\/strong><\/p>';<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u00daprava souboru email-styles.php<\/h2>\n\n\n\n
WooCommerce generov\u00e1n\u00ed css, kter\u00e9 se pou\u017e\u00edv\u00e1 v e-mailech, pou\u017e\u00edv\u00e1 soubor email-styles.php. Ten stejn\u011b, jako ostatn\u00ed soubory \u0161ablon m\u016f\u017eete vz\u00edt a zkop\u00edrovat do slo\u017eky va\u0161\u00ed aktivn\u00ed \u0161ablony. Pak ji\u017e sta\u010d\u00ed jen p\u0159idat odpov\u00eddaj\u00edc\u00ed css t\u0159\u00eddu a upravit soubor.<\/p>\n\n\n\n
echo '<h2>Sleva na p\u0159\u00ed\u0161t\u00ed n\u00e1kup!<\/h2>';\necho '<p class=\"order-coupon\" style=\"font-style:italic;\">D\u011bkujeme za v\u00e1\u0161 n\u00e1kup a jako pod\u011bkov\u00e1n\u00ed jsme pro v\u00e1s p\u0159ipravili slevu na dal\u0161\u00ed n\u00e1kup ve v\u00fd\u0161i 10%. P\u0159i dal\u0161\u00edm n\u00e1kupu pou\u017eijte v pokladn\u011b k\u00f3d <strong>SLEVANAKUP<\/strong><\/p>';<\/code><\/pre>\n\n\n\n
V souboru email-styles.php p\u0159id\u00e1te na konec souboru:<\/p>\n\n\n\n
.order-coupon{\n    color:red;\n}<\/code><\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
P\u0159id\u00e1n\u00ed stylu pomoc\u00ed filtru<\/h2>\n\n\n\n
Jako t\u0159et\u00ed mo\u017enost, v p\u0159\u00edpad\u011b, \u017ee m\u00e1te k\u00f3d v pluginu a pot\u0159ebujete, aby byl nez\u00e1visl\u00fd na \u0161ablon\u011b, m\u016f\u017eete pou\u017e\u00edt filtr woocommerce_email_styles. Ten p\u0159ij\u00edm\u00e1 vygenerovan\u00e9 css a jako druh\u00fd argument objekt konkr\u00e9tn\u00edho e-mailu. Jste tak schopni p\u0159id\u00e1vat css jen pro sv\u00e9 custom e-maily, pokud je to t\u0159eba. <\/p>\n\n\n\n
Uprav\u00edme html:<\/p>\n\n\n\n
echo '<div class=\"next-order-coupon\">';\n\techo '<h2>Sleva na p\u0159\u00ed\u0161t\u00ed n\u00e1kup!<\/h2>';\n\techo '<p class=\"order-coupon\" style=\"font-style:italic;\">D\u011bkujeme za v\u00e1\u0161 n\u00e1kup a jako pod\u011bkov\u00e1n\u00ed jsme pro v\u00e1s p\u0159ipravili slevu na dal\u0161\u00ed n\u00e1kup ve v\u00fd\u0161i 10%. P\u0159i dal\u0161\u00edm n\u00e1kupu pou\u017eijte v pokladn\u011b k\u00f3d <strong>SLEVANAKUP<\/strong><\/p>';\necho '<\/div>';<\/code><\/pre>\n\n\n\n
Pomoc\u00ed filtru p\u0159id\u00e1me vlastn\u00ed css:<\/p>\n\n\n\n
add_filter( 'woocommerce_email_styles', 'musilda_email_custom_styles', 10, 2 );\nfunction musilda_email_custom_styles( $css, $email ) {\n\n\t$css .= '.next-order-coupon{padding:10px;border:solid 2px red;}';\n\n\treturn $css;\n\n}<\/code><\/pre>\n\n\n\n
V\u00fdsledek:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Vzhled e-mail\u016f ve WooCommerce je definov\u00e1n pomoc\u00ed inline styl\u016f. V p\u0159\u00edpad\u011b, \u017ee do e-mail\u016f p\u0159id\u00e1v\u00e1te vlastn\u00ed html k\u00f3d, \u010dasto je t\u0159eba jej nastylovat. Uk\u00e1\u017eeme si jak. V podstat\u011b m\u00e1te t\u0159i mo\u017enosti, jak upravovat vzhled html v e-mailu. P\u0159id\u00e1n\u00ed inline styl\u016f do vlastn\u00edho html k\u00f3du V jednom z p\u0159edchoz\u00edch \u010dl\u00e1nk\u016f jsme do e-mailu vlo\u017eili k\u00f3d s<\/p>\n","protected":false},"author":1,"featured_media":5600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-6564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce-snippety"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/6564"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=6564"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/6564\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/5600"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=6564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=6564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=6564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}