En este tutorial, te enseñaré cómo crear una tienda online. Lo vamos a hacer con WordPress y Woocommerce.
Con estas dos herramientas vamos a poder vender desde productos físicos, hasta digitales (infoproductos, por ejemplo).
WooCommerce es la mejor manera de convertir tu web de WordPress en una tienda de comercio electrónico completamente funcional. Aquí están los detalles:
- WooCommerce es un plugin de WordPress. Debe estar instalado y activado como cualquier otro complemento para funcionar.
- Es gratis y de código abierto, al igual que WordPress. No necesita ninguna licencia, las cosas no caducan y nadie viene a pedir dinero en ningún momento.
- Es el plugin de comercio electrónico más popular para WordPress.
- Es un plugin lleno de funcionalidades y al que se le pueden añadir extensiones para hacer tu tienda aun más profesional.
- Es muy fácil y rápido de configurar.
- Es compatible con cualquier theme de WordPress.
Podría continuar enumerando más aspectos positivos del combo WordPress-Woocommerce pero vamos a adentrarnos ya en los detalles del artículo para que puedas tener la tienda online más profesional de tu sector.
¿Qué puedes vender con WordPress + WooCommerce?
¡Muchas cosas!
- Productos digitales (por ejemplo, software, descargas, libros electrónicos).
- Servicios.
- Productos físicos.
- Reservas (por ejemplo, para citas, o cualquier otra cosa que se puede reservar).
- Suscripciones
- Productos de otras personas, haciendo dropshipping.
WooCommerce te permite vender cualquier cosa que pueda tener un precio asignado.
Además de eso, cualquiera puede usarlo (si ya has logrado crear una web o blog con WordPress, también podrás manejar WooCommerce).
Cómo construir una tienda en línea con WordPress y WooCommerce
Nota: el objetivo de esta parte de la guía es mostrar el método más sencillo de crear una tienda de comercio electrónico funcional en WordPress para que puedas obtener tu tienda online lo antes posible. Es por eso que me centraré en las cosas esenciales y omitiré los aspectos más avanzados.
Paso 1: Comprar el dominio y alquilar el alojamiento web
Para crear una tienda online o cualquier otro tipo de sitio web, necesitarás dos cosas:
- El nombre de dominio se refiere a la dirección única de tu web. Algo así como tutienda.com
- El alojamiento web es básicamente un ordenador remoto que almacena tu web y luego la sirve a quien quiera visitarla.
Hay cientos de proveedores de hosting/dominio diferentes, nosotros trabajamos con Raiolanetworks.es.
Ofrecen alojamiento web (incluido el nombre de dominio gratuito por un año) a un precio muy económico, un soporte técnico de los mejores que hemos probado, discos SSD y están especializados en WordPress.
Están ubicados en España.
Por solo 5,95€ al mes ya puedes tener tu propia tienda online 🙂
Solo tienes que ir a raiolanetworks.es y en el menú superior posicionar tu mouse en «Hosting». Cuando se abra el desplegable elegir «Hosting WordPress».
Esto te llevará a una nueva página donde puedes elegir entre diferentes planes de precios.
Es suficiente con el plan «Hosting Inicio SSD WordPress» (la opción más barata).
El siguiente paso consiste en elegir un nombre de dominio para tu nueva tienda online.
Esto requiere una lluvia de ideas.
Tu nombre de dominio debe ser único, fácil de recordar y atractivo.
Si ya tienes una tienda física, tal vez deberías usar su nombre como dominio.
Una vez que elijas el nombre de tu dominio, puedes finalizar la configuración y pagar la tarifa del alojamiento.
¡Genial! Acabas de conseguirte un nombre de dominio y un plan de alojamiento para tener tu propia tienda online.
Paso 2: Instala WordPress (GRATIS)
El siguiente paso marca oficialmente el inicio de tu aventura con WordPress: instalar WordPress en tu cuenta de alojamiento.
Esto puede sonar difícil, pero en realidad no lo es. Todo lo que tienes que hacer es ir a tu panel de usuario de Raiola.
Raiola te enviará un enlace a tu correo electrónico desde el que podrás acceder a tu panel de usuario.
Una vez allí, desplázate hacia abajo hasta la sección «Web Applications». Hacemos clic en «Ver más» para que nos aparezca la opción de WordPress (si no lo encuentras usa el buscador de «Web applications»).
El Installatron del cPanel te guiará en el proceso. Es muy intuitivo. Solo hacer clic continuamente en las páginas que se te vayan abriendo.
En este punto, deberías tener ya tu WordPress instalado en tu dominio principal (por ejemplo, TUTIENDAONLINE.com)
Puedes iniciar sesión en el panel de administración de WordPress yendo a TUTIENDAONLINE.com/wp-admin
Ahora es el momento de convertir esta web de WordPress en una tienda de comercio electrónico completamente funcional utilizando el excelente complemento WooCommerce.
Paso 3: Instalar el plugin Woocommerce (GRATIS)
Al igual que con todos los plugins de WordPress , la instalación comienza navegando al Tablero de Plugins de WordPress / Añadir nuevo.
Una vez allí, escribe «woocommerce» en el campo de búsqueda. Verás WooCommerce en el primer resultado de búsqueda:
Simplemente haz clic en el botón «Instalar ahora» que aparece junto al nombre del plugin.
Después de unos segundos, el texto del botón cambiará a «Activar». Continúa y haz clic en él.
A continuación, verás el asistente de inicio / configuración de WooCommerce. Esto hace que el proceso de instalación sea súper fácil.
El primer paso es la configuración de la tienda
Estos pocos parámetros definen el origen de tu negocio y la moneda elegida.
Una vez que hayas terminado puedes hacer clic en el botón «¡Vamos allá!»
Pago
Ser capaz de aceptar pagos online es el núcleo de cualquier tienda de comercio electrónico.
WooCommerce te da tres opciones en este sentido.
Esto es lo que puede elegir:
Dos de las opciones de pago más populares se encuentran en la parte superior: PayPal y Stripe.
Puedes integrar en tu tienda ambas opciones. Simplemente haz clic en sus casillas correspondientes.
También puedes seleccionar el método de «Pagos sin conexión» para que te puedan hacer transferencias o pagar mediante un cheque, por ejemplo.
Puedes integrar tus cuentas existentes de PayPal y Stripe con tu nueva tienda.
Una vez más, haz clic en «Continuar» cuando hayas terminado.
Envío
En el siguiente apartado podemos configurar los aspectos relativos a los costes de envío.
Podemos asignar una tarifa fija para todos los envíos o elegir la opción de «Envío gratuito» para que los productos no tengan costes adicionales.
Hacemos clic en «Continuar».
"Recomendado"
He puesto esta opción entre comillas porque recomendamos deshabilitar la opción «Impuestos automáticos» ya que no queremos que se instale el plugin Jetpack que permite esta opción. Es un plugin que puede ralentizar mucho nuestra tienda online.
Ya habrá tiempo después de configurar los «impuestos automáticos».
Deshabilitamos las dos opciones y le damos a «Continuar».
"Activar"
Una vez más nos dan la opción de instalar Jetpack.
Como no queremos instalarlo por la razón que he comentado arriba, vamos hasta abajo y hacemos clic en la opción «Saltar este paso».
¡Listo!
El siguiente paso es solo una pantalla de confirmación de que todo salió bien.
En esta etapa, la configuración básica de tu web está lista: ¡acabas de crear una tienda de comercio electrónico con WooCommerce!
Las páginas esenciales de la tienda
Las tiendas online necesitan algunas páginas particulares para funcionar correctamente.
Con esta instalación guiada que hemos realizado con Woocommerce, esas páginas esenciales ya se han creado:
- "Tienda": aquí es donde se mostrarán tus productos.
- "Carrito": este es el carro de compras donde tus clientes pueden ver y ajustar su pedido antes de proceder al pago.
- "Finalizar compra": aquí es donde los clientes eligen el método de envío / entrega y pagan por lo que hayan comprado.
- "Mi cuenta": un tipo de página de perfil para clientes registrados (podrán ver sus pedidos anteriores y administrar otros detalles).
Paso 4: Agrega tu primer producto
Para que tu tienda sea operativa, necesitas algunos productos (o servicios, o descargas, o lo que sea que quieras vender).
Para comenzar a trabajar con los productos, ve a tu panel de control de WordPress, luego Productos / Añadir nuevo:
A continuación verás una clásica pantalla de edición de WordPress:
- 1. Nombre del producto.
- 2. Descripción del producto. Este amplio campo te permite ingresar toda la información sobre el producto que desees. Como se trata de WordPress, no solo puede colocar texto simple, sino también imágenes, columnas, encabezados, incluso vídeos y otros medios. Básicamente, lo que sea que veas encaja con tu producto.
- 3. Descripción del producto. Aquí es donde se configura el tipo de producto que estás agregando y si se trata de un producto físico, descargable o virtual (los servicios también se consideran productos virtuales). Como parte de esta sección central, también tiene pestañas para configurar varios parámetros del producto:
3.1 General. Aquí es donde puedes establecer los precios y los impuestos.
3.2 Inventario. WooCommerce te permite gestionar los niveles de stock.
3.3 Envío. Establece el peso, las dimensiones y los gastos de envío.
3.4 Productos vinculados. Excelente para hacer ventas adicionales, ventas cruzadas, etc. (Piensa, «Los clientes que compraron esto también compraron esto otro»).
3.5 Atributos. Establecer atributos de productos personalizados. Por ejemplo, si estás vendiendo camisetas, puedes establecer colores, tallas…
3.6 Avanzado. Ajustes adicionales. No esencial.
- 4. Descripción corta. Este es el texto que se muestra en la página del producto debajo del nombre. Funciona mejor como un breve resumen de lo que es el producto.
- 5. Categorías del producto. Una categoría agrupa productos similares. Por ejemplo, "sombreros". Funciona igual que las categorías estándar de WordPress.
- 6. Etiquetas de productos. Una forma adicional de ayudarte a organizar tu base de datos de productos. Funciona igual que las etiquetas estándar de WordPress.
- 7. Imagen del producto. La imagen principal del producto.
- 8. Galería del producto. Imágenes adicionales del producto para que el usuario pueda conocerlo mejor.
Una vez que hayas terminado de configurar todo lo anterior, haz clic en el botón azul de «Publicar». Acabas de agregar tu primer producto 🙂
Paso 5: Elije un Theme para tu tienda online (gratis)
Hay una muy buena razón por la que primero expliqué cómo agregar productos a tu tienda, antes de hablar sobre el aspecto visual de la misma.
Francamente, sin ningún producto en la base de datos, no podrás ver las páginas individuales de cada producto. Tienes que asegurarte de que todo se vea bien.
Ahora que has agregado la mayoría de tus productos, podemos asegurarnos de que todo esté en orden desde un punto de vista puramente visual.
¿Qué Theme elegir?
De forma predeterminada, WooCommerce funciona con cualquier plantilla de WordPress . Esta es una gran noticia, especialmente si ya tenías una web y posteriormente has decidido implementar la tienda.
Existen temas especiales optimizados para WooCommerce. Esos temas vienen con estilos preestablecidos que hacen que todos los elementos de WooCommerce se vean geniales.
El theme oficial de WooCommerce se llama Storefront. La versión predeterminada es gratuita y debería ser suficiente para que te pongas en marcha.
Sin embargo, personalmente prefiero otra forma de crear una tienda online: el theme llamado GeneratePress más el plugin gratuito Elementor.
Con este combo puedes personalizar el diseño y las páginas de productos como tú quieras.
Las reglas del diseño en una tienda online
Discutamos algunos aspectos importantes antes de entrar en el meollo de la cuestión.
Principalmente, ¿qué hace que el diseño de una tienda de comercio electrónico sea bueno (léase: rentable)? Aquí están los parámetros más cruciales:
- El diseño debe ser claro y no confundir de ninguna manera. Un visitante que esté confundido no comprará nada.
- El bloque de contenido del centro debe captar la atención del visitante justo después de llegar al sitio. Ese bloque central es donde se mostrarán los productos.
- Nada más cargarse la web, el visitante tiene que saber qué es lo que estás vendiendo de un solo vistazo.
- La tienda tiene que haber sido diseñada primero pensando en la navegación móvil. Hoy en día, la mayoría del tráfico web proviene desde usuarios que navegan con sus móviles.
- Buena estructura de navegación. Menús claros y debemos destacar nuestro CTA (Clic To Action), es decir, aquella acción que queremos que el usuario haga cuando llegue a nuestra tienda.
Teniendo en cuenta lo anterior, esto es lo que podemos hacer con las páginas individuales de tu tienda:
La página de la tienda
Veamos cómo queda la página de inicio con el Theme GeneratePress. No se muestran las imágenes de los productos porque no se han importado, pero te haces una idea:
En el personalizador del Theme de GeneratePress, en «Ajustes de Portada» tienes que marcar la opción «Una página estática» y como página de inicio marcar «Tienda».
Puedes escribir en esa página. en el editor de WordPress una pequeña presentación de tu tienda y luego se listarán los productos.
Página de productos individuales
Para verlos, puedes hacer clic en cualquier producto de la página de la Tienda.
Así se ve un producto individual con el theme de GeneratePress:
Carrito de compras
Es otra de las páginas más importantes en una tienda online.
Es una página que se genera automáticamente cuando instalas Woocommerce.
En la configuración de GeneratePress lo dejo todo sin barras laterales y se ve así:
Finalizar compra o checkout
Esta es la página más importante de todas. Aquí es donde el cliente tiene que proceder al pago.
La página de Checkout necesita ser de ancho completo.
La única salida aceptable de la página para el comprador debe ser finalizar su pedido:
Conclusiones
Como puedes ver, el grado de dificultad cuando se trata de crear tu propia tienda online WordPress no es alto, pero aún así te llevará un tiempo hacer las configuraciones necesarias.
Sin embargo, sigue siendo muy fácil, teniendo en cuenta que solo hace 10 años tendrías que contratar a un desarrollador y pagarle hasta 3.000 € para que creara algo similar. ¡Ahora puedes hacerlo todo tú mismo!
No obstante, si tienes alguna duda del proceso, puedes dejarnos tu comentario.
Curso SEO
Deja tu email y te haremos llegar el CURSO SEO COMPLETO TOTALMENTE GRATIS
Te ha gustado este post?
Suscríbete para que te avisemos con nuevas entradas