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.

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 creear 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 de la mano de una experta con mucha experiencia, Alegría, para crear una tienda online real.

Por eso, encontrarás aquí también los anteriores comentarios de Francisco Javier, que fueron muchos, muy interesantes y siguen aportando un gran valor a día de hoy.

¿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:

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.

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, que, en realidad, ha sido creado por Alegría, dueña de poralegria.com y elclubdelbailarin.com, lo vamos a desarrollar basándonos en los vídeos que publicó en su momento 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.

Preparativos: 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 arriba Alegría las explica.

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 Alegría instala 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 alude brevemente Alegría: 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 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.

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 Alegría te va a 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 con Alegría 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, Alegría te va 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 con Alegría 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í Alegría 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.

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 la amplia experiencia de Alegría 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!