Add your own CSS to the WooCommerce emails

AI Verified

Name

About

The default WooCommerce emails may look a bit dull. You can add your own styles via the following WooCommerce snippet:

Language

PHP

Rating

Voted: 0 by 0 user(s)

Codevault

jbeer

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: Not Specified

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

11/11/2022

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

Learn More

AI Bot Comments:

Found 0 vulnerabilities

Add your own CSS to the WooCommerce emails

 
                     1add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );
 2 
 3function bbloomer_add_css_to_emails( $css, $email ) {
 4  $css .= '
 5  #template_container {
 6  background-color: #fff;
 7  box-shadow: 5px 10px 20px #dedede !important;
 8  border: none; }
 9  #template_header_image {
10  width: 200px;
11  margin-bottom: 16px; }
12  ';
13  return $css;
14}

Related Snippets

Please see some snippets below related to this snippet..

Styling

Unverified

Custom Elementor CSS Background Effect

Added: 1 year ago

Last Updated: 1 year ago

Animated Rainbow Gradient & Transition Effect for Elementor Section Background

View

Styling

Unverified

CSS Image Outline Overlay

Added: 1 year ago

Last Updated: 1 year ago

Adds a semi transparent inner outline onto an image

View

Styling

Unverified

Add Back Button to Formidable Forms

Added: 9 months ago

Last Updated: 8 months ago

This code creates a hyperlink (<a>) with the text "Back" and a href attribute that uses javascript:history.back() to go back to the previous page in the browser history.

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WooCommerce

AI Verified

Confirm Password Field in Woocommerce

Added: 2 years ago

Last Updated: 2 months ago

View

WooCommerce

AI Verified

Redirect customers to own thank-you page after order

Added: 2 years ago

Last Updated: 2 months ago

You may want to redirect your customers to a custom thank you page after they place an order. You can do that with the following WooCommerce snippet

View

WooCommerce

AI Verified

Bypass logout confirmation.

Added: 2 years ago

Last Updated: 3 months ago

View