¿Cómo crear una Tienda Online en WordPress con WooCommerce?

Si necesitáis una Tienda Online, WordPress + WooCommerce es buena solución. Os explicamos este plugin con 2 completos tutoriales donde os explicamos el proceso completo.

En esta clase vamos a aprender a crear una Tienda Online en WordPress con el plugin WooCommerce. Para hacerlo, pondremos dos ejemplos prácticos: Una tienda online para la venta de cuadros y una tienda online de venta de partitura. Esta clase resume varios conceptos que hemos ido tratando en nuestro canal de YouTube y recopila varias clases . Veréis que es un poco larga pero, al finalizarla, seréis capaces de crear vuestra tienda online y entender cómo configurar WooCommerce. ¡Empezamos!

Tutoriales completos desde 0 y para principiantes

Tutorial utilizando el tema Storefront

En el siguiente vídeo podéis ver cómo configurar la tienda utilizando el tema gratis: Storefront.

Tutorial utilizando el tema GeneratePress

Hemos querido además proporcionaros otro tutorial con un tema distinto, GeneratePress. Es el que utilizamos en esta página web y nos gusta mucho para hacer SEO.

Introducción a WordPress

¿Qué es WordPress.org?

WordPress.org es la web del software de código abierto WordPress, que es el que recomendamos nosotros para hacer proyectos profesionales de diseño web y SEO.

Wordpress.org

Para poder utilizar WordPress para nuestra web profesional, necesitaremos alquilar un dominio y un hosting, donde instalaremos este software. Además de poder descargar el software desde esta página web, también podemos ver las páginas de descarga de plantillas, plugins, contactar con el soporte, colaborar, conocer al equipo y seguir su blog. Esta es una web que realmente consultamos muchísimo para informarnos, sobre todo de plugins. En muchas ocasiones puedes ponerte en contacto con los propios desarrolladores y ayudarles a testear, proponerles mejoras o notificar errores.

Una de las grandes ventajas de este software es su amplia comunidad y que es de código abierto. Es decir, que se puede utilizar el programa para cualquier propósito, se puede cambiar para hacer lo que queramos con él, y podemos distribuir el propio programa y copias que puedan ser modificadas por otros.

Declaración de derechos en WordPress

Esta libertad ha hecho que WordPress sea el software más utilizado en la creación de páginas web a nivel mundial. Su sistema principal y los complementos desarrollados por otros (plantillas y plugins) se adaptan de manera constante a los cambios de Internet. No obstante y debido a que todo el mundo tiene el código de WordPress se trata de una herramienta que deberemos estar continuamente actualizando y cambiando (a veces incluso cada mes) y que es muy fácil que sea pirateada. ¡No todo son ventajas!

Descargar WordPress

Para descargar el programa, simplemente deberemos ir a la página de descarga de WordPress y buscar el botón de descarga.

Cómo descargar WordPress

Instalar WordPress en local

Si no estamos preparados para comprar un dominio y hosting podemos instalar WordPress en nuestro ordenador. De esta manera podremos comprender como funciona sin invertir un solo euro. Para hacerlo, podéis utilizar el programa XAMPP. No obstante, para usuarios que no estén demasiado familiarizados con labores técnicas web a lo mejor es un poco lío.

Una vez descargado el programa lo instalaremos en nuestro ordenador y se nos creará una carpeta. A partir de ahora utilizaremos xampp-control.exe (para activar el servidor local) y htdocs para alojar nuestro WordPress.

Instalar WordPress en local

En htdocs extraemos la carpeta de descarga de WordPress.org

Instalar WordPress en local

Y luego renombramos la carpeta con el nombre del proyecto.

Instalar WordPress en local

Abrimos XAMPP Control y dejamos funcionando Apache y MySQL.

Instalar WordPress en local

Para que WordPress funcione, necesita una carpeta con sus archivos y una base de datos. Antes de poder continuar, necesitaremos crear una base de datos para utilizarla en nuestra instalación de WordPress. Para hacerlo, accederemos a la parte de Admin de MySQL.

Primero, nos fijamos en la parte de cuentas de usuario:

Instalar WordPress en local

Luego añadiremos la base de datos con el nombre:

Instalar WordPress en local

Para instalar WordPress, necesitamos la siguiente información:

  • Nombre de la base de datos: seosvetest
  • Usuario de la base de datos: root
  • Servidor de la base de datos: localhost

Vamos a Chrome, y tecleamos http://localhost/ + el nombre de la carpeta que hayamos utilizado antes para guardar los archivos de WordPress (en este caso, seosvetest)

Instalar WordPress en local

Inmediatamente después añadimos los datos que hemos recopilado en phpMyAdmin.

Instalar WordPress en local

Y ya nos permitirá ejecutar la instalación.

Instalar WordPress en local

Luego deberemos completar la información que nos pide el instalador. Ojo con copiar bien los nombres de acceso para poder acceder a la misma.

Instalar WordPress en local

Y nada, ya habríamos terminado.

Instalar WordPress en local

Si le damos a acceder podremos usar el nombre y la contraseña que hemos generado antes.

Loggin en WordPress

Y ya tendremos acceso al administrador de WordPress:

Escritorio en WordPress

Recordemos que esta instalación está en nuestro ordenador y que nos sirve para hacer pruebas, no es una web pública. Este sistema os vendrá bien para aprender WordPress pero muchos hostings disponen ya de plataformas de pruebas online y gratuitas sin necesidad de utilizar XAMPP.

Configurar enlaces permanentes para WooCommerce

Instalar WordPress en un servidor

Podéis instalar WordPress directamente en Sered, que es nuestro patrocinador. En el anterior enlace podéis encontrar el proceso y cómo conseguir 2 meses gratis. La instalación de WordPress suele ser un proceso sencillo en cualquier servidor. ¡No os olvidéis de apuntar el nombre de usuario y la contraseña!

Panel de control de WordPress 6.1

¿Qué vemos nosotros y que puede ver el usuario?
Una vez tenemos instalado WordPress y preparado el administrador hemos de entender que nosotros como administradores tendremos acceso al Escritorio de WordPress, desde donde podremos cambiar lo que ve el usuario dentro de nuestra página web. Si queremos entrar y salir del panel de control simplemente utilizaremos la fila negra superior y el icono de Escritorio o de home.

Panel del control de WordPress 6.0
Panel del control de WordPress 6.0
Tema por defecto en WordPress 6.0
Tema por defecto en WordPress 6.0

Escritorio, inicio y actualizaciones

En la pestaña inicio nos indicará los primeros pasos y acciones que debemos realizar para configurar nuestro WordPress. Podéis seguir su guía, aunque nosotros os recomendamos la nuestra ya que la hemos redactado para ahorrar pasos.

Escritorio de WordPress
Escritorio de WordPress

En la pestaña actualizaciones nos avisará de si las versiones de nuestra instalación, tema y plugins están desactualizadas. Al final del curso os explicaremos cómo hacer copias de seguridad así que recomendamos que si estáis tratando con una instalación de WordPress que ya tiene visitas y conversiones os esperéis hasta entonces para actualizar. La razón es que hacer actualizaciones puede romper nuestra página web así que tendremos que proceder con muchísimo cuidado.

Actualizaciones de WordPress
Actualizaciones de WordPress

Ajustes antes de empezar

En los ajustes generales, lo primero que haremos será cambiar el título del sitio y la descripción corta. ¡Muy importante! No cambiaremos ni la dirección de WordPress ni la dirección del sitio. Si lo cambiamos lo que ocurrirá es que nuestra instalación se romperá.

Podemos cambiar también la dirección de correo electrónico del administrador, el idioma del sitio e incluso la zona horaria, en formato de fecha, el formato de hora y cuando queremos que empiece la semana.

Ajustes generales de WordPress
Ajustes generales de WordPress

En los ajustes de escritura podemos seleccionar la categoría por defecto de las entradas, el formato de entradas por defecto y si deseamos publicar por correo electrónico.

Ajustes de escritura
Ajustes de escritura

En los ajustes de lectura podemos seleccionar si nuestra página de inicio muestra nuestras últimas entradas o alguna página estática que hayamos realizado anteriormente. También podemos seleccionar si disuadir a los motores de búsqueda de indexar este sitio. De esta manera, podemos evitar que Google indexe nuestro contenido y aparezcamos en los resultados de búsqueda.

Ajustes de lectura
Ajustes de lectura

En la sección de ajustes de comentarios podemos seleccionar los ajustes por defecto de las entradas, otros ajustes de comentarios y si queremos que WordPress nos envíe un correo electrónico cuando alguien escriba un comentario en alguna de nuestras entradas.

Ajustes de comentarios
Ajustes de comentarios

En ajustes de medios podemos seleccionar los tamaños de las imágenes. ¡Importante! Es conveniente desclickear la opción de “Organizar mis archivos en carpetas basadas en mes y año”

Ajustes de medios
Ajustes de medios

En los ajustes de los enlaces permanentes cambiaremos la estructura de URL de WordPress. Esto es especialmente importante en el SEO ya que tener URLs limpias es uno de los factores de los que depende esta técnica de marketing digital.

Ajustes de los enlaces permanentes
Ajustes de los enlaces permanentes

En la pestaña de privacidad añadiremos nuestra página de Política de privacidad. Os recomendamos que os asesore un especialista para cumplir perfectamente con este punto.

Privacidad en WordPress
Privacidad en WordPress

Diseño Web con WordPress

Antes de comenzar con esta sección sería interesante repasar el curso de diseño gráfico-web, donde hablamos de algunos conceptos fundamentales que deberéis tener preparados antes de meteros con WordPress. Los más importantes son:

  • El logotipo (a poder ser en un png con transparencia).
  • El favicon
  • Los colores corporativos
  • La tipografía

Opción 1: Instalar y configurar StoreFront

Lo primero es seleccionar la plantilla. En este caso utilizaremos storefront (la plantilla oficial de WooCommerce) pero que sepáis que hay muchísimas más. Podéis buscar otras plantillas desde Apariencia > Temas buscando WooCommerce:

Instalar y configurar StoreFront
Instalar y configurar StoreFront

Una vez instalado el tema lo podéis personalizar. Lo mejor es ir de arriba a abajo poco a poco rellenando todos los campos. Sería interesante contar con toda la parte de diseño gráfico-web preparada antes de llegar a esta parte.

Instalar y configurar StoreFront

En Apariencia > Menús encontraréis cómo cambiar el menú superior:

Instalar y configurar StoreFront

En Apariencia > Widgets encontraréis cómo cambiar la barra lateral y el footer. Hay muchos Widgets que podéis utilizar.

Instalar y configurar StoreFront

Configurar estas secciones depende de las necesidades de vuestra tienda. La barra lateral os puede venir bien para destacar productos o categorías. En el footer es bastante frecuente encontrar enlaces a las condiciones de compra o envío, la cuenta de los clientes, información sobre la empresa, etc.

En Apariencia > Storefront os dará la posibilidad de instalar una portada y productos de prueba. Esto os vendrá bien para crear contenido DEMO y así solo tener que sustituir los bloques por vuestros propios contenidos. ¡Recordad eliminar el contenido DEMO una vez sustituido!

Instalar y configurar StoreFront

Opción 2: Instalar y configurar GeneratePress

Este año hemos querido utilizar GeneratePress para el tutorial. El tema gratis permite una configuración básica bastante buena.

El GenteratePress premium es el que hemos utilizado en esta web. Nos parece muy adecuado para SEO, por eso lo recomendamos. Os dejamos un enlace de afiliados por si os interesa contratarlo:

WooCommerce

Instalar WooCommerce

Si ya tenemos nuestra instalación de WordPress preparada y bien configurada podemos ir directamente a Plugins > Añadir nuevo y buscar WooCommerce.

Instalar WooCommerce

Asistente de configuración

Añadiremos primero los detalles y el sector.

Asistente de configuración de WooCommerce

Inmediatamente después veréis que os pide que indiquéis el tipo de producto que tenéis. Unos son gratis y otros de pago. Aunque vuestros tipos de producto coincidan con los de pago no tenéis que pagar plugins extra a WooCommerce ya que en ocasiones hay opciones gratuitas que hacen lo mismo. Las veremos un poco más adelante.

Asistente de configuración de WooCommerce

En “detalles del negocio” veremos que nos hace como una pequeña encuesta. Si ponemos que no vendemos en otro lugar nos dejará instalar herramientas como Facebook, Mailchimp o Google Ads. De nuevo recomendamos saltar este paso para elegir nosotros luego la herramienta que más nos convenga, ya que no tiene porqué ser la que nos recomienda el propio WooCommerce.

Asistente de configuración de WooCommerce

Teóricamente a estas alturas ya deberíamos haber diseñado nuestra web y por lo tanto deberíamos tener el tema preparado. No obstante, en “Temas” encontraréis opciones compatibles con WooCommerce, tanto gratuitas como de pago.

Asistente de configuración de WooCommerce

Por último nos pedirá instalar 2 plugins extra pero de nuevo os recomendamos que lo evitéis. Recordad que para mejorar la velocidad de nuestra instalación debemos instalar cuantos menos plugins sean posibles. En especial no nos gusta nada Jetpack.

Asistente de configuración de WooCommerce

Una vez terminemos nos devolverá al panel de control y ya podremos ir a la sección “Ajustes”.

Asistente de configuración de WooCommerce

Ajustes de WooCommerce

Es la primera sección que deberemos configurar. Es bastante extensa pero destacaremos algunas secciones importantes.

Ajustes de WooCommerce

En general encontraremos muchas opciones, sobretodo relacionadas con nuestra tienda. Deberemos seleccionar las ubicaciones de venta, si queremos que se apliquen impuestos, el tipo de moneda…

Ajustes de WooCommerce
Ajustes de WooCommerce

En productos añadiremos todas las opciones relacionadas con los mismos. Esto ya depende muchísimo de vuestro proyecto. Os recomendamos repasar todas las opciones para comprobar la mejor manera de representarlos en vuestra tienda online.

Ajustes de WooCommerce

En envío seleccionaremos las opciones de envío más adecuadas. En general las opciones de envío son bastante limitadas, por lo que dependiendo del sistema que tengamos es posible que tengamos que instalar uno o varios plugins a parte. Lo que se suele recomendar es hablar antes con la empresa encargada de los envíos para sistematizar algún tipo de sistema de precios. Cuando tengamos los datos de envío entonces intentaremos configurarlos desde esta sección. Si las opciones no se ajustan a nuestras tarifas y precios de envío deberemos buscar plugins extra.

Ajustes de WooCommerce

En la sección de pagos añadiremos las formas de pago que queremos que se muestren en nuestra tienda online. Las opciones de pago que véis en la imagen son las predeterminadas por WooCommerce. Para empezar, podemos por ejemplo hacernos una cuenta de Paypal. No obstante, este sistema tiene unas tarifas elevadas. En España es muy común hablar con los bancos para conseguir un TPV virtual, normalmente Redsys. Se puede instalar un plugin aparte y es bastante fácil de configurar. No obstante, necesitaréis la asistencia de vuestro banco para terminar de configurarlo.

Ajustes de WooCommerce

En cuentas y privacidad encontraréis todas las opciones de política de privacidad y gestión de datos personales. Es muy importante cumplir con las leyes de cada país en esta materia y en ocasiones se necesita el asesoramiento de un abogado o de un gestor de protección de datos. Si estáis en España podéis revisar el reglamento general de protección de datos y privacidad online de la Unión Europea.

Ajustes de WooCommerce

En correos electrónicos podréis editar y rediseñar los correos que genera vuestra tienda online, ya sean para vosotros o para vuestros clientes. Os recomendamos testear el camino del usuario a la conversión para comprobar que todos los mensajes e información se muestran tal y como vosotros queréis.

Ajustes de WooCommerce

En Avanzado podréis asignar páginas, cambiar URL y encontraréis otras movidas técnicas que podéis explorar.

Ajustes de WooCommerce

Cómo diseñar una categoría, un producto y la home

Lo primero que haremos será añadir una categoría desde Productos > Categorías. Para hacerlo, miraremos a las categorías que hemos definido en nuestra arquitectura SEO y añadiremos los contenidos necesarios: Nombre, descripción y miniatura.

Cómo diseñar una categoría, un producto y la home
Cómo diseñar una categoría, un producto y la home

Para configurar un producto correctamente antes deberíamos haber asignado una palabra clave en nuestra arquitectura SEO y haber preparado los contenidos que se van a mostrar.

Cómo diseñar una categoría, un producto y la home

Añadir nuevo producto es muy similar a añadir una nueva entrada. No obstante, a veces se hace un poco lioso porque no estamos acostumbrados a la disposición de los elementos. Esta guía os puede ser de utilidad.

Lo primero será añadir el nombre del producto, su descripción completa y la categoría:

Crear Tienda Online en WordPress + WooCommerce 2021

Después añadiremos todos los datos del producto. En esta sección hay múltiples opciones y su configuración dependerá de los ajustes generales que hayáis configurado en la sección anterior. Os recomendamos que reviséis muy bien todas las opciones y vayáis comprobando cómo quedan en la página de producto.

Crear Tienda Online en WordPress + WooCommerce 2021

Añadiremos también la descripción corta, la imagen del producto y la galería.

Crear Tienda Online en WordPress + WooCommerce 2021
Crear Tienda Online en WordPress + WooCommerce 2021

Por último, configuraremos la página de inicio de nuestra Tienda Online. Para hacerlo, crearemos una página nueva. Dentro de la misma podemos añadir algunos bloques y completar opciones.

Este se llama fondo:

Crear Tienda Online en WordPress + WooCommerce 2021

Estos son los de categoría y producto:

Crear Tienda Online en WordPress + WooCommerce 2021

Tenéis muchísimos bloques más en Gutenberg. Os recomendamos repasar el curso completo de WordPress ya que este CMS nos permite crear casi cualquier proyecto. Eso sí, deberéis investigar para encontrar las mejores opciones.

Pedidos

Cuando tengáis la tienda en marcha los pedidos irán apareciendo en esta sección.

Pedidos en WooCommerce

Si entráis en cada pedido encontraréis toda la información y podréis marcar los pedidos como enviados. De esta manera WooCommerce enviará automáticamente los mensajes a los clientes.

Pedidos en WooCommerce

Cupones

Desde esta sección podéis añadir cupones de descuento. Ojo con comprobar siempre que se aplican como vosotros deseáis, no sea que puedan ser acumulados si el usuario los pone varias veces. De nuevo, esta es una funcionalidad que se puede expandir con diversos plugins.

Pedidos en WooCommerce

Estado

La pestaña de estado del sistema os ayudará a comprender si hay algún tipo de configuración que no le gusta a WooCommerce.

Estado del sistema en WooCommerce

Extensiones

El plugin de WooCommerce es bastante completo pero tal y como hemos ido anunciando tiene sus limitaciones. En la pestaña extensiones encontraréis las que son de pago. Pero no tenéis porqué utilizar estas. Muchas de estas funcionalidades pueden resolverse con plugins o temas que no salen en esta página. Antes de comprar nada, os invitamos a que investigueis las distintas opciones que hay desde el apartado de plugins de wordpress.org.

Extensiones en WooCommerce

Análisis

Desde esta sección podréis medir las ventas de vuestra tienda. Está bastante bien, aunque nosotros preferimos los datos de comercio electrónico mejorado de Google Analytics. No obstante, dependiendo del contexto en el que estéis aplicando la estrategia de implementación de la tienda, es posible que algunos datos os puedan servir para llevar mejor las métricas de vuestro negocio. Os animamos a que descubráis todas las opciones y seleccionéis las métricas clave más adecuadas para vuestro proyecto.

Análisis en WooCommerce

Configuraciones extra

Otros plugins para tiendas online

WordPress y WooCommece se pueden configurar hasta el infinito debido a la posibilidad de añadir distintas plantillas y plugins. Podéis encontrar plugins gratuitos en WordPress.org, plugins oficiales de pago en WooCommerce y más temas y plugins en marketplaces como Envato.

WooCommerce puede parecer “gratis” pero no lo es. Crear una Tienda Online que se adapte a las necesidades de vuestro negocio puede pasar por comprar plugins de pago, pagar a un desarrollador o bien meter muchísimas horas hasta que tengáis el proyecto a vuestro gusto y el de vuestros futuros clientes.

Rank Math para tiendas online

La gestión de este plugin es muy extensa, pero hay varios aspectos fundamentales que os recomendamos activar, como la parte de WooCommerce, la de analítica y el Sitemap. Podéis ver un tutorial completo de Rank Math en este enlace.

Escritorio Rank Math 2022

Conseguir ventas en una tienda online

La mayor parte de nuestros alumnos y clientes están totalmente obsesionados con aprender herramientas: WordPress, WooCommerce o con configurar la tienda. Obviamente esto es importante pero las ventas no van a llegar simplemente por disponer de una tienda online. Las ventas van a llegar gracias al tráfico orgánico proveniente de buscadores o redes sociales, por campañas o por otras acciones offline.


No os obsesionéis con tener una tienda perfecta y preciosa. No pasa nada si al principio es sencilla o no termina de ajustarse a lo que queréis. Centrad vuestros esfuerzos en conseguir tráfico e ir mejorando poco a poco. Estar en Internet ya no significa vender. Os recomendamos repasar nuestro curso de SEO y de Community Manager para completar esta clase. En las siguientes clases hablaremos de email marketing, campañas en Google o Facebook Ads y muchas cosas más. ¡Atentos y atentas al canal!

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola