Cambiar el icono del carrito de WooCommerce en Divi

Inicio / Blog / Divi Woocommerce / Cambiar el icono del carrito de WooCommerce en Divi

Autor: Jefferson M

Publicación: 20 Jul, 2022

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

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:

Cambiar el icono del carrito de WooCommerce en Divi

¡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.

4 Comentarios

  1. Javier Lopez

    Hola buen tutorial! Y para mostrar la cantidad de productos añadidos como se hace ?

    Responder
    • Jefferson M

      ¡Gracias! En un próximo snippet lo compartiremos, así que debes estar al pendiente, o estar inscrito en nuestra lista de correo para que recibas las actualizaciones.

      Responder
  2. Rafa

    Hola. Muchas gracias por el tutorial. Una duda ¿cómo puedo hacer que cambie de color el icono del carrito o de icono al pasar el cursor?

    Responder

Enviar un comentario

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

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

11 + 13 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi