Tag Archives: Woocommerce email

Woocommerce email customize – Lưu ý

Customizing Your Email Templates

Woocommerce Email templates được tạo từ PHP, HTML, CSS. Cần chú ý một số điều khi tùy biến Woocommerce email template:

No Javascript

Emails are not dynamic. Everything that is output needs to be static. That means that jQuery and Javascript will have no effect on these.

WooCommerce Globals and Hooks

Phần lớn content được sử dụng trong email được lấy từ dữ liệu lưu trữ trong woocommerce. Dưới đây là 1 số class & action mà Woocommerce sử dụng để lấy dữ liệu điền vào email:

    • `WC_Emails` (Documentation) This class contains pretty much all of the actions that you’ll need to deal with adjusting the email layouts or moving content to other places. For example, the `email_header` and `email_footer` and the `customer_invoice->order` are all in there and available to be extended. If you are going to be making serious layout changes you’ll want to know how to output these into your new layout
    • `wc_get_template` (Documentation) This is how the general framework of each template is structured. The `email-header.php` and `email-footer.php` are called with this.
    • `do_action` (Codex Documentation) This is your friend, but it’s a WordPress Core function. You’ll use this to call up any of the WooCommerce available actions.

CSS

WooCommerce uses `emails\email-styles.php` to output the color styles from the WooCommerce Email Settings tab directly into the template as inline styles. Inline styles are best for email. WooCommerce takes the header styles and dynamically inserts them into the template as inline styles. It’s pretty impressive how they do that. This also applies to any custom styles you add, even to new class or id names.

One quirk I found though is make sure you don’t add any inline comments in your styles. For some reason that breaks this feature and your styles won’t get applied. The bottomline is that you can add all the styles you want into the email-header.php file, and WooCommerce will take care of adding them into your template as inline styles. Pretty awesome work.

Source: https://impress.org/customize-and-preview-woocommerce-emails/