BL Cambiar el icono del carrito de WooCommerce en Divi

Cambiar el icono del carrito de WooCommerce en Divi

En este tutorial de WooCommerce y Divi te explicaremos cómo cambiar el icono del carrito de WooCommerce en Divi. Lo haremos a través de la aplicación de unas líneas de código CSS.

Índice

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

El tema Divi tiene soporte para WooCommerce con el que podrás crear fabulosas tiendas online. Uno de los problemas es que el icono de carrito que viene en el menú de Divi incorporado es un poco simple, pues bien en este content hub te daremos el snippet que necesitas para cambiar el icono del carrito del menú principal.

Si quieres aprender a hacer los ajustes básicos correctos a tu tienda online, no olvides ver nuestro curso de WooCommerce Básico.

¿Cómo cambiamos el icono del carrito de WooCommerce en Divi?

El icono del carrito proviene de la propia fuente de iconos de Elegant Themes. Es relativamente fácil cambiar este ícono por otro con la misma fuente de ícono usando CSS.

Para hacerlo, necesitamos el código del icono que queramos ver. Para obtener el código ve a la página de fuentes de iconos oficial de Divi y busca el icono que desees. Veras una lista como esta:

lista de fuentes de iconos de Divi

Para obtener el código CSS para el ícono, debemos cambiar un poco el código que viene con Divi. El código que tienes de Divi es algo así: “” elige el código del ícono que quieras, cópialo y pégalo en un blog de notas.

Para el ejemplo nosotros hemos elegido: “&#xe013” ahora, en donde hemos pegado el código reemplazamos el “& # x” con una barra “\”. Entonces nos ha quedado así: “\ e013”

Una vez que tengamos nuestro código de icono listo, lo usaremos para el siguiente paso:

Paso 2: Insertamos el Snippet CSS

Copia el código CSS de acá abajo y cambiar el código en la línea de “content” por el código del icono que hayas elegido.

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

Luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS completo.

El resultado será algo como esto:

Antes:

icono original carrito divi - Cambiar el icono del carrito de WooCommerce en Divi

Despues:

Icono cambiado Divi - Cambiar el icono del carrito de WooCommerce en Divi

Pero eso no es todo, tenemos una opción adicional para ti:

Cambiar el icono del carrito por una imagen

Primero es recomendable que descarguemos la imagen, que la misma sea en formato PNG y que sea de 20 x 20 px como máximo de tamaño.

Aprende a crear una tienda online con nuestro curso de creación de tiendas online con Woocommerce y Divi

Luego, para cambiar el ícono del carrito por una imagen personalizada que quieras descargar de flaticon o cualquier otro banco de iconos, debes copiar el siguiente cacho de código:

.et-cart-info span:before {
    /* icono descargado de www.flaticon.com */
    background: url('https://layout.uxdivi.com/wp-content/uploads/sites/3/2021/01/shopping-1.png') !important;
    content: '';
    display: inline-block; 
    height: 1em !important;
    width: 1em !important;
    vertical-align: -1px;
}

Solo debes cambiar la URL a la de tu archivo de imagen que podrás ver en los detalles de la misma. También puede jugar con el ancho y la altura para obtener el tamaño del icono que desee y el valor de alineación vertical para moverlo hacia arriba o hacia abajo.

El resultado sería el siguiente:

¡Y listo! Si todo sale bien, ya pudiste cambiar el icono del carrito de WooCommerce en Divi.

Relacionado: Cambiar el “read more” del blog de Divi

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo tutorial.

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →