Si has llegado hasta aquí es porque estás gestionando un comercio electrónico o pretendes hacerlo, y para ello deberás elegir las mejores herramientas.

En este aspecto, la mezcla más explosiva que conozco es el plugin WooCommerce más la plantilla Divi, de Elegant Themes.

Con esta combinación, un particular con unos conocimientos mínimos puede crear su tienda online desde cero y a su gusto, ya que ambas herramientas casan casi a la pefección, ahorrándote tiempo y dinero.

Existen infinidad de temas y plantillas compatibles con WooCommerce que puedes usar en tu web, pero en este artículo te doy mi opinión con ejemplos de por qué Divi es una de las mejores plantillas para una web con WooCommerce.

¿Por qué usar WooCommerce + Divi?

Antes de nada, especificar que WooCommerce es un excelente plugin para WordPress que convierte tu web en una tienda online y Divi es una de las mejores plantillas para WordPress.

• Todas las plantillas para WordPress funcionan con WooCommerce, pero no todas están adaptadas.
  Es decir, aunque el proceso de compra funcione correctamente, el diseño web puede verse desordenado o con una apariencia poco profesional.
  A veces, la plantilla ni siquiera incluye los archivos propios de WooCommerce (Página de Carrito, Página de Tienda, Página de Pago y Página de Cuenta del Cliente y Ficha de Producto).
• En este sentido, la plantilla Divi está completamente adaptada a WooCommerce, haciendo que funcione todo el sistema de compra correctamente y dejando un diseño limpio y atractivo a la web. Esto te facilitará enormemente todo y hará que te ahorres otras muchas herramientas.
• Además, la plantilla Divi incluye en las opciones de diseño un módulo de «Tienda» en el que se añade automáticamente un listado con tus productos. Puedes configurar el módulo tienda de Divi para que ordene los productos según los más vendidos, destacados, en oferta, recientes, mejores valorados y por categorías de productos.
• Mencionarte que el proveedor de plugins y temas Elegant Themes también ofrece Divi como plugin constructor web, para que lo utilices con cualquier otra plantilla de WordPress, pero ten en cuenta que las ventajas de usar directamente la plantilla Divi es que todo resulta mucho más sencillo y supone menos peso para web.
  Aún así, tanto plantilla como plugin están bastante optimizados y tienen una velocidad de carga rápida que no interferirá en el posicionamiento de tu web.
• Por último destaco que, tanto el plugin WooCommerce como la plantilla Divi tienen un gran equipo detrás que se encarga de su mantenimiento, soporte y actualizaciones. Esto es algo esencial si quieres mantener tu web en el tiempo. En el caso de WooCommerce es Automattic y en el caso de Divi es Elegant Themes.

Cómo crear una tienda online con WooCommerce y el tema Divi

Los pasos principales que debes seguir para crear la web completa son:

• Instalar el CMS WordPress desde tu servidor web.
• Instalar el tema Divi de Elegant Themes en WordPress.
• Instalar el plugin WooCommerce en WordPress (es gratuito).
• Configurar todas las opciones del plugin WooCommerce para que tu tienda funcione correctamente y subir todos tus productos.
• Diseñar con el constructor de Divi la Home de tu web, las páginas, el blog, la tienda, las fichas de producto…
• Añadir las demás funcionalidades complementarias que necesites, como cuenta en proveedor de Email Marketing, Redes Sociales, plugin para SEO, plugin para chat de atención al cliente…

La configuración de WooCommerce es algo extensa, por ello te recomiendo visitar la web de Woodemia, donde puedes encontrar trucos, turoriales, códigos, plugins complementarios y todo lo necesario para saber cómo configurar este plugin y comenzar a vender tus productos por internet de forma profesional.

Al elegir Divi como tema para tu tienda online, las páginas propias de WooCommerce (que se crean automáticamente al instalar el plugin) tendrán el diseño que Divi otorga a éstas.

Dentro de ese diseño, tú puedes personalizar colores de menús, textos, estilo de los botones de compra, estilo de los widgets, tipografía… creando una imagen de tienda que defina tu marca.

En las siguientes imágenes te muestro un ejemplo de diseño de tienda online con WooCommerce y la plantilla Divi, con un diseño sencillo de una tienda real, tal y como lo ve el cliente al entrar en ella. Ten en cuenta que algunas no se ven a tamaño real para poderte mostrarte todo el contenido que aparece.

Página de Tienda

La Página de Tienda de WooCommerce es la que muestra todo el catálogo de tus productos online.

Una vez que introduces los productos manualmente con todos sus atributos, descripciones, precios e imágenes, se añaden automáticamente a esta Página de Tienda.

Lo ideal es configurar el Sidebar lateral de la tienda online con opciones de compra que ayuden a orientar al cliente hacia el producto que busca.

Ficha de producto

Al clicar sobre un producto determinado de la Tienda, se mostrará la ficha de ese producto, donde aparece la descripción, el precio, el botón de añadir al Carro, la galería de imágenes, las valoraciones de los clientes…

Si clicas en cada imagen individual del producto, ésta se ampliará a pantalla completa.

Lógicamente, las imágenes que utilices serán un requisito imprescindible para que el diseño de la Tienda quede profesional.

Página de carrito

Si el cliente añade el producto al Carro, le aparecerá el resumen de su compra, donde se muestra el resumen de la compra, el desglose de precios y el botón de «Finalizar Compra»

En esta página no conviene incluir Sidebar lateral para que el cliente no se pierda la atención en la compra y pueda «escaparse» por otra vía de la página. Esta opción se elimina seleccionando «Ancho completo» en la edición de la página.

Página de pago

El siguiente paso es la Página de pago o de Checkout. Aquí aparecerán los campos de envío y facturación que el cliente debe rellenar para que el producto se envíe con sus datos.

En esta página también es muy recomendable eliminar el Sidebar lateral.

Página de cuenta del cliente

Por último, esta es la página donde el cliente se logea para ver el estado de sus pedidos y los datos personales guardados en su cuenta.

Recuerda que estos son ejemplos de diseño de una tienda online con la plantilla Divi, pero que la parte de precios, campos para rellenar, opciones de envío… corresponden todas a la configuración del plugin WooCommerce.

Lógicamente, estos diseños se pueden modificar de estilo usando CSS, por ejemplo, y crear diseños personalizados.

Yo personalmente, apenas suelo cambiar nada de estas páginas de compra, ya que me parece que el diseño es muy acertado para un eCommerce y guía completamente al usuario hacia el proceso de compra.

En definitiva, WooCommerce y Divi se fusionan a la perfección para crear una tienda online profesional sin necesidad de tener conocimentos avanzados de diseño. Al elegir el tema Divi para crear una web conseguirás las claves para vender en un eCommerce, la buena presentación de los productos y la buena usabilidad de la web.