Personalizar WooCommerce de ARRIBA a ABAJO para no ser uno más

Personalizar WooCommerce es el objetivo de mucha gente cuando crea su tienda online con WordPress por muchos motivos.

A todo dueño de un ecommerce le gusta darle un toque de personalización para que no se parezca al resto de tiendas hechas con WooCommerce.

Ya sabes, misma estructura de las páginas, mismos colores de los botones, mismos textos en todos los lados…

Por eso, en esta entrada te voy a explicar cómo personalizar WooCommerce de arriba a abajo, desde la apariencia de la tienda hasta los textos por defecto.

En el caso de que no sepas manejarte bien con WooCommerce y prefieras encargar el trabajo, puedes ver mi servicio de creación de tiendas online 🙂

Algunas de las herramientas que te voy a enseñar son de pago, ya que no hay muchas cosas gratis para mejorar el aspecto de tu tienda, pero créeme que valen la pena.

Si no quieres que tu tienda sea igual que la de todo el mundo, ¡sigue leyendo!

Personalizar WooCommerce con Elementor Pro

Elementor Pro revolucionó el mundo de WordPress con su llegada al mercado, pero es que, a partir de su versión 2.0, la revolución fue mucho mayor, sobre todo, por las posibilidades que incluye para personalizar una tienda hecha con WooCommerce.

Con este plugin tienes unas opciones de personalización brutales. Puedes crear y diseñar a tu antojo una plantilla tanto para la página de la tienda, donde se muestran todos los productos, como para la página de producto único.

Sin duda, una de las mejores opciones si quieres alejarte del típico diseño predeterminado de WooCommerce, yo lo he utilizado para algunas tiendas online de clientes y el resultado es muy bueno.

A continuación, te voy a explicar cómo puedes personalizar tu tienda utilizando Elementor Pro, pero antes, si no conoces Elementor, te recomiendo que le eches un ojo a este artículo.

Personalizar página tienda WooCommerce

Como he comentado, Elementor Pro te permite diseñar una página de tienda a tu antojo. Aparte de los widgets comunes que puedes utilizar (cabeceras, texto, imágenes, vídeo, etc, etc), Elementor Pro tiene un widget para añadir productos de WooCommerce, de manera que puedes añadirlos y combinarlos con otros elementos como te dé la real gana.

Puedes personalizar la página tienda como quieras, añadiendo textos, vídeos, imágenes, etc, separando los productos por categorías, añadir una sección con los más vendidos o los más valorados, añadir una barra lateral o prescindir de ella… en fin, tienes un montón de posibilidades.

Ahora te pondré un vídeo para que veas su funcionamiento, pero vamos a ver primero cómo puedes personalizar la página del producto.

Personalizar página producto WooCommerce

Esta es la parte que más me gusta de Elementor, poder personalizar la página del producto de WooCommerce para darle un aspecto totalmente diferente al que viene por defecto.

Al igual que con la página tienda, en la página de producto puedes combinar los elementos comunes de Elementor con los elementos específicos para esta página.

Tienes disponibles widgets para añadir el título del producto, las imágenes, el precio, las descripciones, la valoración, el botón de añadir al carrito, las pestañas con información, etc.

Puedes colocar cada uno de estos elementos donde quieras de la página, creando así una plantilla que se utilizará para mostrar todos los productos de tu tienda.

Te dejo con este vídeo, donde puedes ver un ejemplo de lo que puedes hacer para personalizar la página de producto y la página tienda:

Si te ha gustado lo que has visto, puedes comprar Elementor Pro en esta página.

Personalizar WooCommerce con Woocustomizer

La primera opción que te quiero enseñar es un plugin creado por Joan Boluda y su equipo.

Se trata de una herramienta que añade opciones extra al personalizador de WordPress para modificar todos los pequeños detalles que trae por defecto WooCommerce.

Su principal atractivo es que te permite mostrar u ocultar elementos de todas las páginas de la tienda (catálogo, página de producto, páginas de categoría, cuenta, carrito y finalizar compra) únicamente haciendo un clic.

Cuando lo instalas y accedes al personalizador de WordPress, te aparece una pestaña nueva llamada “Personalizar WooCommerce”. Cuando haces clic en ella, te aparecen todas las secciones que puedes modificar:

Entrando en cada una de ellas verás todas las opciones que hay para cada sección de la tienda:

Otra de las cosas interesantes que tiene este plugin es la posibilidad de ocultar los campos que se le pide al cliente en la página de finalizar compra. Si por ejemplo, no necesitas por lo que sea pedirle la dirección, con un solo clic puedes ocultar ese campo para que no aparezca.

Incluso puedes cambiarle el texto a cada uno de ellos. Por ejemplo, en lugar del nombre de la empresa que aparece por defecto quieres pedir el nombre de los padres (¿para qué querrá alguien saber el nombre de los padres? Bueno, es igual…), podrás cambiarle el texto fácilmente rellenando un campo de texto:

Para que veas todo lo que se puede hacer con este plugin, te dejo con un tutorial hecho por el propio Boluda en el que explica en detalle todas sus funcionalidades:

Darle una apariencia diferente a WooCommerce

Como ya supongo que sabrás, el tema que utilices es lo que marca principalmente el diseño de tu web y tu tienda online.

Se podría decir que la mayoría de temas para WordPress están programados sin tener mucho en cuenta WooCommerce.

Es decir, son compatibles con este plugin y puedes montar una tienda online sin problemas, pero no llevan estilos para darle una apariencia distinta a la parte de la tienda.

Vamos, que la tienda se ve con los estilos originales de WooCommerce y quedará un poco cutre si no lo personalizas un poco por tu cuenta añadiendo algunos estilos CSS, ya sea manualmente o a través de algún plugin para ello.

Pero por otra parte, hay una gran cantidad de temas que se han creado expresamente para ser utilizados con WooCommerce y añaden un toque de personalización a la tienda para que no se vea tan simplona como viene de serie.

Muchos de ellos se venden en Themeforest y pueden resultar muy atractivos a la vista, pero mi recomendación es que antes de enamorarte de alguno de ellos leas este artículo con alternativas a Themeforest.

Dicho esto, te voy a listar algunos de mis temas preferidos para utilizar con WooCommerce. Son temas que le darán una apariencia diferente a tu tienda y en ocasiones incluyen funcionalidades extra muy chulas.

Shoppe

Es un tema que me encanta porque es totalmente diferente a la gran mayoría. Muy personalizable y viene con su propio maquetador integrado para crear páginas con diseños muy chulos.

Es de los mismos creadores que Ultra Themify, un tema del que ya expliqué el por qué me gustaba tanto.

Una de las cosas que más me gustan de Shoppe son las galerías de fotos en el catálogo de productos y los efectos que hace cuando alguien hace clic en el botón de agregar al carrito y en el de favoritos.

Lo mejor es que lo veas tú mismo, entra en su página oficial y mira la demo para verlo en funcionamiento.

Saha

Saha es otro de esos temas que cuando los ves por primera vez te encantan. Está desarrollado por Theme Junkie y a simple vista nadie diría que tu tienda está hecha con WooCommerce debido al nivel de personalización que han llevado a cabo.

Tiene de todo: mega menú, comparador de productos, botones sociales para compartir los productos, widgets específicos para ecommerce, etc.

Pero vamos, como siempre lo mejor es que lo veas con tus propios ojos entrando en su página oficial y navegando por su demo.

FireUp

También desarrollado por Theme Junkie, FireUp es un tema más simple pero que también me gustan los estilos que tiene.

El catálogo es totalmente diferente a lo que estamos acostumbrados a ver en WooCommerce, y viene con varios shortcodes para añadir elementos como botones, pestañas, cajas de información, etc, donde quieras.

Entra aquí para ver sus características y su demo en funcionamiento.

StoreFront

Si lo que quieres es un tema simple pero altamente personalizable, una de las opciones que tienes que tener en cuenta es StoreFront.

Se trata del tema oficial de WooCommerce y puedes agregarle varios módulos según tus necesidades, además de instalar un personalizador para StoreFront que venden sus mismos creadores.

Personalizar el icono del carrito

En ocasiones, encontramos el tema perfecto para nuestra tienda pero no nos convence el icono del carrito que lleva por defecto.

Una de las cosas que le suele gustar a la gente es que cuando pases el ratón encima del icono del carrito, se despliegue una ventanita mostrando los productos que se han añadido al carrito.

Eso es algo que no todos los temas hacen, pero si ese es tu caso y quieres implementarlo, hay fácil solución.

Con este plugin puedes sustituir el carrito de tu tema por uno que muestre los productos al pasar encima el ratón.

Lo puedes personalizar bastante (elegir entre varios iconos, cambiar los colores…) y puedes añadirlo donde quieras mediante shortcodes.

Si lo que quieres es poder mostrar el carrito en el menú que tú quieras, puedes usar este plugin gratuito.

Personalizar los textos por defecto de WooCommerce

Si hay algo en WooCommerce que hace que tu tienda sea igual que todas las demás, son los textos que trae por defecto.

Empezando por el típico “Añadir al carrito”, y acabando por el “Gracias. Tu pedido ha sido recibido” cuando un cliente ha realizado el pago.

¿Hay algo más soso que eso?

No es que el problema sea que tu tienda online sea igual que las demás, el problema más bien está en que son textos robotizados que dan una sensación de frialdad que tira para atrás.

Ponte en la piel de tus clientes e imagina que completas un pedido en tu tienda.

¿Qué prefieres? ¿Recibir un “Gracias. Tu pedido ha sido recibido” o recibir un “¡Muchas gracias por tu compra! Ahora mismo nos ponemos a prepararlo para que lo recibas lo antes posible :)”.

O en lugar de “Añadir al carrito” te encuentras con un “¡Me lo pido!”.

No hay color, ¿no?

Con textos así das una sensación de cercanía inmensamente mayor y fidelizas mucho más a tus clientes, así que, ¿a qué esperas para personalizar los textos de WooCommerce?

Para cambiar los textos por defecto por los tuyos propios te recomiendo que leas este tutorial de Loco Translate, un plugin gratuito que te facilita mucho la vida.

Ahí explico paso a paso cómo traducir y personalizar textos de tus plugins y temas de WordPress.

Conclusión

Como ves, hay muchas cosas que puedes hacer para personalizar WooCommerce y darle ese toque diferente para que no sea igual que el resto de tiendas.

Si eliges un buen tema, te curras unos buenos textos para caer en gracia a los clientes, y personalizas a tu gusto todos los elementos de la tienda, tendrás ese plus ganado frente a la competencia.

Si se te ocurre alguna cosilla más que no he mencionado para personalizar una tienda online, te invito a que la compartas en los comentarios, así ampliamos las posibilidades para todo el que llegue hasta aquí 🙂

Y si necesitas información sobre cómo configurar WooCommerce, puedes echar un ojo a esta entrada, donde te explico todo lo que necesitas saber.