How to Customize WooCommerce Email Templates: with and without Plugins

WooCommerce’s email templates are highly customizable through code, enabling you to align them with your brand and provide an engaging customer experience. Below, you’ll find an expanded example of how to modify these templates with code, followed by suggested plugins for those who prefer no-code solutions.

Step 1: Locate WooCommerce Email Templates

WooCommerce stores email templates in the following directory:

/wp-content/plugins/woocommerce/templates/emails/

These templates include various email types like order confirmations, shipping updates, and customer notifications.

Step 2: Copy Template to Your Theme

To safely customize WooCommerce email templates:

Navigate to your active theme folder:bashCopy code/wp-content/themes/your-theme/
Create a new folder called woocommerce (if it doesn’t already exist).
Inside the woocommerce folder, create a subfolder named emails.
Copy the template file you want to customize (e.g., customer-completed-order.php) to this new directory:bashCopy code/wp-content/themes/your-theme/woocommerce/emails/

Step 3: Edit the Email Template

Below is an example of modifying the “Customer Completed Order” email template to add a custom message, order details, and dynamic data.

<?php
/**
 * Email Template: Customer Completed Order
 * Author: Pixel WP (https://pixelwp.net)
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

// WooCommerce email header
do_action( 'woocommerce_email_header', $email_heading, $email );

// Add a custom greeting message
echo '<p style="font-size: 16px; color: #333;">Hi ' . esc_html( $order->get_billing_first_name() ) . ',</p>';
echo '<p>Thank you for shopping with us! We’re excited to let you know that your order is now complete. 💖</p>';

// Order details section
echo '<h3 style="font-size: 18px; color: #0071a1;">Your Order Summary:</h3>';
echo '<p>Order Number: <strong>' . esc_html( $order->get_order_number() ) . '</strong></p>';
echo '<p>Order Date: <strong>' . esc_html( wc_format_datetime( $order->get_date_created() ) ) . '</strong></p>';
echo '<p>Total Amount: <strong>' . $order->get_formatted_order_total() . '</strong></p>';

// List all items in the order
echo '<h4>Items Ordered:</h4>';
foreach ( $order->get_items() as $item_id => $item ) {
    $product_name = $item->get_name(); // Product name
    $product_quantity = $item->get_quantity(); // Product quantity
    echo '<p>' . esc_html( $product_name ) . ' x ' . esc_html( $product_quantity ) . '</p>';
}

// Add a custom promotional message
echo '<p style="margin-top: 20px; font-size: 14px; color: #555;">Looking for more deals? Visit our <a href="https://pixelwp.net/shop" target="_blank">Shop</a> for exclusive offers!</p>';

// Add a "View Order" button
echo '<p><a href="' . esc_url( $order->get_view_order_url() ) . '" style="display: inline-block; padding: 10px 20px; background-color: #0071a1; color: #fff; text-decoration: none; border-radius: 5px;">View Your Order</a></p>';

// WooCommerce email footer
do_action( 'woocommerce_email_footer', $email );
?>

Step 4: Test Your Changes

Place a test order in your store.
Check the email to ensure it reflects your changes.
View the email on different devices to verify responsiveness.

Advanced Techniques

Add Inline CSS

Inline styles ensure compatibility across email clients:

echo '<p style="font-size: 14px; font-family: Arial, sans-serif;">Your custom message goes here.</p>';

Use WooCommerce Hooks

You can modify global email elements using WooCommerce hooks:

// Add custom content to the email header
add_action( 'woocommerce_email_header', function ( $email_heading, $email ) {
    echo '<p style="text-align: center; font-size: 20px; font-weight: bold;">Welcome to Our Store!</p>';
}, 10, 2 );

// Add a footer signature
add_action( 'woocommerce_email_footer', function ( $email ) {
    echo '<p style="text-align: center; font-size: 14px;">Powered by <a href="https://pixelwp.net" target="_blank">Pixel WP</a></p>';
});

Plugins for WooCommerce Email Customization

For those who prefer plugins over coding, here are some great options:

1. Email Customizer for WooCommerce by ThemeHigh

Drag-and-drop email editor.
Dynamic elements like order details and customer data.
Visually customize emails without coding.
Download Here

2. YayMail – WooCommerce Email Customizer

Live preview of email customizations.
Add blocks for images, buttons, and text.
Multi-language support.
D ownload Here

3. Kadence WooCommerce Email Designer

Pre-designed templates.
Real-time customization.
Simple, lightweight plugin for quick changes.
Download Here

4. Decorator – WooCommerce Email Customizer

Easy customization via WordPress Customizer.
Modify fonts, colors, and text with live preview.
Great for beginners.
Download Here

Conclusion

Customizing WooCommerce email templates can elevate your brand’s professionalism and improve customer communication. Whether you choose to edit templates manually through code or use plugins for convenience, the result is a more engaging and personalized experience for your customers. If you’re looking for more advanced techniques or help, contact Pixel WP!

Pixel WP