Customize with CSS

When it comes to global email design customization, you have plenty of built-in options to get started. However, if you want to take your email templates to the next level with a more polished and professional look, adding custom CSS for email design is the way to go.

How to add custom CSS to the CSS box

Adding custom CSS in YayMail is simple, but since the option is disabled by default, you’ll need to enable it first. Follow these steps to access the CSS box and start customizing your WooCommerce email templates.

Step 1: Open the Settings Menu

From your WordPress dashboard, navigate to YayMail → Email template → Settings. This is where you’ll find all the global options for customizing your email templates.

Step 2: Enable the Custom CSS Box

Inside the Settings tab, locate the Custom CSS option. By default, it’s turned off. Toggle the switch to enable it, and a dedicated CSS box will appear where you can paste your own CSS code.

Step 3: Add Your CSS Code

Paste your desired CSS snippets into the provided box. This allows you to fine-tune every detail of your email layout and style.

With custom CSS, you can easily control different elements - for example, removing link underlines, making text bold, adjusting font sizes, tweaking padding and spacing, or even adding brand-specific colors. Best of all, you can instantly preview these changes in your email template preview before sending them to your subscribers.

Step 4: Save Your Changes

Once you’ve added your CSS, scroll down and click Save global settings to apply the changes. YayMail will automatically update your email templates, and you can preview the results instantly in the email template preview.

This level of customization ensures that your emails don’t just look good, they align perfectly with your brand identity and deliver a more engaging experience for your audience.

List of available CSS for YayMail users

Below are some of the most useful CSS tweaks you can apply to create a more branded and professional WooCommerce email experience.

Customize Billing and Shipping Address Column

• Customizing text link color

By default, links such as customer email addresses or phone numbers often appear with the standard browser styling, which may not match your brand identity. To maintain consistency in your WooCommerce email customization or WordPress email template styling, you can easily change the text link color using custom CSS.

For example, if you want to update the link color of a customer’s email address or phone number (like shown in the image above), simply add the following CSS snippet to your Custom CSS box:

.yaymail-table-billing-shipping-address a{
color: green !important;
}

• Change the color of the phone number of the Billing and Shipping address

These phone numbers often appear in a standard link color (usually blue), which may not align with your store’s branding. With a little WooCommerce email customization, you can easily change the phone number color to match your WordPress email template styling.

In YayMail settings, enable Custom CSS, and add this CSS:

 .yaymail-billing-address-wrap a,
  .yaymail-shipping-address-column a{
    color: #e45612 !important;
  }

Customizing the WooCommerce order details table

Hide the table border or change the design of the order item table

The order item table is one of the most important elements in your WooCommerce email templates because it displays product details, quantities, and prices. By default, this table includes standard borders and styles, which may not always align with your branding or preferred layout.

With WooCommerce email customization, you can use custom CSS to either hide the table border for a cleaner, minimalist look or redesign the order item table to match your brand’s identity.

Here’s a sample CSS snippet you can apply in your Custom CSS box:

.yaymail_element_order_item {
     border: none !important;
}
.yaymail_element_head_order_item  tr th {
    border-color: #ffffff !important;
    border-bottom-color: #e5e5e5 !important;
}
.yaymail_element_body_order_item tr th {
    border-color: #ffffff !important;
    border-bottom-color: #e5e5e5 !important;
}
.yaymail_element_foot_order_item {
    background: #e5e5e5 !important;
}
.yaymail_element_foot_order_item  tr th {
    border: none !important;
    text-align: right !important;
}

And here are the end results once you applied the CSS above.

Customizing column

Sometimes, the default WooCommerce email layout may not include all the details you’d like to display for your customers - such as SKU, product thumbnail, or even custom metadata.

To add or customize a column in the order item table, you’ll need to extend the template using a filter inside your theme’s functions.php file.

add_filter(
	'yaymail_order_item_product_title_colspan',
	function( $value , $template_id) {	
		return 2;
	},
	10,
	2
);

This filter allows you to hook into the WooCommerce email order items table and modify or add new columns.

• To hide the quantity column, you can apply these CSS and PHP snippets.

In some cases, you may want to simplify your WooCommerce order emails by removing the quantity column from the order item table.

For example, if you’re selling one-of-a-kind items, digital products, or services, the quantity column may not be necessary and could even clutter the layout.

In YayMail settings, enable Custom CSS, and add this CSS:

.yaymail_item_quantity_title, .yaymail_item_quantity_content {
    display: none !important
}

This will hide the quantity column visually in your email template.

• To hide the price column, you can add the following CSS

Sometimes you may not want to display product prices in your WooCommerce order confirmation emails. This is common for stores that provide invoices separately, offer free products, or sell services where the price has already been agreed upon. In such cases, you can easily remove the price column from the WooCommerce order item table with a simple CSS tweak.

.yaymail_item_price_title, .yaymail_item_price_content{
    display: none !important;
}

Customizing row

One common adjustment is hiding the customer note row that sometimes appears at the bottom of the order details. If you don’t use this feature or prefer a cleaner layout, you can easily remove it with custom CSS.

.yaymail_item_note_title_row {
    display: none !important;
}

This CSS will hide the note row from the order table in all outgoing WooCommerce emails.

Customizing font size

Typography plays a huge role in how professional and readable your WooCommerce emails look. If the default font size in your order item table feels too small or too large, you can easily adjust it with custom CSS in YayMail. This helps you maintain consistent WordPress email template styling that aligns with your brand’s identity.

In YayMail settings, enable Custom CSS, and add this CSS:

.yaymail_element_head_order_item tr th,
.yaymail_element_body_order_item tr th,
.yaymail_element_foot_order_item tr th
 {
  font-size: 20px !important;
}