WooCommerce: cambie el ícono «Eliminar este artículo» en el carrito

Tengo una lista muy larga para escribir . Posiblemente tenga suficiente contenido para otros 2 años

Sin embargo, el otro día, un estudiante premium de WooCommerce me pidió algunos comentarios sobre su CSS personalizado, ¡así que tuve que darle prioridad! La solicitud fue: ¿cuál es la forma más fácil de cambiar el pequeño ícono/botón en la página del carrito que tiene la función de eliminar artículos del carrito (sí, esa fea cruz blanca en un círculo rojo)?

Cómo cambiar el ícono "Eliminar este artículo" en la página del carrito de WooCommerce
Cómo cambiar el ícono «Eliminar este artículo» en la página del carrito de WooCommerce

 

—– —– —– —– —– —– —– —–

Tabla de contenido

  • Cambie el ícono «Eliminar este elemento» – WooCommerce predeterminado
  • Cambie el ícono «Eliminar este elemento» – Tema de escaparate
  • Cambie el ícono «Eliminar este elemento» – Otros temas

—– —– —– —– —– —– —– —–

Cambie el ícono «Eliminar este elemento» – WooCommerce predeterminado

En WooCommerce predeterminado, y usando un tema que no aplica su propio estilo al carrito (por ejemplo, el tema 2017), el icono de «eliminar» es… ¡no es un icono!

De hecho, es una simple «x» (según el carácter «x») con un borde de 1 px y un radio de borde del 100 %, lo que hace que parezca una «x» con un círculo alrededor:

El carácter «x» con un borde de 1 px y un radio del borde del 100 % para «falsificar» el icono de eliminación @ WooCommerce Cart

Por lo tanto, puede usar CSS simple (puede obtener más información en el siguiente párrafo, incluso si es para el tema Storefront) para anularlo:

/* Hide the "x" */
 
a.remove {
    text-indent: -9999px;
    border: 0;
}
 
/* Add a Fontawesome icon instead */
/* Learn More in the Following Paragraphs */
 
a.remove:before {
    font-family: FontAwesome;
    content: "f1f8";
    float: left;
    text-indent: 0;
}

Si no ve el ícono, significa que Fontawesome aún no está instalado en su sitio web. Para lograr esto, debe agregar un código al archivo header.php de su tema: https://fontawesome.io/get-started

Cambie el ícono «Eliminar este elemento» – Tema de escaparate

Antes de darte la solución, me gustaría mostrarte una serie de capturas de pantalla. De esta manera, puede descubrir cómo cambiar el ícono «Carrito de menú», el ícono «Agregar al carrito» (si corresponde) y todos los demás íconos que agrega su tema o complementos.

De hecho, mi solución es específica para el tema Storefront, y cada tema es diferente. Por lo tanto, deberá adaptar su CSS a su caso específico.

1. «Inspeccionemos» el ícono «Eliminar este elemento» a través de Google Chrome

Primero, queremos entender qué está generando realmente este ícono. ¿Es HTML? ¿Quizás un truco CSS en su lugar?

"Inspeccione" el ícono "Eliminar este elemento" para ver qué está generando el ícono
«Inspeccione» el ícono «Eliminar este elemento» para ver qué está generando el ícono

2. «Eliminar este elemento» es un enlace («a href») con algún estilo CSS; ¡pero no hay señal del icono/imagen!

“Inspeccionar” nos permite estudiar el HTML y CSS del elemento inspeccionado. Sin embargo, nada parece decirnos de dónde viene el “círculo rojo de la cruz blanca”.

Enlace "Eliminar este elemento": HTML y CSS
Enlace «Eliminar este elemento»: HTML y CSS

3. Espera, echa un vistazo a ese «::before» dentro de «a href». Bienvenido al mundo de los pseudoelementos CSS

Esto es lo que sucede cuando resalto «::before» en la ventana HTML. Echa un vistazo al CSS:

CSS :: antes
CSS :: antes

4. “Contenido” CSS y familia de fuentes

Bueno, en pocas palabras, el ícono está siendo generado por una llamada de «contenido» CSS:

content: "f057";

Y, más abajo, el mismo elemento toma una familia de fuentes = “FontAwesome”:

font: normal normal normal 1em/1 FontAwesome;

Estas 2 líneas son por tanto las encargadas de generar esa fea cruz blanca… ¿y si quisiéramos sustituir ese icono por una “papelera”? ¿O algo mas?

5. Fuente Impresionante

Entonces, en algún lugar alrededor de HTML de WooCommerce (o Storefront de mi tema), se llama a este FontAwesome. ¡Esto significa que podemos reutilizar esto y ver si proporciona más íconos!

Entonces, vayamos a https://fontawesome.io/icons/ y busquemos los íconos de “ELIMINAR”:

Buscando otros íconos "ELIMINAR" en el sitio web de FontAwesome
Buscando otros íconos «ELIMINAR» en el sitio web de FontAwesome

Escojamos uno, por ejemplo el icono de “papelera”:

Especificaciones del icono de "papelera" de FontAwesome
Especificaciones del icono de “papelera” de FontAwesome

Y anota el “Unicode”: f1f8

6. CSS personalizado: reemplaza el icono original… ¡con una línea de código!

Ahora que eligió el ícono y conoce su Unicode, vaya a su CSS personalizado y agregue esta línea:

/* Change WooCommerce "Remove this item" Icon */
/* Original call was --> content: "f057"; */
/* Just replacing the Unicode...: */
 
a.remove:before {
     content: "f1f8";
}

Y una línea de código CSS ahora le dará este resultado final

El ícono "Eliminar este elemento" ahora es una papelera
El ícono «Eliminar este elemento» ahora es una papelera

7. CSS personalizado: también cambia el color del icono… ¡con otro delineador!

/* Change WooCommerce "Remove this item" Icon Color */
/* Original call was --> color: #e2401c; */
/* Just replacing the color code...: */
 
a.remove:before {
     color: #222222;
}

Cambie el ícono «Eliminar este elemento» – Otros temas

Es imposible saber si su tema personalizado está anulando el ícono «eliminar producto del carrito». Con suerte, uno de los 2 métodos anteriores funcionará para usted y se puede aplicar a su caso específico

Deja un comentario