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.
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.
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.
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.
En htdocs extraemos la carpeta de descarga de WordPress.org
Y luego renombramos la carpeta con el nombre del proyecto.
Abrimos XAMPP Control y dejamos funcionando Apache y MySQL.
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:
Luego añadiremos la base de datos con el nombre:
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)
Inmediatamente después añadimos los datos que hemos recopilado en phpMyAdmin.
Y ya nos permitirá ejecutar la instalación.
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.
Y nada, ya habríamos terminado.
Si le damos a acceder podremos usar el nombre y la contraseña que hemos generado antes.
Y ya tendremos acceso al administrador de 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.
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.
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.
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.
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.
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.
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.
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.
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”
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.
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.
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:
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.
En Apariencia > Menús encontraréis cómo cambiar el menú superior:
En Apariencia > Widgets encontraréis cómo cambiar la barra lateral y el footer. Hay muchos Widgets que podéis utilizar.
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!
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.
Asistente de configuración
Añadiremos primero los detalles y el sector.
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.
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.
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.
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.
Una vez terminemos nos devolverá al panel de control y ya podremos ir a la sección “Ajustes”.
Ajustes de WooCommerce
Es la primera sección que deberemos configurar. Es bastante extensa pero destacaremos algunas secciones importantes.
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…
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.
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.
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.
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.
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.
En Avanzado podréis asignar páginas, cambiar URL y encontraréis otras movidas técnicas que podéis explorar.
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.
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.
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:
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.
Añadiremos también la descripción corta, la imagen del producto y la galería.
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:
Estos son los de categoría y producto:
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.
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.
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.
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.
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.
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.
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.
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!
