Customize with CSS

There are various options for global design. But if you would like to dive deeper to achieve a sophisticated design, you can consider using CSS to further customize the email elements.

Customizing text link color

If you wish to change the text link color of the customer's email address and phone number, you can add this CSS snippet:

td.yaymail_billing_address_content address > span > a{
    color: green !important;
}

Just navigate to the Settings tab, enable Custom CSS, add the CSS to the box, and click Save.

Refer to the screenshot below, I'm changing the text link color into green.

Likewise, you can also change many aspects like removing the underline, turning them into bold font, and so on.

Customizing WooCommerce order details table

If you want to hide the table border or change the design of the order item table, consider applying these CSS:

.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 order item table

1. Customizing column

In your theme editor, open functions.php and add this filter first:

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

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

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

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

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

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

1. Customizing row

• To hide the note row, please apply the following CSS

.yaymail_item_note_title_row {
    display: none !important;
}

Customizing font size

To change the font size of the order table, 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;
}

To change the font size of the Billing address and Shipping address, in YayMail settings, enable Custom CSS, and add this CSS:

.title-billing,
.title-shipping,
.yaymail_shipping_address_content table address span,
.yaymail_billing_address_content table address span{
    font-size: 20px !important
}