Cómo crear una tienda online con GeneratePress + Elementor + WooCommerce

Desde hace tiempo WooCommerce es la herramienta de referencia para crear tiendas online, sin embargo, uno de los puntos más criticados de este plugin es su complejidad a la hora de personalizar libremente nuestros ecommerce. Normalmente WooCommerce añade las funcionalidades, mientras que la plantilla sobre la que trabajamos es la que gestiona el apartado visual.

Esta es una limitación que en otros tipos de webs ya está superada gracias a los maquetadores visuales, con estos editores podemos hacer casi lo que queramos sin importar la plantilla que estemos utilizando.

Estaría bien tener esa libertad también en las tiendas virtuales ¿verdad?

Pues si eres el propietario de un comercio electrónico, o estás pensando en montar uno sigue leyendo, que esta entrada te va a alegrar el día.

POST INVITADO

Hoy tengo el placer de presentarte a Jessica Berlar, diseñadora web especializada en WordPress y blogger en jessicaberlar.com

Además, Jessica fue alumna de la primera edición de mi curso Tu web de cero a 100, así que te puedo garantizar sin temor a equivocarme que va a ser una profesional destacada del diseño web en los próximos años.

La entrada que te ha preparado es una Macro Guía en la que te explica paso a paso cómo hacer una tienda online utilizando la plantilla , el editor visual y el plugin WooCommerce.

Por último debes saber que Jessica ha tenido la amabilidad de preparar dos regalos para los lectores de este blog:

1. La guía en un PDF descargable, para que puedas consultarlo dónde y cuándo quieras.
2. Una plantilla de Elementor para que puedas hacer la página de inicio de tu tienda en un abrir y cerrar de ojos.

Haz click aquí para acceder a los regalos

Te dejo con ella que tienes 6.000 palabras, 60 capturas y tres vídeos por delante.

¿Por qué es tan fácil a día de hoy hacer una tienda online con WordPress?

Gracias a la tecnología actual y a la evolución que ha tenido Internet en nuestras vidas, hoy día puedes aprender casi cualquier cosa que te propongas. Por eso, en este post, me gustaría que una de esas cosas fuera cómo hacer una tienda online fácilmente.

Tanto si estás metido en el mundo de las páginas web como si eres novato, tienes que saber que una de las mejores formas para empezar a crearlas es a través de un gestor de contenidos abierto. Y seguro que tu intuición te está diciendo que hay que usar WordPress… ¿verdad?

¡¡Pues si, acertaste!! 🙂

Veamos los motivos para utilizar WordPress para tus diseños web y en este caso en concreto, para crear tu propia tienda online desde cero:

• WordPress es un gestor de contenidos gratuito, libre, de código abierto y tiene una gran comunidad detrás para resolver a través de sus foros y sus seguidores, casi cualquier duda que tengas. Más del 25% de todas las webs del mundo están hechas con este CMS, será por algo ¿no?.

• Para instalar un WordPress, sólo tienes que contratar un dominio y un hosting para alojar los archivos que van a componer tu tienda online. Debido a los bajos costes que te supone gestionar todo esto, montar la tienda te va llevar una inversión mínima, entre los 100 y 150 € al año. Como verás, estas cantidades son ridículas si comparamos lo que tendrías que invertir para crear una tienda física en cualquier sitio. Así que ahorrando muy poco, tienes para empezar con la contratación del dominio, un y una plantilla de calidad.

• WordPress te proporciona una gran facilidad para diseñar una página, ya que gracias a los maquetadores visuales que puedes instalar, no tendrás que tener necesariamente conocimientos de código, aunque si es recomendable tener una pequeña base. Pero cuidado, esto no quiere decir que sabiendo utilizar WordPress ya sepas de entrada sobre diseño web, para ello tienes que estudiar bastante sobre tipografías, elección de colores, estructuras, coherencia, espacios, conjunción de elementos, etc.

• Por último, con los plugins gratuitos que nos brinda el repositorio de WordPress, podrás transformar tu página web fácilmente en una tienda online para vender productos o servicios, ¿no es genial?.

Habrás visto que el hecho de que WordPress nos facilite las cosas, supone mayor acceso para casi cualquier persona que desee adentrarse en este mundo para crear fácilmente su tienda online.

Esto se traduce en una mayor competencia, que requerirá por tu parte más trabajo y esfuerzo para destacar y posicionarte en Google.

Así que, antes de pasar a la parte técnica para enseñarte a montar tu tienda online, vamos a ver como podemos sobresalir para llevarnos un trozo del pastel en Internet.

Estudio previo antes de crear una tienda online

Para sentar bien las bases de cualquier proyecto, vamos a estudiar previamente los siguientes puntos para crear una tienda online de éxito.

Buscar un nicho rentable y estudiar tu cliente ideal

1.) El primer paso es elegir un nicho, es decir, un tema sobre el que puedas ayudar a los demás, ya que al final, se trata de esto.

Aquí tienes que hacer un trabajo de introspección personal, ya que si quieres triunfar con tu tienda online, deberás elegir un tema que te guste, te apasione, no te aburra y te motive seguir aprendiendo día a día.

Suena un poco a rollo lo que te voy a decir, porque seguro que lo has escuchado más de una vez, pero en realidad es cierto:

Si sólo te centras en crear una web por dinero, o porque ese tema está de moda,  o incluso porque tiene mayor pago en publicidad o Adsense, te puedo asegurar, tal y como dicen aquí en mi tierra en el sur: “que vas aviao”

Créeme, al final mucha gente pasa por lo mismo; no les motiva el tema que están desarrollando en su página, llega un día en el que se aburren y lo van dejando poco a poco.

Así que opta por un nicho para tu tienda que te apasione, y acabarás pensando como nuestro amigo Confucio:

“Elige un trabajo que te guste y no tendrás que trabajar ni un día de tu vida”

Consejo: Evita en la medida de lo posible nichos muy complicados y saturados de posicionar, como pueden ser temas de seguros, coches, o viajes. No digo que no puedas montar una tienda online sobre esto, pero debido a su alta competencia, necesitarás destacar sobre los demás, especializándote y evitando ser demasiado generalista.

2.) El segundo paso previo a construir tu proyecto es: estudiar a tu cliente ideal.

Deberías hacer un análisis profundo de como es esa persona que va entrar en tu tienda online y porque va comprar tus productos o servicios.

Así que para ello, tendrás que saber como es, que le apasiona, cuales son sus preocupaciones, que edad tiene, si es hombre o mujer, que revistas o blogs suele leer con frecuencia, que necesidades tiene que puedas resolver gracias a tu web…

En definitiva, crear una imagen de esa persona que va entrar en tu tienda y analizar porque va comprarte a ti.

Esto te ayudará a conocer mejor el perfil de tu cliente, para poder venderle lo que necesita justo en ese mismo momento.

Gracias a esto podrás crear tu propia estrategia de contenidos para el blog, redactas tus textos para el email marketing, publicaciones para tus redes sociales, crear cupones descuentos, etc.

Tipo de tienda que vas a montar:

Una vez tengas claro tu nicho y como va ser tu cliente ideal para tu proyecto, tienes que estudiar que tipo de tienda online vas a crear.

Puesto que en este punto, ya conocerás de antemano las necesidades de tus clientes, podrás ofrecer lo siguiente:

1. Productos físicos: puedes vender tus propios productos creados por ti o de terceros a través de tu tienda.
2. Productos digitales: puedes ofrecer infoproductos, servicios web, mentorías y consultorías a distancia con tener tu propia webcam, crear cursos online para formar a tu comunidad en ese tema que te apasiona…
3. Productos de afiliación o recomendación: también puedes recomendar a tus visitantes, productos o servicios que hayas utilizado previamente para llevarte una comisión, mediante un artículo donde expongas un análisis de los pros y contras de ese producto, y porque tu lo aconsejarías al resto de la gente.

Gracias a WordPress y en concreto al plugin de WooCommerce que veremos más adelante, podrás trabajar perfectamente estos tres tipos de productos.

Analizar las estrategias de marketing y SEO a implementar en la tienda online

Por último, cuando vayas a montar tu tienda, puedes aplicar las siguientes estrategias para atraer lectores y posibles clientes a tu negocio:

• Captación de suscriptores: Puedes instalar un formulario de captación de suscriptores en la web ofreciendo un recurso gratuito (por ejemplo, un ebook en pdf), para que dejen su nombre y su email, y así mantener el contacto con ellos siempre que quieras.
• Creación de Newsletter: avisa a tus lectores de las novedades que incorporas en tu tienda online, ofrece cupones descuento en fechas clave, como por ejemplo el Black Friday.
• Creación de un blog: esto te lo recomiendo en cualquier caso, ya que así posicionaras tus contenidos en Google y atraerás lectores de forma orgánica. Organízate un plan y crea una estrategia de marketing de contenidos, en el cual seas capaz de hablar de tus productos o servicios a lo largo del tiempo.
• Trabajar el SEO: En una tienda online debes cuidar bastante el SEO, crear categorías para tus productos, evitar contenido duplicado que puede ser penalizado por Google, trabajar el SEO On Page, es decir, el SEO interno de tu web, crear artículos para el blog para posicionar determinadas palabras clave…
• Publicidad: puedes contratar campañas de pago con Google Adwords o Facebook Ads para conseguir visitas a tu tienda. Recuerda ofrecer descuentos, recursos gratuitos o contenido de calidad que pueda resolver problemas a tus lectores, y así conseguir llamar su atención.

Veámos las herramientas que vamos a necesitar para crear una tienda online de éxito

Una vez vista la teoría, vamos a pasar a la práctica y en concreto a la parte técnica. Así que para el montaje de tu tienda online, vas a necesitar estas herramientas:

1. Comprar un dominio: lo primero que tendrás que hacer es elegir el dominio, es decir, un nombre para tu web, con una extensión, que podrá ser .com, .net, .es, .org. entre otros. Normalmente cuando contratas el hosting el primer año este lo incluye, pero existen otras plataformas donde puedes adquirirlo y después apuntarlo hacia el servidor que tengas.
2. Contratar un buen hosting. Esto es lo más importante a la hora de crear un proyecto online, así que encárgate de tener un hosting de calidad que te resuelva cualquier problema cuando se presente. En este post tienes una guía para saber como elegir el mejor hosting para alojar tu WordPress.
3. Elegir una buena plantilla para tu WordPress: No quiero extenderme mucho en este punto, pero es primordial que tengas un tema en tu tienda online que sea limpio en código para favorecer el SEO, fácil de personalizar y que tenga un buen soporte. Si a eso le añades un precio razonable, en mi caso, al igual que haría Arturo, sólo puedo recomendarte la plantilla . Si quieres saber porque este es el tema que deberías utilizar, pásate por este artículo.
4. Usar una maquetador visual para la creación de páginas, fácil de usar: Si a la plantilla referente de Arturo, le sumas el plugin de , ya tienes mucho camino recorrido. Te aseguro que con este combo vas a crear una tienda online rápida, eficiente y cómoda de personalizar. Si no lo tienes claro, sólo puede decirte que le eches un ojo a esta review del plugin para dejarte convencido.
5. Plugin para integrar la tienda online: el último elemento esencial en nuestra creación, es el plugin para WordPress de WooCommerce. Con esta herramienta gratuita vas a poder transformar tu web rápidamente en una tienda virtual. Para que conozcas un poco más las ventajas que tiene crear tu propio E-Commerce con este plugin, pásate por aquí; me lo agradecerás.

Si es la primera vez que vas a utilizar WooCommerce puedes aprender a trabajar con este fantástica herramienta con este curso gratuito sobre Woocomerce en DiseñadoresWeb.PRO.

Pasemos a la acción: Cómo Crear una tienda online paso a paso con WooCommerce

¡¡Ahora sí!! Este es el momento que esperabas 🙂

Vamos a darle caña a tu tienda online con las herramientas que te he nombrado antes: WordPress + Generatepress + Elementor + WooCommerce, y pasemos a la acción.

¿Quieres conocer mejor todas estas herramientas? En DiseñadoresWeb.PRO la nueva plataforma formativa para diseñadores web freelance de Arturo repasan estas y otras muchas herramientas, además puedes acceder a los plugins que utilizan en cada curso. Puedes probar la plataforma de forma gratuita. ¡Quiero ir a la membresía!

¿Empezamos?

Ajustes previos para montar tu tienda online

Bueno, entiendo que ya tienes contratado un dominio y hosting de nivel PRO, así que a voy a explicarte los primeros pasos que tienes que dar para hacer tu propia tienda online:

1.- Instalación de WordPress

Si eres como yo, y tienes contratado tu dominio y hosting con , en primer lugar tendremos que irnos al CPanel a la opción de “Instalación Automática”, para instalar WordPress. Si tienes otro hosting distinto, tendrás un apartado similar al que te muestro a continuación.

Cuando hagamos clic en esta opción, tendremos que elegir el dominio que tengamos disponible, donde vamos a instalar los archivos que van a componer nuestra web en WordPress. Para ello, tendrás que rellenar los siguientes datos:

Una vez tengas rellenos los datos de configuración del sitio y hayas creado tu usuario y contraseña de administrador, tendrás que darle al botón de “Instalar“.

Por último, una vez finalizada la instalación, pondremos en la barra de dirección de nuestro navegador el nombre de nuestro dominio terminado en “/wp-admin” para acceder con el usuario y contraseña que hayamos establecido en el paso anterior.

Por ejemplo, si ponemos: “www.tiendaonlinedeprueba.com/wp-admin“, nos aparecerá la siguiente ventana para acceder:

Por fin, una vez dentro, ya tendremos acceso a nuestro escritorio WordPress 🙂

Nota: Al acceder por primera vez, te recomiendo que instales para tu tienda online, los plugins básicos para completar tu web. Si te haces un lío con este tema, puedes descargarte el ebook de Arturo, “Mis 10 plugins favoritos”, que tienes disponible en su “Centro de Recursos“.

Además, recuerda revisar los primeros pasos de los “Ajustes” del escritorio WordPress. También es importante destacar, que mientras estés diseñando tu tienda online, mantengas la opción activa de “Disuade a los motores de búsqueda de indexar este sitio“, en “Ajustes>>>Lectura” (recuerda desactivarlo cuando vayas a publicar la web).

2.- Instalación de la plantilla gratuita GeneratePress

Una vez tengas instalado WordPress y los plugins esenciales de tu web, necesitarás instalar un tema en condiciones para montar tu tienda online.

Por defecto, WordPress te va instalar el tema de Twenty Seventeen, pero vamos a sustituirlo por el de Generatepress en su versión gratuita. También puedes descargarte su tema hijo aquí.

Para ello, nos vamos a nuestro escritorio WP>>>Apariencia>>>Temas>>>Añadir Nuevo: Buscamos por Generatepress en el buscador y nos aparece el tema de Tom Usborne para instalar. Posteriormente le daremos al botón de activar.

Por fin tenemos plantilla para nuestra tienda online en WordPress.

Si quieres profundizar en las opciones de personalización de Generatepress, puedes dedicarle un ratito a leer este post.

3.- Instalación del plugin Elementor Page Builder

Además de tener una buena plantilla optimizada para tu tienda online, deberás contar con un buen maquetador de página para diseñar las landing donde vas a mostrar tus productos o servicios.

Si tienes pocos conocimientos en código, puedes empezar usando un maquetador visual con un sistema de arrastre de elementos en vivo, que te facilitará mucho las cosas para diseñar la web.

Para esto, vamos a instalar el plugin gratuito de Elementor, así que nos iremos nuevamente al escritorio WordPress>>>Plugins>>>Añadir Nuevo: Buscamos por Elementor en nuestro buscador situado arriba a la derecha.

Pulsaremos la opción de instalar y posteriormente activar, y por fin tendremos listo preparado nuestro maquetador para pasar a la acción.

Cómo instalar WooCommerce + Ajustes Básicos

Ahora sí, aquí viene la madre del cordero.

Una vez tenemos activas las herramientas básicas, vamos instalar el plugin que va transformar nuestra web en WordPress en una tienda online.

Para esto, nos vamos nuevamente a Plugins>>>Añadir Nuevo: Buscamos la palabra clave “WooCommerce“. Una vez tengamos localizado el plugin, le daremos a instalar y activar posteriormente.

A continuación, se te ejecutará un asistente donde tendrás que ir rellenando paso a paso los ajustes básicos de tu tienda online.

Veámoslo paso a paso:

1.- Configuración de la tienda

En este primer apartado tienes que indicar los datos de localización de tu tienda online (dirección, provincia, código postal). También tendrás que rellenar la moneda de tu país (en nuestro caso, el euro), y por último que tipo de productos deseas vender (físicos, digitales, o tanto físicos como digitales).

Si te fijas al final tienes un recuadro donde podrás dar permiso a los chicos de WooCommerce, hacerte un seguimiento en el uso del plugin para mejorarlo.

2.- Pago

En esta pestaña tendrás que indicar las formas de pago que vas aceptar a tus clientes para la compra de tus productos o servicios. Te recomiendo utilices “Stripe“, ya que el porcentaje de comisión que cobra es el más bajo, aunque también puedes incluir “Paypal“.

Si haces clic en la pestaña de “Pagos sin conexión“, te desplegará otras formas de cobro distintas: pagos por cheque, por transferencia y contra reembolso. Elige la que más te convenga para tu proyecto.

3.- Envío

Aquí tendrás que establecer las opciones de envío de tus productos. En la zona que estableciste en el apartado 1 (España), tendrás que indicar si los envíos son gratuitos o si por lo contrario, tienes una tarifa fija (tendrás que poner una cuantía exacta). También puedes poner una tarifa aparte para otras ubicaciones distintas a la que establecimos al principio.

Por último, indica la unidad de peso para calcular los costes (kg) y una unidad de tamaño (cm).

4.- Extras

Esta opción te permite calcular y cargar automáticamente la tarifa de impuestos cuando un cliente haga un pago. De momento te aconsejo que lo desactives.

5.- Activar

Este paso te permite conectar tu tienda online WooCommerce con el plugin Jetpack. De momento también lo omitimos, ya que no me interesa instalarlo, por tanto pulsaremos: “Saltar este paso“.

6.- Listo

Ya tienes preparada tu tienda online para empezar a vender. Puedes indicar tu email para que los chicos de WooCommerce te manden novedades, pulsando en el botón “¡Sí, por favor!”.

Además, puedes empezar a crear tus primeros productos pulsando el botón “Crea un producto“.

Por último, el apartado final, te permite importar productos de otra tienda que ya tengas creada previamente. Posteriormente le daremos a “Volver a tu escritorio“.

NOTA: No te preocupes si te dejas algo sin rellenar o tienes que modificar algo de estos apartados, ya que podrás volver en cualquier momento en los ajustes de WooCommerce.

También tienes que tener en cuenta, que mientras terminabas de completar el asistente de instalación, se han instalado unas cuantas páginas que son imprescindibles para operar con tu tienda online, y son:

• Carrito
• Finalizar compra
• Mi cuenta
• Tienda

Repaso a las Opciones de WooCommerce

Sé que estás deseando crear y poner tus productos en venta, pero antes de empezar, es conveniente que le eches un vistazo a las opciones básicas del plugin por si tienes que hacer modificaciones según tu formato de tienda online.

Vamos a ver un breve repaso de las opciones que tiene WooCommerce en el escritorio de WordPress:

1.- Pedidos

Aquí te aparecerán los pedidos realizados por tus clientes, que podrás editar en cualquier momento. También puedes crearlo manualmente, pulsando el botón “Añadir nuevo“, arriba a la izquierda.

En nuestro nuevo pedido, podremos rellenar los siguientes datos:

*Detalles de Pedido:

–Datos generales: fecha de pedido, estado del mismo (pendiente de pago, en espera, completado, procesando…), búsqueda de cliente por nombre.

–Datos de facturación: puedes editar los datos personales del cliente, así como el método de pago y la identificación de la transacción.

–Detalles de envío: aquí puedes rellenar los datos del cliente donde va llegar su pedido. También puedes incluir notas acerca del mismo.

–Acciones del pedido: puedes crear nuevas acciones en este apartado: enviar por correo electrónico la factura, volver a enviar el aviso de nuevo pedido, regenerar los permisos de descarga.

Después, justo debajo de las opciones que te he descrito, aparecerán los datos de los artículos que vayan incluidos en el pedido del cliente. También puedes incluir nuevos productos e incluso aplicar cupones que hayas creado previamente.

Por último, puedes añadir “Campos personalizados” y “Permisos de producto descargable” en el pedido.

2.- Cupones

En este apartado podrás crear cupones personalizados para hacer campañas de tus productos o servicios. Sólo tenemos que pulsar el botón “Añadir cupón” y rellenar los siguientes datos:

• General: tipo de descuento a elegir (de porcentaje, de cuantía fija en carrito o de producto), importe del cupón (según lo que hayas elegido en tipo de descuento), opción para permitir el envío gratuito y posibilidad de indicar una fecha de caducidad del cupón que estamos ofertando. En este ejemplo hemos puesto un descuento del 50% para el Black Friday hasta el 30 de Noviembre, con envío gratuito.
• Restricción de uso: en este segundo apartado, puedes restringir el uso de cupones. Puedes establecer un gasto mínimo y máximo para poder aplicarse, poner que ese cupón no pueda usarse con otros que hayas creado previamente, excluir el uso del mismo en artículos que ya estén rebajados, restringir el uso en determinados productos y categorías. También puedes restringir el uso a determinados correos electrónicos.
• Límites de uso: Por último, puedes establecer límites en el uso de los cupones para clientes. Por ejemplo, puedes poner que el cupón se uso un máximo de 10 veces, se limite a 1 artículo y sólo pueda usarse 1 cupón por usuario.

3.- Informes

Aquí podrás visualizar las estadísticas de las ventas que vayas realizando con tu tienda online. Tienes 3 categorías a estudiar: Pedidos, Clientes e Inventario.

Cada una de estas pestañas, tiene a su vez, la posibilidad de ofrecerte datos más exactos, como verás a continuación.

Podrás sacar datos de los últimos 7 días, del mes pasado y actual, e incluso establecer intervalos de fecha personalizados.

Por ejemplo, en la imagen que vas a ver ahora, puedes obtener las estadísticas de la categoría de “Pedidos>>>Ventas por fecha>>>Últimos 7 días“.

También tienes la opción de estudiar la gráfica que nos proporcionarían los datos del apartado “Clientes“. Aquí mismo, puedes ver la relación del “Listado de clientes” que han comprado en tu tienda online.

Por último, en el apartado de “Inventario“, podrás llevar un control de tus productos en stock.

4.- Ajustes

En este apartado podrás modificar los datos que estuvimos rellenando en el asistente inicial que nos apareció cuando terminamos de instalar WooCommerce por primera vez.

Tienes las siguientes pestañas:

• General: En este primer apartado puedes modificar los datos de dirección de la tienda, las opciones generales de venta, activar los impuestos y los cálculos de los mismos y modificar la moneda que vas a utilizar. Una vez modifiques los datos que necesites, sólo tienes que pulsar en el botón de “Guardar cambios“.
• Productos: Esta pestaña a su vez tiene distintas categorías que puedes ir rellenando y que vamos a ver ahora.

*General: Aquí puedes modificar las unidades de peso y las dimensiones, activar las valoraciones de los clientes y activar la posibilidad de incluir reseñas de productos con estrellas a tus clientes.

*Mostrar: aquí puedes establecer la página de tienda que tu quieras, aunque te recomiendo que dejes la que nos crea el plugin por defecto: “Tienda“.

Posteriormente puedes hacer que determinados productos se visualicen en dicha página, al igual que las categorías que vayas creando a medida que añades productos en tu tienda online.

En “Imágenes del producto” puedes establecer las dimensiones que van a tener las imágenes de tu catálogo, productos y miniaturas de productos.

*Inventario: aquí podrás activar la gestión de inventario y mantenerlo en una cuantía en concreto (60 por defecto). También puedes establecer un email para los avisos e incluso establecer umbrales cuando tu stock de productos vaya llegando a su fin.

Otra opción bastante interesante es la de ocultar los artículos que se vayan agotando.

*Productos descargables: finalmente en este último sub-apartado de la pestaña de productos, podrás ajustar el método de descarga de los archivos digitales que tengas en venta. Te recomiendo que si vas a vender infoproductos, dejes tal y como viene por defecto: permitir acceso a los productos descargables después del pago.

• Envío: Esta pestaña tienes a su vez otros 3 sub-apartados que vamos a ver a continuación:

*Zonas de envío: aquí podrás añadir distintas zonas de envío para los pedidos que encarguen tus clientes. Ahora mismo nos viene por defecto el país que pusimos al principio en el asistente (España).

*Opciones de envío: aquí podrás mostrar u ocultar los gastos de envío en la página de compra en “Cálculos”. Puedes ajustar que el destino del envío sea por defecto en la dirección de envío del cliente, a la dirección de facturación del cliente o forzar el envío a la dirección de facturación. Te recomiendo lo dejes tal y como viene por defecto, a la dirección de facturación establecida.

*Clases de envío: te permite crear clases de envío específicos con un slug y descripción específicas. Por ejemplo, si tuvieras que diferenciar distintas partes de la península.

• Finalizar compra: En este apartado puedes establecer las opciones para activar el uso de los cupones creados, y permitir el proceso de compra a los clientes que no tengan cuenta de usuario (importante tener activa esta opción). También puedes forzar el pago seguro, aunque ya hoy día es obligatorio tener en la web un certificado SSL para encriptar los datos del cliente, si no quieres que Google te penalice.

Por último aparecerán establecidas las páginas correspondientes a la finalización de compra que se crearon al terminar el proceso de instalación de WooCommerce, así que también te aconsejo las dejes por defecto.

Si te fijas, debajo de la pestaña que estamos ajustando “Finalizar compra“, aparecen todas las modalidades de pago que admite la plataforma, así que sólo tienes que ir rellenando los datos de las que vayas a utilizar.

En este caso, quiero mostrarte la pestaña de Stripe, donde tendrás que establecer las claves secretas que te proporcionarán una vez crees tu cuenta de usuario. Es importante que hagas pruebas antes de pasar a modo real, por lo que puedes habilitarlo en la casilla “Activar modo de pruebas“.

• Cuentas: Este apartado te aconsejo que lo dejes por defecto, ya que va permitir a tu usuario, una vez haga el proceso de finalización de compra en la tienda, darlo de alta como cliente con su cuenta y sus datos correspondientes.

• Correos electrónicos: para finalizar, este último apartado es muy importante, ya que los mensajes que estén creados aquí, tienen la función de enviarse a los clientes a su correo electrónico según el resultado obtenido en su proceso de finalización de compra en la web. Por ejemplo hay mensajes de nuevo pedido, pedido cancelado, fallido, a la espera, etc. Puedes establecer el nombre y el email del remitente (en este caso tu), e incluso personalizar la plantilla base de los correos electrónicos que se usarán en cada caso correspondiente.

5.-Estado y Extensiones

En el apartado de “Estado” podrás ver los datos y las características del sistema donde tienes instalada tu tienda WooCommerce.

En “Extensiones” podrás acceder en cualquier momento a los plugins premium de los que disponen los chicos de Woo.

6.- API

Esta opción permite a WooCommerce integrarse con aplicaciones externas.

Cómo crear productos para tu tienda online con WooCommerce

Una vez tengas listos los ajustes básicos de tu tienda, puedes empezar a crear artículos para vender a tus posibles clientes.

Para ello, tienes que irte a la opción de “Productos>>>Añadir Nuevo”

Si te das cuenta, la forma de crear productos con WooCommerce es muy parecida al editor de entradas y páginas que trae por defecto WordPress, así que no tendrás ningún tipo de complicación en ir creando tus artículos. Además, cuando entres por primera vez se te ejecutará un asistente virtual que te irá guiando paso a paso, es increíble 🙂

– Título: añade un nombre al producto.

– Descripción del producto: indica un texto para explicar el artículo que ofreces a tu comunidad.

– Categorías de productos: a la vez que vas creando tus artículos, puedes ir añadiendo categorías para ir clasificándolos.

Cuando tengas rellenados los datos anteriores, vas a tener que editar los datos del producto en sí, que puedes ver en la imagen de arriba:

– Datos de producto: indica si se trata de un:

• Producto simple, para la mayoría de los casos.
• Producto variable, en caso de productos con varias tallas o tamaños, por ejemplo camisetas.
• Productos agrupados, para agrupar productos simples en uno solo.
• Productos externos/afiliados, para crear enlaces de afiliados de productos de recomendación que redirigirás fuera de tu web.

Después, puedes indicar si es un producto virtual o descargable. Esto es aconsejable si estás vendiendo infoproductos, como podrías ser por ejemplo un curso online en pdf.

Posteriormente añade un precio normal y rebajado en euros.

– Descripción corta del producto: aquí podrás añadir una breve descripción de tu producto que aparecerá debajo del título.

– Imagen del producto: incluye una imagen destacada del artículo en venta.

– Galería del producto: puedes añadir varias imágenes para mostrar las cualidades del artículo en cuestión.

Por último, antes de publicar el producto en la tienda, puedes realizar varios ajustes previos en las pestañas siguientes para terminar de editar tu artículo:

• Inventario: para establecer las existencias disponibles.
• Envío: para ajustar las dimensiones del pedido en caso de un producto físico.
• Productos vinculados: para añadir productos para ventas dirigidas o cruzadas.
• Atributos: para establecer atributos concretos de un producto en cuestión.
• Avanzado”: para añadir notas de compra o activar las valoraciones de los clientes.

Ya tienes todas las herramientas activas, los ajustes básicos realizados y tus productos creados, pero todavía no se muestra tu tienda cuando vas a tu página web. Muy simple, tus productos se mostrarán en la página que ha creado Woo, que se llama “Tienda“.

Como incorporar tu tienda online en tu web

Aquí puedes hacer varias cosas:

1.- Si quieres que se muestre en el menú principal de tu web, sólo tienes que irte al apartado del escritorio: “Apariencia>>>Menús“:

Tienes que señalar la página que aparece en la relación de elementos que podemos incrustar, y posteriormente pulsar el botón “Añadir al menú“. Después sólo tienes que establecer donde quieres colocar tu tienda y guardar cambios.

Nota: también puedes añadir las categorías que vayas creando de tus productos. Para ello, tienes que incorporarlas justo debajo del apartado “Tienda”, colocándolas deslizadas a la derecha, ya que así conseguirás que se abra un desplegable con todas las opciones cuando pases el ratón por encima.

2.- Si quieres hacer que la página de Inicio de tu web sea por defecto la que ha creado WooCommerce de “Tienda“, sólo tienes que irte a los ajustes de WordPress para modificarlo:

En “Ajustes>>>Lectura>>>Página frontal muestra” tienes que establecer en la opción de página estática, como página de inicio: Tienda.

Guardas cambios y listo, ya tienes tu tienda en la home page de tu web.

Como personalizar tu tienda online con GeneratePress

Vamos a ver con una aplicación práctica como podemos personalizar nuestra página “Tienda” creada con WooCommerce, con las opciones que trae por defecto GeneratePress, en su versión premium.

Vamos hacer un breve repaso a lo que te he explicado en el vídeo, para ver las opciones de diseño que trae la versión premium Generatepress para tu tienda online con WooCommerce.

Antes de nada, tienes que activar los “Addons” de la plantilla para personalizar tu tienda WooCommerce; para ello vete a la opción “Apariencia>>>Generatepress“, y en concreto señala y habilita los tres siguientes:

• Colores
• Tipografía
• WooCommerce

Una vez activos estos addons, iremos a visualizar nuestra tienda online, así que sólo tienes que dirigirte a la parte de arriba a la izquierda de tu escritorio WordPress, tal y como te indico en la imagen:

Una vez dentro de nuestra página de tienda, nos dirigiremos a la opción de “Personalizar” de GeneratePress, que tenemos justo en la barra de arriba, y nos aparecerá el siguiente menú para empezar a diseñar:

1.- Diseño de pantalla>>>WooCommerce

Aquí tenemos 4 subcategorías que podemos modificar de las siguientes páginas:

• General: puedes mostrar u ocultar el carrito en el menú y la localización exacta de donde se encuentra el cliente en tu web a través de las migas de pan.
• Tienda: aquí puedes establecer en la página de Tienda: una barra lateral, establecer distinto número de columnas de tus productos, alinear la imagen y el texto de los productos en el centro, derecha o izquierda; establecer un número concreto de productos por página, mostrar u ocultar título de la página, número de resultados, imágenes y títulos de los productos, precios, valoración, descripción corta, etc.
• Producto individual: en esta sub-categoría tienes la opción de personalizar la página en cuestión de un producto en concreto, estableciendo un barra lateral, mostrando u ocultando productos relacionados, ventas dirigidas, descripción corta, etc.
• Finalizar compra: esta opción te permite eliminar todas las distracciones de la página de finalizar compra, para evitar que el cliente salga del sitio y termine de realizar la operación pasando por la pasarela de pagos correspondiente.

2.- Colores>>>WooCommerce

En esta categoría puedes modificar los colores de los siguientes elementos de tu tienda: título del producto, título al posar el puntero, botón alternativo en la página de finalizar compra, valoración de estrellas, placa de oferta; e incluso los colores del botón principal de los productos para añadir al carrito tal y como te indico en la imagen.

3.- Tipografía>>>WooCommerce

aquí puedes modificar el tamaño de los títulos de productos.

Nota: con la versión gratuita de GeneratePress puedes también tener tu tienda online con WooCommerce sin problemas, sólo que no tendrás acceso al grado de personalización que te he mostrado anteriormente.

Como crear una página de inicio profesional para tu tienda online con Elementor

Una vez conozcas las formas de modificar la apariencia de tu tienda gracias a las opciones premium que tiene la plantilla GeneratePress, vamos a ver como diseñar una página de inicio de infarto donde muestres tus productos de forma atractiva a tus clientes, con el objetivo de vender al máximo.

Para esto vamos a utilizar el plugin de

Como ya sabrás, los chicos de Elementor te facilitan mucho las cosas con su versión gratuita, pero también me gustaría mostrarte las capacidades de su opción PRO, así que vamos a ver los dos casos.

Como diseñar una homepage para tu tienda con la versión gratuita de Elementor

En este vídeo me gustaría enseñarte una muestra de la capacidad que tienen las herramientas gratuitas de Elementor y WooCommerce para diseñar una página de inicio para tu tienda online.

En la siguiente imagen puedes echar un vistazo a los widgets gratuitos propios de WooCommerce que incorpora Elementor en su listado, que hemos repasado en el vídeo, y que puedes insertar en cualquier landing que diseñes para tu tienda online:

• Carrito
• Filtros de productos: activos, por atributo, por precio.
• Categorías de los productos
• Búsqueda de productos
• Nube de etiqueta de productos
• Productos
• Productos vistos recientemente
• Productos por puntuación
• Valoraciones recientes de productos
• Filtrar productos por puntuación

Como diseñar una homepage para tu tienda virtual con Elementor Pro

En este otro ejemplo, vamos a reproducir prácticamente la misma página de inicio anterior para nuestra tienda online, sólo que vamos a usar los widgets premium de Elementor PRO.

Como ves, es muy fácil e intuitivo diseñar las páginas para tus productos con los siguientes widgets:

• Woo – Products: para añadir productos de tu tienda.
• Woo-Add To Cart: para añadir un botón personalizado de un producto que se va incluir automáticamente al carrito al pinchar en él.
• Woo- Elements: para insertar distintos elementos propios de WooCommerce en tu landing (cuenta del cliente, ficha de producto, página checkout…).
• Woo-Categories: para añadir las categorías de tus productos en cualquier página.

Ejemplos reales de tiendas online hechas con GeneratePress + Elementor + WooCommerce

Antes de terminar, para enseñarte las capacidades de las herramientas que has estado viendo a lo largo de este post, me gustaría ponerte algunos ejemplos de E-commerce que funcionan íntegramente con Generatepress, Elementor y WooCommerce:

Truco: Si alguna vez te pica la curiosidad saber que plantilla y plugins está utilizando una web que hayas visto y te mole, puedes usar el comprobador de temas WpThemeDetector.

Consejos extra para crear tu tienda online

Para finalizar, me gustaría dejarte algunos consejos que puedes aplicar desde hoy mismo en tu E-Commerce:

• No utilices imágenes de baja calidad, pixeladas o sin derecho de autor. Esto puede espantar a tus clientes y podría caerte una sanción por utilizar fotografías con derechos de autor.
• Cuidado con el contenido duplicado, ya que supone penalizaciones por parte de Google, con la consecuente bajada de puestos en Internet. Olvídate de copiar y pegar los textos de productos similares al tuyo y acuérdate de cuidar el SEO.
• Crea una landing de infarto para tu página de inicio, con imágenes de alta calidad para atraer la atención de tus clientes, y diseñar una estructura orientada a la conversión.
• No te olvides de crear cupones de descuento y campañas con ofertas irresistibles para determinadas fechas, como pueden ser épocas de navidades, black friday, rebajas de verano, etc.
• Incorpora un formulario de suscripción ofreciendo un porcentaje de descuento a tus visitantes para captar su email y poder ofrecerles cada cierto tiempo descuentos, pero sin hacer spam ehhh.
• Promociona tu tienda a través de las redes sociales, y utiliza aquellas con las que más cómodo te sientas. Intenta ser creativo para destacar sobre tu competencia. Puedes hacer sorteos, regalos…

Conclusiones

En mi opinión, pienso que merece la pena invertir unos cuantos euros para tener las versiones premium de Elementor y GeneratePress, ya que te permitirán crear fácilmente una tienda online profesional con WooCommerce; que junto con el resto de funcionalidades extra que incluyen ambas herramientas, harán que te ahorres unos cuantos plugins.

Si no sabías cómo empezar a crear tu tienda con WordPress, quiero que al menos, después de haberte leído cerca de 6.000 palabras, esto te haya servido como base para empezar a montarla desde hoy mismo.

Gracias por dedicarme un ratito y espero que esta guía te facilite el camino para hacer despegar ese proyecto E-commerce que te ronda la cabeza, y no te olvides de tus regalos! 😉

>>> Descargar la guía en PDF y la plantilla de Elementor para hacer la página de inicio <<<