black friday elegant themes divi black friday webempresa
(6 votes, average: 5,00 out of 5)

Cómo Crear una Tienda Virtual en WordPress con el Plugin WooCommerce y la plantilla Divi

Ya sabemos que crear un blog WordPress es una de las mejores maneras de darte a conocer y de compartir tus ideas con el mundo e incluso de ganar dinero a través de las múltiples opciones que la web te ofrece: Marketing de afiliación, Adsense, publicidad, etc.

Pero lo que quizá no sepas es que tu blog WordPress puede servir además para vender productos y servicios de todo tipo.

En efecto, si tienes un blog hecho en WordPress, puedes convertirlo en una tienda virtual!

Para vender productos en tu blog WordPress, simplemente vas a necesitar un plugin e-commerce de confianza y una plantilla que se adapte a la perfección con dicho plugin.

Plugin WooCommerce para Crear tiendas Online con WordPress

plugin woocommerce para crear una tienda online wordpress

WooCommerce ha dominado este campo desde hace años y con motivo. Gracias a todas sus características integradas y la amplia gama de extensiones opcionales que ofrece, es capaz de hacer de tu blog WordPress una tienda online de una manera sencilla y económica.

También es sabido que Divi es en la actualidad una de las mejores plantillas WordPress que existen.

Pues bien, si tienes la suerte de usar el tema Divi en tu blog WordPress, puedes combinarla con WooCommerce para crear una tienda online fantástica, escalable y que atraiga clientes como moscas.

En este post ahondaremos en los detalles de por qué elegir WooCommerce como plugin para tiendas online y por qué integrarlo con Divi.

También te mostraremos cómo configurarlo y te guiaremos para que sepas cómo publicar tu primer producto usando el módulo de tiendas de Divi.

Descubre la Mejor Plantilla WordPress del momento

Por qué usar WooCommerce como Plugin WordPress para eCommerce

WooCommerce es un plugin para tiendas online altamente personalizable y que es usado en nada más y nada menos que el 42% de todas las tiendas virtuales que existen.

Su flexibilidad hace que sea perfecto para prácticamente cualquier tipo de tienda online que se te ocurra. Este popular plugin te permite vender en tu blog WordPress tanto productos físicos como digitales (junto con una amplia gama de opciones de envíos y pagos), pudiendo incluso usarlo para vender productos de afiliado.

Cuenta con una excelente colección de características, una interface intuitiva y múltiples extensiones. Y lo que es más, el plugin básico es completamente gratuito, haciéndolo una opción viable para todo aquel que quiera crear una tienda online WordPress de una manera lo más económica posible.

Además, el plugin se integra a la perfección con la mayoría de los mejores themes WordPress del momento, incluyendo por supuesto Divi.

Cón más de 20 millones de descargas, la popularidad de WooCommerce habla por si misma. Aunque por supuesto hay otras opciones de plugins WordPress para crear tiendas online, como por ejemplo eCommerce Product Catalog y Ecwid Ecommerce Shopping Cart.

Aun así, dada la combinación de funcionalidad y coste de WooCommerce, éste sigue siendo el número uno y el elegido por la mayoría de los vendedores online.

Visto esto, en Elegant Themes se han asegurado de que Divi y WooCommerce sean totalmente compatibles y sin necesidad de hacer nada. Gracias al Shop Module de Divi, junto con WooCommerce, puedes obtener resultados increíbles. Y lo que es más, eligiendo las extensiones adecuadas, podrás conseguir una tienda online WordPress profesional y única que sería muy difícil de lograr por otros medios.

Descubre la Mejor Plantilla WordPress del momento

Cómo configurar WooCommerce

Aunque WooCommerce viene con miles de opciones, su configuración es en realidad muy sencilla gracias a su “onboard wizard“. Esta herramienta te guía a la hora de configurar las páginas deseadas, así como la tienda online, envíos, tasas e información de pagos.

Una vez que has instalado y activado el plugin, serás llevado de inmediato al asistente wizard. Si te lo saltas o bien no quieres usarlo todavía, siempre puedes acceder a él más tarde a través de la pestaña de ayuda situada en la esquina superior izquierda de la pantalla y navegando hasta el comando de Setup Wizard:

crear tienda online wordpress

Una vez que estás en el asistente wizard:

crear tienda virtual wordpress con WooCommerce

La página Setup section tiene solo un propósito informativo y te indica que se van a crear automáticamente varias páginas esenciales de la tienda online:

cómo crear una tienda online con WooCommerce

A continuación, la Store Locale page tiene campos para que especifiques la ubicación de tu tienda, la moneda y las unidades de peso y dimensiones preferidas:

tiendas online woocommerce

A continuación, tienes que decidir si enviarás productos físicos y las tasas:

crear tienda online WP

Finalmente, llegamos a la importante página de pago. Aquí puedes decidir exactamente qué métodos de pagos quieres usar:

crear tienda online con Divi

Ahora que toda la configuración está hecha, verás la página Ready!, que te indica que estás listo para empezar a crear tu primer producto:

crear tienda online wordpress

Aunque usar el asistente wizard es rápido y sencillo, en lugar de ello puedes elegir hacerlo manualmente y en el orden que quieras yendo a WooCommerce > Settings desde tu panel de control.

En cualquier caso, en este punto ya estarás listo para crear tu primer producto. ¡Averigüemos cómo hacerlo!

Cómo publicar el primer producto de tu tienda online usando el Divi Shop Module (en 4 pasos)

Hay varias formas en las que puedes usar WooCommerce con Divi. Por ejemplo, puedes usarlo sin acceder al Divi Builder, o usando Short Codes en un módulo de texto. Sin embargo, lo mejor es usarlo con el Shop Module, que es en lo que nos enfocaremos aquí.

Este módulo de tienda se sincroniza con las categorías de productos para que puedas organizar bien tu página principal. Viene además con un montón de opciones de personalización, para que puedas crear páginas de tienda visualmente atractivas y que atraigan clientes. Empecemos añadiendo un producto.

Paso 1: Añadir un producto

Una vez completado el asistente Setup Wizard, serás guiado a crear tu primer producto de la tienda online. Para ello simplemente has de clicar en el botón de “crear primer producto”. También puedes optar por crear tus productos más tarde yendo a Products > Add Product dentro de tu panel de administración WordPress.

De cualquier manera, usarás una nueva página en blanco para crear tu producto. En dicha página pondrás el nombre del producto en la casilla correspondiente y su descripción en el área designada para ello.

crear tienda virtual con wordpress y woocommerce

Bajando hasta la sección de Datos de Producto, verás muchas pestañas, incluyendo una que dice General (que es donde pondrás el precio), Inventario, y Envíos. Completa cada uno de los campos dentro de cada pestaña a tu conveniencia:

divi y woocommerce para tiendas online

Justo debajo de esto, encontrarás la sección de descripción corta de producto Product Short Description section. Esto funciona de manera similar a un extracto de un post de WordPress, y se mostrará junto al producto en las páginas donde aparezca.

Moviéndonos hacia la derecha de la pantalla, tenemos la opción de añadir imágenes. En la sección de imágenes de producto Product Image section, clica en Set product image y sube la imagen principal de tu producto. Luego puedes añadir más imágenes en la sección de galería de productos Product Gallery section:

crear una tienda online wordpress con tema Divi

Finalmente, tendrás que asignar una categoría al producto en la sección Product Category section (en la parte derecha del editor). Este es un paso importante ya que indica al módulo de tienda Shop qué producto debe mostrar:

tienda virtual woocommerce wordpress

Finalmente, clica en publicar y habrás creado tu primer producto! Lo siguiente es crear una página dedicada para mostrar tus productos.

Paso 2: Crear una nueva página

Dado que estarás insertando tus productos usando un módulo de tienda Shop module, necesitarás una página a la que añadirlos. Si has seguido el asistente Setup Wizard, WooCommerce habrá creado automáticamente una página en blanco llamada Shop. Si todavía no tienes esa Shop Page o bien deseas crear una nueva, navega a Pages > Add New en tu panel de control WordPress y selecciona el botón para usar el Divi Builder “Use The Divi Builder” para comenzar a crear tu diseño:

crear tienda online divi

La forma en que diseñes tu página depende completamente de ti – por ejemplo, podrías hacer que tuviera un diseño acorde con el resto de tu sitio web, o usar cualquier diseño que tengas guardado. Y por supuesto, no hay nada que te impida crear un look completamente diferente para las páginas de tu tienda – quizás con un estilo totalmente diferente al resto de tu sitio para ayudar así a resaltar tus productos.

Si eres nuevo en el uso del Divi Builder, puedes revisar esta documentación para empezar a usarlo. Divi también viene con dos diseños de tienda online ya hechos que podrían adaptarse a tus necesidades. Para acceder a ellos, primero clica en Load From Library:

crear tienda virtual wordpress

Desde ahí, ve hacia abajo hasta los dos diseños pre-establecidos que Divi ofrece y elige el que quieras:

diseño de tiendas online en wordpress

Si optas por uno de los diseños predefinidos, ya tendrás insertado el módulo Shop Module. En cambio, para diseños personalizados, tendrás que instalar el módulo tú mismo.

Paso 3: Inserta tu Shop Module

A continuación, hay que añadir productos a nuestras páginas. Los usuarios que estén diseñando una página de tienda personalizada, tienen que clicar en Insert Module donde quieran que aparezca el producto:

crear una tienda online con divi

A continuación bajar y seleccionar Shop:

crear tienda online con Divi

Verás la pestaña General Settings desde donde podrás personalizar el diseño del módulo. En primer lugar puedes decidir qué clase de productos quieres mostrar, incluyendo el más reciente, o el más vendido, o simplemente una categoría:

como crear tienda online

Una vez que has seleccionado un tipo de producto, indica cuántos productos te gustaría mostrar, antes de revisar qué categorías incluir, y especificando cuántas columnas mostrar:

como crear una tienda online wordpress

Finalmente, hay también un comando Order by section que te permite elegir cómo ordenador tus productos – por calificación, fecha o precio, por ejemplo.

El paso final es diseñar tu módulo.

Paso 4: Diseñar tu módulo

Una vez establecida la disposición de tu sitio, ahora es tiempo de darle tu estilo. Para ello tienes la pestaña Advanced Design Settings, donde te aparecerán una gran variedad de opciones:

como crear una tienda online en wordpress

Aquí tienes una extensa lista de opciones para dar estilo a tu Shop module, para que aparezca exactamente como quieras. Por ejemplo, puedes personalizar los colores del distintivo de venta, hacer superposición, personalizar las fuentes, etc…para que encajen a la perfección con el esquema de tu sitio. Puedes elegir además entre cientos de iconos flotantes, cambiar las fuentes del título y los precios y mucho más.

Para aquellos de vosotros a los que os gusta ensuciaros las manos con el código, es posible usar la pestaña Custom CSS para personalizar los elementos del módulo todavía más.

Descubre la Mejor Plantilla WordPress del momento

Conclusiones sobre la creación de una tienda online en WordPress con Divi y WooCommerce

Para destacar sobre tu competencia, es importante que tu sitio sea atractivo y funcional. Para mostrar tus productos, necesitas una solución rápida y fácil de usar, que además produzca resultados prácticos y sorprendentes.

El uso de WooCommerce en combinación con el módulo para tiendas de Divi “Shop module“, te permite mostrar tus productos de una manera elegante pero sin que esto te robe mucho tiempo.

Una vez que has instalado, activado y configurado el plugin, tendrás que:

  • Añadir un producto
  • Crear una nueva página
  • Insertar tu Shop module.
  • Dar estilo a tu módulo

Como ves, crear una tienda online WordPress con Woocommerce y Divi es sencillo, rápido, económico y los resultados te aseguro que son muy profesionales!! ¿Qué más se puede pedir?

Como ves, no necesitas ser diseñador web ni programador para crear tu propio eCommerce. Tan solo necesitas una buena plantilla y un buen plugin para lanzar tu negocio online y empezar a ganar dinero.