Want to resize WooCommerce email template width? Learn how to easily adjust it using a plugin or custom code to improve email layout, readability, and branding across all devices.
When it comes to email marketing, design matters just as much as content. One of the most overlooked aspects of email design, especially in WooCommerce, is the width of your email template. If your emails look too cramped or stretched on different devices, it can negatively affect readability, click-through rates, and overall user experience.
WooCommerce emails, by default, come with a fixed width that may not suit every brand or audience. Whether you’re aiming for a more modern look, aligning with your store’s branding, or simply optimizing for mobile devices, adjusting the email width can make a noticeable difference.
In this post, we’ll first break down what the ideal email width is and why it matters. Then, we’ll walk you through 3 easy steps to resize WooCommerce email template width — whether you’re a developer or a store owner with limited technical know-how.
Let’s make your emails not just functional, but visually spot-on.
What’s the Ideal Width of Email for Email Marketing
Before you jump into customizing your WooCommerce email templates, it’s important to understand why width matters and what the ideal email width is for effective communication.
What’s the Standard Email Width
The industry-standard width for most marketing emails is 600 to 640 pixels. This size strikes a perfect balance—it’s narrow enough to fit well on desktop clients and mobile devices, yet wide enough to present content clearly and attractively. The default width of WooCommerce email is 600px.
Why Email Width Matters in Email Marketing
In email marketing, every detail counts—and the width of your email template is no exception. A properly set email width ensures your content is easily readable, visually balanced, and compatible with all major email clients. When emails are too wide, they may require horizontal scrolling, stretch images awkwardly, or cause layout issues, especially on mobile devices. On the other hand, emails that are too narrow can look cramped and unprofessional.
Sticking to a standard width—typically around 600 to 640 pixels—helps your emails render consistently across platforms like Gmail, Outlook, Apple Mail, and mobile apps. This not only improves the user experience but also enhances the overall appearance of your brand. A well-structured email feels polished, boosts engagement, and can even increase click-through rates by making it easier for recipients to digest your message.
Whether you’re sending promotional campaigns or transactional updates, paying attention to your email width ensures that your content looks good—and works—every time it hits the inbox.
How to Resize WooCommerce Email Template Width With a Plugin
Resizing the WooCommerce email template width with a plugin is much easier. Unfortunately, not all WooCommerce email plugins offer the option to adjust the email template width. Virfice, however, has this feature built in. In this guide, we’ll show you how to modify the WooCommerce email template width using Virfice, a free email plugin for WooCommerce.
Plus, Virfice comes with a powerful email builder. You can easily customize your WooCommerce emails using intuitive elements and ready-made sections to perfectly match your store’s branding.
Install Virfice – Email Customizer for WooCommerce
First, install the Email Customizer for WooCommerce – Virfice plugin on your store. From your WordPress dashboard, go to Plugins > Add New, then type “Virfice” into the search bar. Once you locate the plugin, click Install Now.
Activate it once the installation is complete.
Resize WooCommerce Email Template Width in The Brand Settings
Once you’ve installed and activated the Virfice plugin, go to Virfice > Settings > Brand and click on Customize. This will take you to the global brand settings.
On the left panel, under Email Appearance, you’ll see the option to set your email template width. Adjust the width as needed—anywhere between 400px and 800px.
Virfice keeps the adjustment range within the industry-standard limits to ensure your emails look great across all devices and email clients, preventing layout issues caused by incompatible widths.
You’ve now successfully resized the width of your WooCommerce email templates for your store.
In addition to resizing, you can customize the global design of your WooCommerce emails by setting the email background color, outer background color, and more.
Plus, with Virfice, you can design each WooCommerce email individually to match your store’s branding and style.
How to Resize WooCommerce Email Template Width With Code Without Using A Plugin
If you’re comfortable working with a bit of code, customizing your WooCommerce email template width is also possible too. While plugins make it easier, doing it with code gives you more control and avoids adding extra dependencies to your site.
We will walk you through the steps to resize WooCommerce email template width directly by editing template files. Let’s dive in and adjust the WooCommerce email template width with code without installing any plugins.
Copy Email Template Files to Your Theme
To customize the WooCommerce email template width with code, you first need to copy the necessary email template files from the plugin directory to your theme. This ensures that your changes won’t be overwritten during WooCommerce updates.
Navigate to the WooCommerce Email Templates
Using an FTP client or your hosting file manager, go to the following directory:
wp-content/plugins/woocommerce/templates/emails
This folder contains all the default email templates used by WooCommerce. You’ll find files like:
- email-header.php
- email-footer.php
- email-styles.php
These templates control the layout, styles, and content structure of your emails. For adjusting the width, the key file is email-styles.php.
Copy Files to Your Theme
Now, copy the files you want to customize (at minimum, email-styles.php) to your active theme’s WooCommerce override folder. The correct path is:
wp-content/themes/your-theme/woocommerce/emails/
If the woocommerce/emails folder doesn’t exist in your theme, create it manually.
Always use a child theme when making customizations. This way, your changes will remain safe even if you update your main theme in the future.
Adjust the Width in email-styles.php
Once you’ve copied the email-styles.php file into your theme, it’s time to modify the email width.
Locate the Container Style
Open the email-styles.php file and search for the CSS that defines the main email table’s width. You’ll find something like this:
#body_table {
width: 600px;
}
This line controls the overall width of your WooCommerce email template.
Update to Your Desired Width
To increase or decrease the width, simply change the value:
#body_table {
width: 700px;
}
You can set any width between 400px and 800px, depending on your layout and branding needs. Be cautious with values beyond this range, as they may cause display issues on mobile or in some email clients.
This helps ensure your content looks balanced and doesn’t appear stretched or misaligned.
⚠️ Note: Making changes to your site using code can be risky if you're not familiar with how WordPress and WooCommerce templates work. A small mistake can cause layout issues or even break your site. Always create a backup before making any changes, and consider using a child theme to ensure your customizations are safe from future updates. If you're unsure, it's best to consult with a developer or use a plugin like Virfice for a safer, code-free experience.
Resizing your WooCommerce email template width doesn’t have to be complicated. Whether you’re aiming for better readability, consistent branding, or improved compatibility across devices, adjusting the width can make a big difference in how your emails are perceived.
With just a few simple steps using the Virfice plugin, you can easily customize the email width and overall design to match your store’s branding, without touching a line of code. And if you’re more technically inclined, you can always go the manual route by editing the template files directly.
A well-structured email layout enhances user experience, reinforces brand trust, and helps you communicate more effectively with your customers. So take a moment to fine-tune your email design—your audience will notice the difference.
