Cambiar el icono del carrito de WooCommerce en Divi

El tema Divi tiene soporte nativo para WooCommerce, y una de sus comodidades es el ícono de carrito integrado en el menú principal. El problema: ese ícono es bastante simple, se ve igual en miles de tiendas, y no siempre encaja con la identidad visual que construiste. En este tutorial te explico cómo cambiar el ícono del carrito de WooCommerce en Divi con unas líneas de CSS — primero usando otro ícono del catálogo de Elegant Themes, y después con una imagen personalizada de cualquier banco de íconos.

Son dos técnicas distintas para el mismo objetivo, y conocer ambas te da flexibilidad total: la primera no agrega ninguna carga al sitio, la segunda te abre el catálogo visual infinito de Flaticon y similares. Vamos con las dos.

Método 1: cambiar el ícono usando el icon font de Elegant Themes

El ícono del carrito en el menú de Divi proviene de la propia fuente de íconos de Elegant Themes (el font ETmodules), así que cambiarlo por otro símbolo de la misma fuente es directo y sin peso adicional.

Paso 1: obtén el código del ícono

Ve a la página oficial de fuentes de íconos de Elegant Themes y busca el ícono que quieras usar. Verás una lista como esta:

Cada ícono trae su código HTML con el formato . La conversión para usarlo en CSS es simple:

1. Copia el código del ícono que elegiste — para el ejemplo usaremos .
2. Elimina el prefijo &#x y el punto y coma final.
3. Antepón una barra invertida a lo que queda. Resultado: e013 — ese es el valor que va en la propiedad content del CSS.

Paso 2: inserta el snippet CSS

Copia este código, reemplaza el valor de content por el código de tu ícono, y pégalo en Divi → Opciones del tema → General → CSS personalizado:

/* Cambiar el icono de carrito de woocommerce en Divi */
.et-cart-info span:before {
    content: 'e013';
    font-family: 'ETmodules' !important;
    font-size: 20px !important;
}

El selector .et-cart-info span:before apunta al pseudo-elemento que muestra el ícono del carrito en el menú. Al sobreescribir su content con otro código del icon font, el símbolo cambia al instante — y con font-size controlas el tamaño.

El resultado

Antes:

Después:

Consejo: elige un ícono que siga leyéndose como "carrito" o "bolsa de compras" a 20px de tamaño. Los íconos de bolsa (shopping bag) funcionan especialmente bien en tiendas de moda y productos premium — comunican lo mismo con una estética más editorial.

Método 2: cambiar el ícono del carrito por una imagen

Si ningún ícono del catálogo de Elegant Themes te convence, puedes usar cualquier imagen — por ejemplo un ícono descargado de Flaticon o uno diseñado con tu identidad de marca. Recomendaciones previas: formato PNG con fondo transparente (o SVG) y tamaño máximo de 20 × 20 px para que se integre bien con la altura del menú.

Sube la imagen a tu biblioteca de medios de WordPress, copia su URL desde los detalles del archivo, y usa este snippet:

.et-cart-info span:before {
    /* reemplaza la URL por la de tu propio icono */
    background: url('https://tusitio.com/wp-content/uploads/2026/01/icono-carrito.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: 1em !important;
    width: 1em !important;
    vertical-align: -1px;
}

La lógica de este método es distinta al primero: en lugar de mostrar un carácter del icon font, vaciamos el content y usamos la imagen como fondo del pseudo-elemento. Puedes jugar con height y width para el tamaño, y con vertical-align para subir o bajar el ícono hasta alinearlo con los elementos del menú.

El resultado sería el siguiente:

🎓 ¿Estás construyendo tu tienda online con Divi?
En el curso de tiendas online con Divi 5 y WooCommerce montamos una tienda completa de principio a fin: catálogo, páginas de producto, carrito, checkout y todos los detalles de personalización que convierten una tienda genérica en una tienda con marca. Accede como suscriptor.

Lleva el carrito un paso más allá

El ícono es la mitad de la historia. Estos complementos cierran la experiencia del carrito en el menú:

• Contador de productos: mostrar el número de artículos junto al ícono es de las mejoras de usabilidad más valoradas en una tienda. Tenemos el tutorial completo para agregar un contador de productos al carrito del menú de Divi.
• Coherencia con el resto del menú: si personalizas el carrito, revisa también el ícono del menú hamburguesa en móvil — usa la misma técnica del icon font y juntos definen la personalidad del header.
• Textos de la tienda: el mismo espíritu de personalización aplica al botón de compra — mira cómo cambiar el texto "añadir al carrito" en WooCommerce.

Errores comunes

El ícono no cambia

La causa #1: el valor de content quedó sin la barra invertida (content: 'e013' en lugar de content: 'e013'). Sin el backslash, el CSS muestra literalmente el texto "e013" o no muestra nada. Revisa también que el snippet esté en el CSS personalizado de las opciones del tema y que la caché esté purgada.

Se ve un cuadrado o un símbolo extraño

El código del ícono no existe en la versión del icon font de tu instalación. Verifica el código en la página oficial de Elegant Themes y recuerda el formato exacto: backslash + código hexadecimal, dentro de comillas.

La imagen personalizada se ve gigante o recortada

Asegúrate de incluir background-size: contain en el snippet del método 2 y de que la imagen original sea cuadrada (20×20 o 40×40 px para pantallas retina). Ajusta height y width en pares para mantener la proporción.

El cambio aplica en desktop pero no en móvil

Algunos headers personalizados del Theme Builder usan estructuras distintas por dispositivo. Inspecciona el elemento del carrito en la vista móvil con las DevTools y confirma que el selector .et-cart-info sigue presente; si tu header móvil es otro módulo, aplica el mismo CSS a su selector.

Preguntas frecuentes

¿Esto funciona con Divi 5?

El selector .et-cart-info corresponde al ícono de carrito clásico del menú de Divi. En Divi 5, si usas el módulo de menú del Theme Builder con el carrito activado, verifica el selector con las DevTools antes de aplicar el snippet — y prueba siempre primero en staging.

¿Puedo usar un SVG en lugar de PNG?

Sí, y es mi formato preferido: escala perfecto en pantallas retina y pesa menos. Úsalo igual que el PNG en el método 2 (necesitas tener habilitada la subida de SVG en WordPress, que por seguridad viene desactivada por defecto).

¿El cambio de ícono afecta la funcionalidad del carrito?

No. El CSS solo modifica la apariencia del pseudo-elemento visual; el enlace al carrito, el conteo de productos y todo el comportamiento de WooCommerce siguen intactos.

¿Dónde encuentro íconos de carrito gratuitos de calidad?

Flaticon es el banco más completo para este caso (verifica la licencia de atribución). Si prefieres íconos consistentes con tu sistema de diseño, dibuja el tuyo en Figma y expórtalo como SVG — son cuatro trazos y queda 100% tuyo.

Mis recomendaciones finales

1. Prueba primero el método del icon font — cero peso adicional y resultado inmediato; pasa a la imagen solo si necesitas algo que el catálogo no tiene.
2. Mantén el tamaño del ícono entre 18 y 22px: suficiente presencia sin desbalancear el menú.
3. Verifica el contraste del ícono sobre el fondo del header en todos los estados (normal, fixed/sticky, transparente sobre hero).
4. Acompaña el ícono con el contador de productos — la combinación ícono personalizado + badge numérico es el estándar de las tiendas profesionales.
5. Documenta el snippet y el código del ícono elegido en las notas del proyecto; tu yo del futuro lo agradecerá en el próximo rediseño.

Conclusión

Cambiar el ícono del carrito de WooCommerce en Divi es un detalle de cinco minutos que comunica cuidado en el diseño: con el icon font de Elegant Themes lo resuelves sin agregar un solo byte al sitio, y con una imagen personalizada llevas la identidad de marca hasta el último píxel del menú. Aplica el método que encaje con tu proyecto y dale a tu tienda ese acabado que se nota profesional.

🎓 ¿Quieres una tienda que venda, no solo que se vea bien?
En el curso completo de WooCommerce aprendes la configuración correcta de toda la tienda — productos, pagos, envíos, emails — y las optimizaciones que convierten visitas en pedidos. El complemento perfecto para estos ajustes visuales.