How to customize transactional emails with the email designer

BySupport Admin

Transactional emails are the automated messages your store sends when a customer places an order, resets a password, or receives a shipping update. Using the email designer allows you to change the colors, fonts, and layout of these messages so they match your brand identity instead of using the default WooCommerce look.

How to customize your emails

  1. Open the Designer: Log in to your WooShop dashboard and go to WooCommerce > Email Customizer. This will open a visual preview of your emails.

  2. Choose a Template: Use the dropdown menu in the sidebar to select the specific email you want to edit, such as "Processing Order" or "Customer Invoice."

  3. Set Global Styles: Go to General or Container settings. Here, you can set the background color and the width of the email body. It’s best to keep the width between 600px and 700px for better compatibility with mobile phones.

  4. Add Your Brand: Open the Header section to upload your logo. You can also change the header background color and the font size of the email title.

  5. Adjust the Content: Navigate to Email Body. You can change the font family, text size, and link colors. This ensures that every button and link matches your store’s theme.

  6. Customize the Footer: Use the Footer section to add your contact details, social media links, or a brief "thank you" note.

  7. Send a Test Email: Before finishing, click the Send Test Email button. Enter your own email address to see how the message looks in a real inbox.

  8. Save Changes: Click Publish to make your changes live for all future customers.

Practical customization scenarios

  • Matching your brand colors: If your shop uses a specific blue or green, use the color picker to update the header and "View Order" buttons so the email feels like an extension of your website.

  • Adding instructions: Use the text area in the "Processing Order" email to tell customers how long shipping usually takes or how they can contact support if they have questions.

  • Social media growth: Add links to your Instagram or Facebook page in the footer to encourage customers to follow your brand after they purchase.

Troubleshooting common issues

The logo looks too big or blurry
If your logo appears blurry, ensure you are uploading a high-resolution PNG or JPG. If it’s too big, use the "Logo Width" slider in the Header settings to scale it down to a size that fits comfortably at the top of the message.

Emails look different in Outlook or Gmail
Every email app (like Outlook, Apple Mail, or Gmail) reads code differently. If your layout looks slightly off in one app, try simplifying your design. Avoid using too many columns or complex fonts that might not be supported on every device.

Test emails aren’t arriving
If you send a test email and it doesn’t show up, check your spam folder. If it’s still missing, verify that your site’s general email settings are correct under WooCommerce > Settings > Emails.

Customizing your emails is a simple way to make your business look more professional and keep your branding consistent.

Related guides:

  • How to manage your WooCommerce orders

  • Setting up your store logo and favicon

Similar Posts