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.
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.
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.
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
}
In your theme editor, open
functions.php and add this filter:add_filter(
'yaymail_order_item_product_title_colspan',
function( $yaymail_template ) {
return 2;
},
10
);
Last modified 2mo ago