(11 votes, average: 4,91 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.
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
Plugin WooCommerce para Crear tiendas Online con 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:
Una vez que estás en el asistente wizard:
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:
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:
A continuación, tienes que decidir si enviarás productos físicos y las tasas:
Finalmente, llegamos a la importante página de pago. Aquí puedes decidir exactamente qué métodos de pagos quieres usar:
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:
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!
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
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.
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:
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:
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:
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:
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:
Desde ahí, ve hacia abajo hasta los dos diseños pre-establecidos que Divi ofrece y elige el que quieras:
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:
A continuación bajar y seleccionar Shop:
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:
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:
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:
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
Pues puede ser tuya a un precio de escándalo solo si te das prisa. Si te interesa dame tu email y te envío todos los detalles al instante.
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.
Hola Susana. Excelente tutorial y muy bien explicado, sin embargo a pesar de haber seguido tus pasos uno a uno no consigo que en la tienda se muestren las categorías a pesar de haberlo seleccionado ya desde el editor de Divi.
Imaginemos la situación: Tengo una tienda de ropa y como categorías tengo «Jerseys», «Pantalones» y «Chaquetas». Dentro de «jerseys», como subcategoría, quiero poner diferentes tejidos «algodón», «sintético», «lana»… y finalmente, dentro de cada sub-categoría los diferentes productos. Yo quisiera que, cuando alguien visite la tienda, primero seleccione la categoría, después la sub-categoría, y finalmente el producto. Lógico, ¿no? Pues vamos a hacerlo «aún más difícil». Quisiera además que esta página donde estén los productos, esté hecha con Divi para poder ponerle una cabecera con fotos, una barra lateral, y cualquier otra cosa que se me ocurra.
Pues no hay tu tía. Cuando desde Divi añado el módulo tienda y selecciono «MOSTRAR CATEORÍAS» y le marco las categorías que quiero que me muestre ¿qué aparece? ¡Exacto! Los productos, no las categorías.
La única solución es crear nueva página y, desde los ajustes de woocommerce, decirle que esa es la página de la tienda. Ah, y sobre todo, no editarla con Divi. Con lo cual… no puedo ponerle la cabecera ni todas esas personalizaciones.
¿Alguna sugerencia al respecto?
Gracias.
P.D: Ya he borrado toda la caché de la página, he hecho una limpieza de la base de datos, y lo he probado incluso desde varios ordenadores diferentes. Nada de nada.
Hola Alejandro!
Gracias por tus palabras!
Te comprendo perfectamente, lo mismo me pasaba cuando comencé a diseñar tiendas online con Divi hasta que descubrí los famosos shortcodes que te proporcionan en woocommerce y que te ayudan a «salsear» sin problemas tus productos, sus categorías, etc… Simplemente para que funcionen tienes que crear una nueva página como haces normalmente en wordpress, luego le dices que quieres diseñar con el Divi Builder y añades un módulo de texto. En él pegas el short code que quieras. Por ejemplo: Si quieres que aparezcan 4 productos «populares» en 4 columnas colocas este código:
. Si deseas que aparezcan los productos por categoría puedes poner este shortcode:
. El resto de la página queda libre para diseñar a gusto con el Divi Builder… Mucha Suerte y Gracias por pasarte por aquí!
Hola Susana, el problema está que cuando haces click en una categoría vuelve al diseño establecido por Divi, como puedo hacer para que las páginas de categorias se vean igual a la que creamos con el modulo shop?
Hola Leandro,
En ese caso la opción es modificar el código del archivo correspondiente a las categorías. Es más complejo, si necesitas mas detalle me lo dices y te ayudo con mucho gusto. Mucha Suerte!!
Hola Susana!
Gracias por el tutorial, muy bien explicado. Tengo un problemilla en la parte de la tienda. No puedo cambiar la fuente del título, tamaño, color..del nombre del producto. Si que puedo variar el aspecto del precio pero no el nombre del producto. A ver si puedes echarme una mano.
Un saludo y gracias de antemano!
Hola Edén!
Para modificar esos datos debes: abrir la página de alguno de tus productos y luego desde el icono superior izquierdo en el que pone el nombre de tu tienda o blog y al colocarte se despliegan varias opciones (Escritorio, Temas, Widget. Menús, Personalizador de temas y Personalizador de Módulos) clica en «Personalizador de temas» se actualiza la ventana y aparece una barra lateral a la izquierda. En esta barra ve a Ajustes generales > Tipografía y aquí cambiar las características de los títulos, incluido el tipo de letra, color, tamaño separación de interlineado, etc… Estos cambios se verán reflejados en todo tu sitio, incluidos los productos de Woocommerce y, ya que tienes la entrada del producto abierta junto con esta barra latera e menús podrás ver los cambios automáticamente… Espero haberte ayudado… Mucha Suerte!!
Hola Susana,
Me está encantando crear mi propio ecommerce. He partido desde cero pero estoy cogiéndole el truco y cada vez me gusta más.
Es una suerte que gracias a plantillas como Divi cualquier persona pueda hacer un blog o una tienda online por si misma…y lo siento por ti que eres diseñadora gráfica y verás disminuir tus ingresos!!
Gracias y un saludo.
Woocommerce esta integrado en la plantilla Divi? o hay que instalarlo por separado? gracias!
Hola Jorge!
Divi esta preparado para trabajar con woocommerce sin ningún problema pero al ser el servicio de un tercero tienes que descargar su plugin e instalarlo… Mucha suerte!!