Cómo crear una tienda online desde cero con WordPress: pasos a seguir

COMO CREAR una tienda online
Compartir esto:

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».

hosting wordpress raiola

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.

dominio gratis raiola

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»).

installatron wordpress raiola

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:

instalar woocommerce tienda

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.

activar plugin woocommerce

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.

configuracion envio woocommerce

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!

configuracion woocommerce tienda

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:

anadir nuevo producto

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:

tienda online generatepress

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».

pagina de inicio 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:

producto individual tienda woocommerce

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

pagina carrito woocommerce

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

[Total:0    Promedio:0/5]
Compartir esto:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *