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:

personalizar woocommerce

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

customize woocommerce

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:

woocustomizer

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 theme woocommerce

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

fireup woocommerce

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.

personalizar carrito

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.

¿Por qué hay webs que hacen huir a los clientes mientras otras consiguen ventas cada mes?

Y no es porque en ellas aparezca una foto de Belén Esteban…

20 comentarios en “Personalizar WooCommerce de ARRIBA a ABAJO para no ser uno más”

  1. Hola!
    Por favor, a ver si me podéis ayudar porque me está saliendo humo de la cabeza 🙁
    Estoy haciendo una tienda online con divi y woocommerce y tengo un problema porqu no soy capaz de personalizar la página de categoría.
    Os paso el enlace para que puedas verlo:
    https://chachocarp.com/product-category/los-mas-vendidos
    Lo que quiero cambiar es:
    1. Tengo 24 productos en esa categoría y en vez de mostrarlo en dos páginas de 12 productos, los muestra en tres páginas de 9, 9 y 6 y queda fatal claro.
    2. No me ha mantenido la configuración del hover al pasar el ratón por encima de los productos. Me gustaría que la transparencia fuera azul y que las letras de «ver producto fueran naranaja» como en el módulo de tienda de la página principal.
    3. Me gustaría que apareciera una barra lateral izquierda para mostrar todas las categorías y subcategorías.
    ¿Cómo lo haaaaaaaaaaaaago?
    Gracias por tu ayuda

    1. Hola Miguel,

      1. Para cambiar el número de productos que se muestran en la tienda: Divi > Opciones del tema > General, hay una opción llamada “Número de productos mostrados en las páginas de archivo de WooCommerce”, pon ahí el número que quieras.

      2. Entiendo que en la portada has conseguido ese efecto utilizando las opciones del módulo “Tienda”. Para las categorías diría que no puedes utilizar Divi Builder, tendrías que crear los estilos añadiendo CSS personalizado.

      3. En Divi > Opciones del tema > General, hay una opción llamada “Diseño de la página de tienda y de la página de categorías para WooCommerce”, desde la que puedes seleccionar la barra lateral izquierda.

      Un saludo.

  2. Hola.
    Necesito una ayuda. Quiero quitar campos en la página «finalizar compra». Ya que no necesito demasiados, son productos descargables, virtuales.. Se paga con Paypal, por lo que excesivos campos de relleno resulta engorroso para el cliente.

    ¿Cómo puedo, si es que hay alguna forma, quitar varios de esos campos de relleno y dejar por ejemplo, Nombre y Mail.?

    Muchas gracias, está buenísimo el blog!.

    1. Hola,

      Hay varios plugins que te permiten modificar los campos de la página «Finalizar compra». Uno bastante completo es WooCommerce Checkout Manager.

      Un saludo.

    1. Hola Eduardo,

      Si buscas a alguien para llevarlos a cabo, puedes enviarme un mensaje a través de la página de contacto.

      Un saludo.

  3. Hola! me ha venido genial este tutorial, sabes si con elementor es posible modificar la visualizacion de un producto solamente (tengo un producto con varios ad ons ya que es customizable) , necesito que esta pagina de producto se muestre diferente a los otros. Es posible? No logro encontrar informacion en ningun lado

    1. Hola Erica,

      Sí, puedes asignarle una categoría que solo utilice ese producto, y crear una plantilla en Elementor con una regla para que solo se muestre en esa categoría.

      Un saludo.

  4. Buenas, tengo mucha lentitud en mi web (tanto en la web como en el backoffice de wordpress) Uso algunos plagins que fui deshabilitando pero no mejora la velocidad.
    Te puedo pedir ayuda?

    Gracias!!!

    1. Hola Nicolas,

      Claro, puedes escribirme a través del formulario de contacto contándome lo que necesitas y te envío un presupuesto.

      Un saludo.

  5. Muchas gracias por este post mañana empezare a subir productos a mi tienda y a personalizarla. Cuando tenga todo te escribiré para que cargue rápido la pagina. Una pregunta hay algún sistema para subir productos mas rápidamente es que estoy haciendo una tienda con unos 2000 productos. supongo que no pero ya estoy desesperado no vuelvo a hacer una tienda a alguien en mi vida jeje

    1. Hola Marcos,

      Puedes subirlos a través de un archivo CSV, pero igualmente tendrías que introducir toda la información en él, si no tienes el archivo ya preparado.

      Un saludo.

  6. Hola!, Bravo por tu post, me ha servido bastante, aunque hay una cosa que me falta y no encuentro por ninguna parte. Existe alguna manera de que cuando estás en el carrito y vas a pasar a finalizar compra, el método de envío se quede activo del carrito al paso de finalizar compra?. Es que es un engorro que por ejemplo, de recogida en tienda, envio gratuito o envío por mensajería, el que elijas en el carrito, al pasar se cambie y da lugar a confusión. Por otra parte, existe alguna forma de ordenar esos métodos de pago?, es que salen como les da la gana y a mi me interesaría que mis clientes eligiesen mi logística como predeterminada. Gracias de antemano!

    1. Hola Carlos,

      No sé si hay alguna manera para pasar la info de envío del carrito a finalizar compra. Una opción sería quitar la posibilidad de elegir el método de envío en el carrito y que se elija únicamente en finalizar compra.

      En cuanto a ordenar los métodos de pago, lo puedes ordenar fácilmente desde la pestaña «Pagos», en los ajustes de WooCommerce.

      Un saludo.

  7. Hola Sergio,
    a ver si puedes ayudarme porque me trae de cabeza esto… estoy tratando de personalizar el diseño de las categorías de producto de Woocommerce como si se tratara de una página más. Sin embargo, cuándo voy a ellas no me sale la opción de Activar el personalizador de Divi Builder. Quiero cambiar el diseño y poner la misma plantilla que tengo en la tienda. Gracias por tu ayuda!

  8. Hola, muy interesante gracias por el aporte. Te consulto tengo tienda con Astra-Woocommerce, pero la página de tienda no puedo modificar la barra de búsqueda de productos, cómo puedo ponerla en el cuerpo y sacarla de la barra lateral, intente modificar los hooks pero sin suerte.
    no utilizo plugins pagos.
    Gracias.

    1. Hola David,

      Puedes crear un shortcode del widget buscador de productos e introducirlo con Custom Layouts de Astra Pro donde lo necesites.

      Un saludo.

  9. Que tal estoy creando un tienda online woocommerce, pero me gustaria crear una pagina o personalizar la pagina para subir los productos ya que la que tiene por default no se me hace muy intuitiva la interfaz, pienso en algo simple tipo mercado libre….
    Sabes de algun pluggin o como podria podria hacerlo. Uso elementor y pense en crear la pagina, pero no conosco los shortcode o variables para que todo salga bien y el producto se publique correctamente al crearlo. ojala me puedas apoyar.

Deja un comentario

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