Cómo crear una Tienda Online con WordPress y WooCommerce

Con o sin pandemia, el comercio electrónico no para de crecer. El año pasado facturó 1.655 billones de euros en todo el mundo y se espera que en 2023 supere los 2.272 billones de euros. ¿Lo mejor? Que cada vez hay más pequeños emprendedores en este sector.

como crear una tienda online wordpress

Y es lógico porque las barreras de entrada para cualquier persona que se lo quiera tomar en serio son cada vez más bajas. Sin ir más lejos, la plataforma de tienda online nº1 en el mundo, WordPress + WooCommerce, es gratis, sí, gratis.

Siendo esto así, hemos decido hacer una reedición desde cero de uno de los posts con más éxito de este blog que es precisamente un tutorial de cómo crear una tienda online con WooCommerce.

El post original fue publicado en su momento por Francisco Javier Carazo, un profesional especializado en WooCommerce que ofrece, además, en la web de su empresa, Codection, una amplia gama de plugins para WooCommerce que te recomiendo que veas porque te pueden ser muy útiles.

¿Por qué está arrasando tanto la combinación WordPress + WooCommerce?

Hay muchas razones, pero seguramente siendo la principal que tanto WordPress, la plataforma web (que lo es también de este blog) como WooCommerce (un plugin que se instala en WordPress y le añade las funcionalidades de una tienda online) son software libre y código abierto que cualquiera puede descargarse y usar gratis.

El único coste es el servicio de hosting y dominio, necesarios para disponer de un servidor web conectado a Internet en el que operar este software. Por unos 5-6€ al mes ya puedes contratarlo con una calidad bastante decente. Y con eso ya puedes tener una tienda online profesional.

Pero lo mejor es que, con la guía adecuada, incluso siendo completamente nuevo en esto, el proceso de crear la tienda, configurarla y crear un diseño estético que quede bien para tu tienda es más fácil de lo que piensas. No me entiendas mal, tampoco es algo trivial, pero con ganas y la guía adecuada se puede conseguir perfectamente. Lo verás aquí.

De hecho, el problema más importante hay en esto es que prácticamente todos los tutoriales se quedan en la más absoluta superficie porque, aun siendo algo asequible para alguien que quiera tomárselo en serio, hay que echarle algo de tiempo y cariño para trabajar bien los detalles.

Por eso, estos tutoriales suelen crear tiendas que son juguetitos que de cara a la realidad se quedan cojos por todos los lados y por eso mismo hemos hecho un gran esfuerzo para crear una tienda online real.

¿Qué es WooCommerce y para qué sirve?

Si eres lector asiduo de este blog, no es necesario explicarte qué es WordPress, pero si has aterrizado aquí por primera vez, decirte que WordPress es un sistema gestor de contenido que es software libre y código abierto, líder del mercado y muy popular para webs de tamaño pequeño/mediano y blogs. Es otro ejemplo más de los increíbles proyectos de software libre que podemos disfrutar en la actualidad.

Aquí te cuento con todo detalle qué es WordPress exactamente:

que es wordpress ¿Qué es WordPress, para qué sirve y cómo funciona?

El 31,7% de las webs usan WordPress. Y no sólo blogs, todo tipo de webs. Aquí te explico qué es WordPress, cómo funciona y qué lo hace especial.

WooCommerce, por otro lado, es un plugin para WordPress que añade la funcionalidad que necesita una tienda online.

Además, de esto, se ha convertido en un auténtico ecosistema con una infinidad de productos de terceros, gratuitos y de pago, con todo tipo de mejoras y extensiones que te puedas imaginar. En este post profundizamos más en este plugin:

que es woocommerce Qué es WooCommerce, para qué sirve y cómo funciona

Si quieres crear una tienda online, una de las mejores opciones (si no la mejor) es WooCommerce. Aquí te explico qué es exactamente.

Como puedes ver en la estadística enlazada más arriba en este post, las tiendas online WordPress + WooCommerce son, con diferencia, las más usadas en todo el mundo.

Esto es así principalmente por estas razones:

  • Es gratis y se puede usar libremente.
  • Es muy potente y escalable, se pueden crear desde pequeñas tiendas muy sencillas para un autónomo con su pequeño negocio hasta tiendas con cientos de miles de productos.
  • Es seguro: 100% compatible con protocolos seguros HTTPS (SSL).
  • Es compatible con prácticamente la totalidad de pasarelas y métodos de pago conocidos.
  • No requiere conocimientos en programación: con un poco de ganas, tú lo puedes instalar, diseñar y configurar perfectamente tu tienda.
  • Cuentas con una gigantesca comunidad de usuarios y soporte, tanto gratis vía foros como profesional vía empresas que ofrecen sus servicios.

¿Qué ventajas aporta WordPress a WooCommerce?

Pero es que, además, la combinación con WordPress, el hecho de ser un plugin dentro de WordPress es una jugada genial porque añade muchas ventajas a las que tiene ya de por sí WooCommerce como solución de tienda online.

¿Por qué?

Porque añade toda la potencia que tienen WordPress y su gigantesco ecosistema a WooCommerce.

Por ejemplo:

  • Al venir WordPress con la mejor solución de blog del mercado, de ese blog te puedes aprovechar también para tu tiende online. Un blog es una gran estrategia SEO para hacer las visitas a tu tienda con contenidos de valor que complementen el catálogo de productos.
  • Los temas (plantillas de diseño) y plugins para WordPress los puedes aplicar también a tu tienda, es decir, dispones de decenas de miles de diseños web prediseñados (los temas) y puedas aprovechar las funcionalidades añadidas por plugins también para tu tienda.
  • La interacción con redes sociales también la tienes integrada.
  • Etc., etc., etc.

El tutorial, lo vamos a desarrollar basándonos en los vídeos que he publicado en el canal YouTube de Ciudadano 2.0.

Vistazo al resultado final de la tienda que crearemos

Empezamos con un vistazo al resultado final de la tienda que vamos a crear:

Te recomiendo que veas el vídeo con calma hasta al final porque estoy seguro de que te sorprenderás de lo completa que es la tienda que vamos a crear. Estoy seguro de que, si no te dijéramos que es para un tutorial, la tomarías por una tienda real.

Contratar el hosting y dominio e instalar WordPress y plugins

El tutorial (que es más un curso completo que un tutorial) tiene cuatro bloques fundamentales:

  1. Los preparativos para poder crear la tienda.
  2. La creación de la web de base.
  3. La creación de la tienda online como tal dentro de la web anterior.
  4. Una prueba a fondo final para cerciorarnos de que todo funciona como esperamos.

Empezamos con los preparativos.

Cómo contratar el mejor hosting para una tienda WooCommerce

El primer paso en esto es contratar la infraestructura para nuestra web: un dominio de Internet para la tienda y un servidor conectado a Internet.

Esto se hace con un servicio de hosting donde contrataremos ambas cosas a la vez y se hace todo online en un momento de una manera muy sencilla como podrás en el vídeo. Además, te sorprenderás de lo barato que resulta. Es realmente un regalo para lo que obtienes a cambio.

Cómo instalar WordPress en el hosting de Webempresa

Con la infraestructura operativa toca crear la web de base, la cual la crearemos con WordPress que es la plataforma web más popular del mundo y, entre otras razones, por esa, la mejor opción con diferencia para lo que vamos a hacer.

Como hosting, se ha elegido en este caso a Webempresa por las razones que se explican en el propio vídeo.

Como verás en el vídeo, gracias a los asistentes de Webempresa, es un proceso trivial, así que no hay que tenerle ningún miedo.

Cómo configurar WordPress para una tienda online

Una vez instalado, WordPress necesita una serie de configuraciones muy básicas para adaptarlo a tus necesidades y funcionar correctamente.

En el vídeo de arribalo explico.

Instalar WooCommerce en WordPress + tema y otros plugins imprescindibles

Una instalación de WordPress “de fábrica” no lleva la funcionalidad necesaria para poder implementar una tienda online, para eso hay que añadir los “plugins”, unas aplicaciones que añaden funcionalidad a WordPress para propósitos específicos.

El plugin principal es, por supuesto, el de WooCommerce, pero para crear una tienda online realmente “redonda” conviene añadir algunos más que instalo también en este tutorial.

Además, instalará también una plantilla de diseño, un “tema” de WordPress como también se llama.

Esto permite no tener que crear nuestro diseño desde cero, sino partir de un diseño “prefabricado” que luego, sin embargo, podemos retocar y personalizar ampliamente (poner nuestro logo, cambiar colores, tipos y tamaños de letra, etc.).

Esto permite que gente que no son diseñadores profesionales puedan crear diseños que queden prácticamente profesionales, a la vez que les ahora muchísimo tiempo y, sin embargo, no les limita demasiado en las posibilidades de personalización de la web y la tienda.

Crear la web básica y su diseño

Ahora, con WordPress, WooCommerce y todo lo demás instalado, ya podemos empezar con el diseño y personalización de la web.

Cómo personalizar un tema WordPress para una Tienda WooCommerce

Aquí es importante comprender que vamos a trabajar en dos niveles:

  1. El diseño general de toda la web, igual en todas las páginas. Es lo que marca el estilo general de nuestro diseño y nuestra web. Esto se hace en el tema WordPress.
  2. El diseño de cada una de las páginas que requieren un diseño específico (o una “composición” específica podríamos decir). Eso se hace con el plugin Elementor que hemos instalado antes.

En el vídeo de arriba verás cómo se hace la primera parte: el diseño general de la web y la tienda.

Merece una mención especial el tema del blog añadido a la web de la tienda al que aludo brevemente: te recomiendo mucho añadir un blog a tu tienda online porque es un "truco" fantástico para posicionar tu tienda mucho mejor en Google.

La idea es que, con contenidos útiles para el perfil del público que quieres atraer para tu tienda publicados en el blog, vas a incrementar también mucho el tráfico de tu tienda y este va a ser, además, un tráfico de calidad, de un perfil de cliente adecuado.

Aquí puedes aprender cómo crear un buen blog para tu tienda online:

como crear un blog Cómo crear un blog paso a paso desde cero

Crear un blog es fácil. ✅ Aquí lo aprenderás desde cero ✚ Cómo crear buenos contenidos, posicionar tu web, monetizar tu blog y mucho más…

Como esto es un tema que no solamente toca la problemática en sí de crear un blog, sino también la disciplina de cómo posicionar contenidos en Google, es decir, el SEO, aquí te dejo también dos lecturas imprescindibles para abordar estos temas.

que es seo ¿Qué es el SEO, por qué es tan importante y cómo funciona?

En este y muchos otros sitios, más del 90% del tráfico viene por SEO. ✅ Conoce qué es el SEO, por qué importa tanto y cómo empezar a usarlo ya.

estrategias seo para ecommerce. Estrategias SEO para Ecommerce en el mundo real - Guía práctica

No es lo mismo el SEO para blogs que el SEO para YouTube, que cuando hablamos de Ecommerce. Cuando hablamos de SEO, dependiendo del tipo de web del que se trate, cambian las estrategias que debes aplicar. Hoy me voy a centrar en el SEO para Ecommerce.

En el tutorial de creación de la tienda no podemos entrar mucho en este tema porque se desviaría totalmente del objetivo del tutorial, pero en estas lecturas vas a encontrar la información necesaria para implementar un blog exitoso junto a tu tienda.

Cómo diseñar una tienda WooCommerce con Elementor

Y en ese vídeo vas a ver cómo se crean diseños específicos del contenido de aquellas páginas que lo necesitan. Para eso hace falta un “Page Builder” como Elementor que hemos elegido porque nos ha parecido la mejor opción para este caso.

Si has visto ya el vídeo, te habrás dado cuenta de que aquí hemos usado la versión gratuita de Elementor que ha sido más que suficiente para lograr el resultado que has podido ver en el primer vídeo.

¿A qué es una gozada lo que se puede hacer con este plugin?

Crear la tienda online con WooCommerce

Lo que hemos visto hasta ahora en el diseño de nuestra tienda online ha sido la parte estética.

En los siguientes vídeos vamos a diseñar el comportamiento de nuestra tienda para lo cual tenemos que realizar una serie de ajustes que te explicaré en detalle.

Ajustes y configuración general de una Tienda Online WooCommerce

Como es lógico, empezamos con lo más básico: los ajustes generales de la tienda:

Incluso en esta parte tan básica, otros vídeos ya se suelen quedar muy cortos, pero te aseguro que conmigo eso no te va a pasar 😊

Ajustes de producto en WooCommerce: cómo configurarlos correctamente

Vamos ahora a la parte más específica de la configuración, empezamos con los ajustes de producto:

Como has podido ver, los ajustes de producto en WooCommerce son sencillos y se configuran rápido, pero tienen su miga, es imprescindible aprender a configurarlos bien.

Cómo configurar impuestos en WooCommerce correctamente

Los impuestos en una tienda online (y cualquier negocio) son un tema complejo, según los países a los que vendas, qué tipo de productos, etc., puede haber muchas variantes de impuestos que hay que tener en cuenta.

Por suerte, WooCommerce tiene suficientes ajustes para configurar esta parte bien tal como la necesitas en tu negocio para que no tengas problemas.

Además, te voy a dar algún que otro consejo y truco en la configuración te va a hacer la vida más fácil en este tema.

Cómo configurar envíos en WooCommerce correctamente

En este vídeo sobre la configuración de los envíos en WooCommerce ocurre muy parecido al vídeo anterior: hay muchas variantes y combinatorias posibles, según cómo sea tu negocio en particular, que hay que dejar bien configuradas para que todo vaya sobre ruedas.

Y también aquí, por suerte, WooCommerce tiene suficientes ajustes para configurar esta parte bien y cuentas conmigo para explicártelo todo y añadir algún que otro consejo y truco que te va a venir de perlas.

Elegir la pasarela de pago, configurar pagos en WooCommerce e instalar Stripe

La parte de configuración de los pagos en una tienda online seguramente sea lo que más quebraderos de cabeza le produce a quienes quieren montar una tienda online.

Pero no te preocupes, aquí no solamente te va a explicar cómo configurar esta parte correctamente, sino que también te va a explicar a fondo las opciones que existen, cómo funciona exactamente cada una, sus diferencias, por qué opta en el tutorial por Stripe y cuál sería la más recomendable para tu caso.

Las pasarelas bancarias a las que hago referencia en el vídeo, son principalmente dos en España: RedSys y Ceca. Siendo la primera mucho más popular que la segunda. Dependiendo cuál sea tu banco, podrás contratar una u otra.

Tienen comisiones más bajas que Stripe, cuestión especialmente importante en tiendas con márgenes ajustados, y ofrecen la seguridad y popularidad al usuario de que son muy conocidas también en los terminales de pagos de los comercios físicos.

Sin embargo, su contratación es a través del banco, por lo que no es inmediato de poner en marcha y en ocasiones, si no se tiene un buen soporte, es posible que tengas problemas técnicos instalándolas o usándolas.

Por eso te recomiendo que uses algunos plugins que aparte de ofrecer características premium, ofrecen un soporte rápido y personalizado, para facilitarte su uso. En concreto este plugin para RedSys y este otro plugin para Ceca.

Cómo crear categorías de producto en WooCommerce

Una condición obvia en cualquier catálogo de producto para que funcione bien es que esté bien organizado. Para esto están las categorías de producto en WooCommerce.

En este vídeo, se explican a fondo y te damos pautas para que organices las tuyas del mejor modo posible.

Cómo crear atributos de productos generales en WooCommerce

En este vídeo se explica cómo configurar WooCommerce con los atributos comunes que necesitan todos tus productos. Es decir, si trabajas con cosas como tallas y colores, por ejemplo, cómo decirle a WooCommerce que vas a necesitar tallas y colores en todos tus productos.

Espero que lo disfrutes 😊

Añadir un filtro de producto y buscador a una tienda WooCommerce

Dos elementos fundamentales en una tienda online bien hecha para hacerla atractiva y cómoda para el usuario son la inclusión de un buscador de productos y un filtro de producto para poder localizar productos con uno o varios atributos.

Por ejemplo: zapatillas de ballet de color rosa, talla M.

Este tema del buscador y filtro de productos es otro de esos detalles a los que aludía al principio cuando decía que prácticamente todos los tutoriales de tiendas online lo que crean, como mucho, son juguetes que en la práctica sirven para poco ya que no incluyen detalles claves como éste.

Cómo crear productos simples en WooCommerce

Ahora toca ya la creación de productos en nuestra tienda WooCommerce. Vamos a empezar con productos simples que son productos únicos, los que no tienen variaciones de tallas, colores, etc.

Aquí vas a ver también los aspectos básicos en la gestión de los productos de tu tienda: la gestión de inventario, la asignación de los precios y descuentos, ofertas limitadas en el tiempo, etc.

Pero, además de todo esto, también hay unos cuantos consejos y trucos que tiran de mi experiencia en este caso y que te servirán para que trabajes de una manera mucho más eficiente y gestiones tu tienda como un profesional.

Cómo crear productos personalizados (variables) en WooCommerce

Sobre la base anterior, en este vídeo vas a ver cómo trabajar con productos variables que son los que sí tienen atributos específicos que pueden variar.

Esto tiene más miga de lo que parece porque las variaciones en los atributos pueden tener consecuencias más allá de los propios cambios en sus atributos. Por ejemplo: ciertas variaciones pueden tener un precio diferente a las demás.

Cómo editar productos rápido en WooCommerce

Hay algunas pequeñas acciones que se hacen con frecuencia en los productos como pasar ciertos productos a la sección de destacados, por ejemplo. WooCommerce ya tiene pensadas vías para que estas ediciones se puedan hacer ágiles, en este vídeo puedes verlo:

Y con esto, en realidad, ya hemos terminado realmente con la tienda, ahora sólo queda probar que todo funciona bien que es lo que vamos a hacer en el último vídeo que es el que viene a continuación.

Probar la tienda a fondo para detectar posibles errores

Con la ilusión de la tienda recién creada, es muy tentador lanzarse inmediatamente a ponerla visible en público y vender.

Pero no deberías hacerlo, lo más probable, especialmente si es la primera vez que creas una, es que se te haya colado algún que otro pequeño (o gran error).

Así que, en este último vídeo, Alegría te va a enseñar cómo probar tu tienda a fondo para cerciorarte de que todo está bien antes de dar el salto y ponerla a disposición del público.

Y a partir de aquí, ¡a disfrutar de tu nueva tienda!

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Alegría

Alegría de www.tuwebconalegria.com es la fundadora de las tiendas online www.por-alegria.com y www.elclubdelbailarin.com desde hace ya 14 años.

Diseñadora y desarrolladora de páginas web y tiendas online. Apasionada del universo SEO, diseño web y marketing digital.


1.117 comentarios en «Cómo crear una Tienda Online con WordPress y WooCommerce»

  1. Hola!
    He tenido la suerte de poder montar mi tienda online gracias a vuestro tutorial, en realidad la he montado dos veces porque cometí un fallo y tuve que empezar de cero.
    Ahora me encuentro con otro error, pero no encuentro la forma de solucionarlo y por eso acudo a vosotros. El menú principal de la página, cuando tiene que adaptarse al tamaño de una tablet y de un móvil, automáticamente cambia al icono de menú hamburguesa, pero al clicar no se despliega nada. He intentado todo lo que he sabido pero no hay forma y por eso necesito vuestra ayuda.
    Muchas gracias de antemano!
    Esther.

    Responder
    • Hola Esther,

      Muchas gracias por tus palabras. Nos alegra mucho saber que nuestros tutoriales os ayudan a conseguir vuestros objetivos, sin embargo no podemos ayudarte con una duda concreta, puesto que necesitaríamos acceder a la tienda que has creado.
      Te animo a consultar algún foro, donde seguramente encuentres gente que haya tenido el mismo problema.

      ¡Un saludo!,
      Lucía

      Responder
  2. Hola a tod@s!
    Seguí paso a paso el tutorial para crear mi tienda virtual. Ya tenía la página web diseñada, con el plugin para cookies GDPR Cookie Compliance (CCPA, PIPEDA ready). Aparentemente entra en conflicto con Woocommerce, porque la apariencia del sitio cambión totalmente cuando lo instalé (para comprobarlo desinstale el plugin y el sitio volvió a la normalidad). ¿Me podrían recomendar un plugin similar para reemplazarlo? Que tenga las dos capas de avisos como éste. ¡Gracias!

    Responder
  3. Hola muy buena pagina y los videos... me pudiera pasar el proyecto(Sitio compactado) por correo me da un problema y quiero analizarlo el de usted. Gracias de Antemano

    Responder
  4. Buenos días, perdón por escribir ahora pero me topé con este excepcional tutorial. Soy usuario básico de WordPress, hace 10 años lo manejaba mejor pero estoy un poco oxidado. Tengo un par de webs en otra compañía con editores parecidos al Elementor y ya me he hecho a ellos, pero he empezado un nuevo proyecto. Resumo. He seguido los pasos de Alegría (muy bien detallados por cierto) Pero hay un par de cosas que no logro solucionar. Primero, la edición de cabecera y pie de página no puedo hacerla por Elementor. Y la segunda, la que más me está dando problemas, es que en las categorías y subcategorías de la web que estoy haciendo, al entrar la página cambia por completo, tiene un banner celeste de encabezado y no tiene la mimas apariencia de la página principal y las de contacto, etc. Es en las páginas Mi cuenta, Carrito, y las categorías y Subcategorías del enlace Tienda. He de añadir que tengo Astra con Simply Natural. Perdón por la tardanza al escribir esto pero necesito ayuda. Muchísimas gracias de antemano. Saludos.

    Responder
    • Hola Luis,

      La cabecera y el pie de página se editan desde el apartado de "Apariencia" del menú de WordPress, no desde Elementor. La otra duda es demasiado específica para que te podamos ayudar.

      ¡Un saludo!,
      Lucía

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).