Cómo cambiar la imagen del carrito de WooCommerce

¿Te has preguntado dónde encontrar el código del carrito que utiliza Woocommerce en algunos de sus temas para poder cambiarlo? Cuando no lo sabes es muy complicado encontrarlo, pero cuando sabes qué es, qué buscas y dónde está ¡es coser y cantar!

En este tutorial te explicaré cómo cambiar el icono del carrito de WooCommerce.

¿Dónde estás carrito de Wocoommerce? ¡Dónde!

 

Hay temas (themes) en los que WooCommerce utiliza fuentes de iconos para mostrar el carrito (si, como lo lees, ¡es una fuente!) y en la mayoría de los casos usa Font Awesome. Esta fantástica fuente es completamente open source y GPL amigable, esto significa que puedes utilizarla gratuitamente en tus proyectos comerciales o donde lo desees.

Awesome ofrece una enorme variedad de iconos, los hay incluso animados y no solo para carritos sino para infinidad de temáticas. Puedes ver algunos ejemplos aquí.

En este tutorial, verás como ejemplo el siguiente icono Awesome, yo lo utilicé para mostrar el carrito de la tienda Woocommerce de un cliente:

Configurar la Font Awesome en el carrito de WooCommerceLa fuente se llama fa-cart-arrow-down  y su código unicode es: f218.

Como has podido entrever, el carrito a simple vista parece originado por una imagen, pero nada más lejos de la realidad, es una fuente de iconos. Y como cualquier fuente de texto normal, se puede personalizar utilizando hojas de estilo; es decir, es posible ponerle colorines, aumentarle el tamaño, cambiarle la ubicación, etc. 

 

 Cómo configurar la Font Awesome en el carrito de WooCommerce

 

Vamos al meollo del tutorial. Si tienes una tienda WooCommerce (el tutorial es válido para cualquier tipo de tienda o sitio web) y no te gusta la imagen del carrito que trae por defecto, puedes cambiarlo siguiendo estos pasos:

  • Entra en el sitio web de Font Awesome y busca el icono que más te guste. Actualmente hay 4 disponibles para el carrito de una tienda online y centenares para otras temáticas.
  • Utiliza la función de “inspeccionar elemento” de tu navegador para encontrar el código del icono que actualmente estás usando en tu tienda. En mi ejemplo es “\f218”; Accederás a esta función con el botón derecho del ratón. Ten presente que algunos navegadores renderizan el código del icono como ASCII, por lo tanto tendrás que utilizar un conversor como por ejemplo este para obtener el código hexadecimal correspondiente.

carrito woocommerce css

  • Una vez hayas obtenido el código hexadecimal, encuentra el contenedor de la clase responsable de mostrar el icono del carrito.

Configurar la Font Awesome en el carrito de WooCommerce

En mi ejemplo es “cart-contents”

  • Usa tu editor de código favorito para abrir el archivo .css del tema y reemplaza el código actual, por el nuevo que has obtenido del sitio de FontAwesome. Nunca cambies el código en las CSS del tema padre; crea un tema hijo para trabajar en él y así te evitarás perder los cambios realizados cuando el autor actualice tu tema.

font awesome woocommerce css

Y esto es todo, ya puedes disfrutar de tu nueva imagen de carrito de Woocommerce sin añadir plugins, simplemente con 4 clicks y algo de conocimiento de .css.

Marcar el enlace permanente.

Deja un comentario

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

Información básica sobre protección de datos: El responsable del proceso es Carlos González-Román Ferrer. Tus datos serán tratados para gestionar y moderar tus comentarios.. La legitimación del tratamiento es por consentimiento del interesado. No se cederán datos a terceros, salvo obligación legal. Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.