AprenderWP

Sitio especializado en Wordpress para principiantes

  • Principiantes
  • Tutoriales
  • Plugins
  • Temas
  • Blog
    • Novedades
    • Showcase
    • Opiniones
AprenderWP » Woocommerce » WooCommerce: agregue CSS a los correos electrónicos de pedidos

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 una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Sobre mi

Mi nombre es Joaquin y llevo 12 años creando sitios web en wordpress. En este blog comparto todos mis conocimientos.

Necesito ayuda con ...


Empezar un
Blog

Optimizar
Wordpress

Seguridad
Wordpress

SEO
Wordpress

Errores
Worpdress

Crear una
Tienda Online
Política de Privacidad
Política de Cookies
Aviso Legal

Copyright © 2022 · AprenderWP