WooCommerce: agregue CSS a los correos electrónicos de pedidos

A diferencia de su tema de WordPress, no puede simplemente agregar CSS a su estilo.css para personalizar el aspecto de los correos electrónicos de WooCommerce .

Este práctico fragmento de PHP es, por lo tanto, la única solución viable. Es un poco complicado, pero una vez que entiendes la idea, agregar CSS a los correos electrónicos de pedidos es muy sencillo.

WooCommerce: personalizar el CSS del correo electrónico
WooCommerce: personalizar correo electrónico CSS

Fragmento de código de PHP n.° 1: agregue CSS a todos los correos electrónicos de WooCommerce

/**
 * @snippet       Add CSS to WooCommerce Emails
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );
 
function bbloomer_add_css_to_emails( $css, $email ) {
   $css .= '
      h2 { color: red }
      h3 { font-size: 30px }
   ';
   return $css;
}

Fragmento de PHP n.º 2: agregar CSS a un correo electrónico específico de WooCommerce

Nota: puede encontrar una lista de ID de correo electrónico (el fragmento usa «nuevo_pedido», por ejemplo) aquí: https://www.businessbloomer.com/woocommerce-add-extra-content-order-email/

/**
 * @snippet       Add CSS to Specific WooCommerce Email
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_new_order_email', 9999, 2 );
 
function bbloomer_add_css_to_new_order_email( $css, $email ) {
   if ( $email->id == 'new_order' ) {
      $css .= '
         h2 { color: red }
         h3 { font-size: 30px }
      ';
   }
   return $css;
}

Deja un comentario