How to customize WooCommerce order email

WooCommerce order email

Let's say that after several days of hard work, you can successfully install your WooCommerce store without any problems. The product page is now connected to a lossless working database and there is no problem in the checkout process. Each element, including product pages, galleries and feedback, reflects the color and style of your brand.

Then you decide to test the process of ordering your product and suddenly it is known that the order email is too little or too general from the perspective of users. Now you might be thinking what all your efforts to customize your WooCommerce store were.

There are several order statuses in WooCommerce that can not match the flow of your store, but you can still mark orders with custom status such as payment pending, processing, on hold, unsuccessful etc.

Many WooCommerce store owners and administrators have this common question: how can I modify WooCommerce request messages for the look and feel of my brand and how can I help customers create a custom WooCommerce status with their order, I can add additional material for this.

Creating Effective HTML Email In fact, there is an achievement in itself, WooCommerce provides many options so fans can also create some amazing emails.

The following are the most important emails for your WooCommerce store customers.

New order: New order emails are sent when a new order is received in WooCommerce.

Canceled order: The canceled order email is sent when the order has been canceled.

Failed Order: Fail order emails are sent when any under-processing or on-hold order is marked as failed.

Order On Hold: This is an Order on hold notification sent to customers. There is an order description after placing an order on hold.

Processing order: It is an order notification sent to customers. There is a description of the order after payment.

Full Order: Order complete email is sent to customers upon order completion. These emails usually indicate that the orders have been sent.

Refunded orders: Order refunded emails are sent to customers upon order refund.

Customer Invoice: Customer invoice emails contain product order information and payment links.

Customer Note: Customer note emails are sent when you add a note to order in email contain.

Reset password: Customers "reset password" emails are sent when the customer reset their password.

New Account: Customer "New Account" email is sent to the customer when the customer signs up through the checkout or account sign-up page.

In addition to these standard email types, you can also add custom email.

WooCommerce Global Email Options

The standard WooCommerce email looks like this:

WooCommerce order email

WooCommerce Admin allows basic customization of this default email layout. These options can be accessed after logging into WordPress Admin and going to WooCommerce > Settings > Email > Email Sender option. These options include:

Set with name / address (client visible)

Size of WooCommerce Email Header Image

Change email footer

Choose different base, background and body colors

WooCommerce order email WooCommerce order email

Remember that these options apply to all emails. In just a few minutes, you can create a highly customized email by changing the WooCommerce email header image size, custom footer text, and another base color.

WooCommerce order email

You must have noticed that WooCommerce was used to recognize that a bright base color was used. To compensate, it used a suitable shadow for the title. Unfortunately, this logic was not applied to the content of the footer. This crash can easily be fixed manually!

WooCommerce Email Specific Options

Email type has its own set of customization options in WooCommerce . These options can be accessed through WooCommerce > Settings > Emails > processing order (This example is centered on the Processing Processing Email Email. You can change many aspects of the email, including:

  • Enable or disable whether email is also sent
  • Email subject
  • Email title (default "Thanks for your order")
  • Whether email is sent as HTML or plain text (default option is HTML)
WooCommerce order email

Here, I have set up custom email headings as For Thank You for Your Order.

Overriding Custom Email WooCommerce Template

A more effective and efficient approach is to modify the default email layout in WooCommerce. WooCommerce provides a useful template system that allows you to customize the parts of your store or email by repeating the format file (s) in the theme. There is a template file for every email type of content (for example, woocommerce / templates / email / customer-process-order.ntp). In addition, there are shared templates that can access and use all email types. These can be found at woocommerce / templates / email / email-styles.php. In many cases, this is a template that developers override to change the shared aspects of email. The procedure mentioned before handling the footage mentioned earlier is:

First make sure that the following directory exists in the WordPress installation: wp-content / themes / your-theme / woocommerce / email After this, copy the file found on wp-content / plugins / woocommerce / templates / email / email-styles.php: the theme of this store: your-theme / woocommerce / email /.

Finally, edit your theme / woocommerce / email / email-styles.php to change the color of the footer to black (for the sake of briefness, only the relevant portion of the template file code is shown):

$credit = "
color: #66bae3;
font-size:15px;
text-align:center;
";

This generates a much more readable footer:

Conditional optimization with action / filter

The last and most effective approach to customize email is to work with WooCommerce custom code. This clearly requires high level expertise in PHP. The good news is the process is straight forward because the original WooCommerce email layouts are still in use. The process involves changing parts of the material.

Filter Functions

Actions Functions

Activation/Deactivation/Uninstall Functions

For this example, I'll add some helpful payment instructions based on the checkout form of payment used in the email.

To get started, add the following to the functions of the theme.

add_action( 'woocommerce_before_email_order', 'add_order_instruction_email', 10, 2 );
 
function add_order_instruction_email( $order, $sent_to_admin ) {
  
  if ( ! $sent_to_admin ) {
 
    if ( 'cod' == $order->payment_method ) {
      // cash on delivery method
      echo '

Instructions: Full payment is due immediately upon delivery: cash only, no exceptions.

'; } else { // other methods (ie credit card) echo '

Instructions: Please look for "Madrigal Electromotive GmbH" on your next credit card statement.

'; } } }

If customers opt out of "cash on delivery" when they check out, then the customer will receive an email with helpful instructions instructions:

Plugin / Payment Gateway Options

Many plugins and payment gateways actually permit you to customize parts of the order email. For example, the built-in bank / wire transfer payment method allows you to configure instructions and insert wire transfer information. It can be easily done through WooCommerce > Settings > Checkout > BACS.

WooCommerce order email

Although it is unusual, it is good to know that these options are available. This information can also help you choose a particular plugin for the store.

WooCommerce Email Add_actions Hook,

While working with WooCommerce Email, add_actions hooks are often used to work. While working with this hook, you have to use a global variable, email, in which the email subject will be. Here is the code snippet:

add_action( 'woocommerce_email_header', 'woocommerce_emails_before_header', 1,3 );
function woocommerce_emails_before_header( $email_heading, $email ){
    $GLOBALS['email'] = $email;
}

The above hook can be placed at the beginning of the function.php (located in your Theme folder) or WooCommerce Email Template. Global variables $ Email calls the main WooCommerce email object, while $ order is an example of a global WooCommerce order object

global $email; 
$order = $email->object;

Email per WooCommerce Custom Product

The following codes send custom order email templates for a different product

For example, for Product ID 87, you want to display the title title WooCommerce Email Notification or How To Test WooCommerce Email:

function woocommerce_custom_email_per_product_depending_on_product_id( $email_heading, $order ) {
    global $woocommerce;
    $items = $order->get_items();
    foreach ( $items as $item ) {
        $product_id = $item['product_id'];
        if ( $product_id == 87 ) {
            $email_heading = 'WooCommerce email notification OR how to test WooCommerce emails';
        }
        return $email_heading;
    }
}
add_filter( 'woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5 );

Note: Now that you know the full process of customizing the WooCommerce order email, now you have the option to maintain a function or create a separate WooCommerce email plugin for confirmation and notification of Woocommerce email.

Comments

  1. Intelicle is offering custom ecommerce solutions to help you to reach maximum number of online customers. We take pride in providing secure and trustworthy ecommerce solutions.
    custom ecommerce solutions
    Bespoke ecommerce solutions

    ReplyDelete
  2. I am really impressed with your blog article, such great & useful knowledge you mentioned here. Keep sharing more articles like this.

    To know more information

    Php Development Company

    Python Development Company

    Custom Web Development Company

    Web Development Company in India

    E-Commerce Website Development Company

    ReplyDelete

  3. This is a great inspiring article. about WooCommerce Development Company
    I am pretty much pleased with your good work.You put really very helpful information...
    I adore your websites way of raising the awareness on your readers.
    If you are looking for WooCommerce Development Company in U.S.A. visit Vega Technologies LLC we provide WooCommerce Development services for more information click on the link given below:-
    WooCommerce Development Company

    ReplyDelete

Post a Comment