Para vender productos en su sitio web de WordPress, necesitará un complemento de comercio electrónico estable y confiable. WooCommerce ha dominado el campo, y es comprensible. Con sus potentes funciones integradas y su gama de extensiones opcionales , ofrece mucho a todos los posibles propietarios de tiendas en línea. Combine este complemento con el poder de Divi y podrá crear un sitio de comercio electrónico increíble y escalable que atraiga a los clientes y ayude a generar ventas.
En esta publicación, entraremos en detalles sobre por qué amamos a WooCommerce y por qué está integrado con Divi. También le mostraremos cómo configurarlo y lo guiaremos a través de la publicación de su primer producto utilizando el módulo Divi Shop . ¡Empecemos!
WooCommerce es un complemento de comercio electrónico altamente personalizable que impulsa el 42% de todas las tiendas en línea . Su flexibilidad lo convierte en la opción perfecta para prácticamente cualquier entorno de comercio electrónico . El complemento le permite vender productos físicos o digitales (junto con múltiples opciones de envío y pago), e incluso puede usarlo para vender artículos de afiliados.
Cuenta con un excelente conjunto de características, una interfaz intuitiva y una increíble variedad de extensiones . Además, el complemento básico es completamente gratuito, lo que lo convierte en una opción viable para todos los que buscan configurar una tienda en línea. También se integra a la perfección con muchos temas de WordPress , incluido (por supuesto) Divi.
Con más de 20 millones de descargas, la popularidad de WooCommerce habla por sí sola. Sin embargo, hay otras opciones cuando se trata de complementos de comercio electrónico, incluido el catálogo de productos de comercio electrónico y el carrito de compras de comercio electrónico Ecwid . Aun así, dada la combinación de funcionalidad y costo de WooCommerce, sigue siendo la opción número uno para muchos vendedores en línea.
Dado esto, nos hemos asegurado de que Divi sea totalmente compatible con WooCommerce, desde el primer momento. Al utilizar el módulo Shop junto con WooCommerce, puede obtener resultados deslumbrantes. Además, al elegir las extensiones correctas , puede crear una tienda increíble y única que podría ser difícil de lograr con otras soluciones.
Cómo configurar WooCommerce
Aunque WooCommerce viene con una miríada de opciones como estándar, la configuración es realmente muy sencilla gracias a su ‘asistente de incorporación’ . Esta herramienta lo guía a través de la configuración de las páginas requeridas, así como la configuración de la tienda, el envío, los impuestos y la información de pago.
Una vez que haya instalado y activado el complemento, automáticamente accederá al asistente de configuración. Si se lo pierde (o aún no está listo para ejecutarlo), puede acceder a él más tarde haciendo clic en Ayuda en la esquina superior izquierda de la pantalla y luego navegando hasta Asistente de configuración > Asistente de configuración :
Una vez que esté en el asistente, presione Let’s Go! Para empezar:
La sección Configuración de la página tiene fines informativos y le permite saber que varias páginas esenciales de la tienda se crearán automáticamente:
Continuando, la página Store Locale tiene campos para que especifiques la ubicación de tu tienda, la moneda y las unidades de peso y dimensiones preferidas:
A continuación, debe decidir si enviará productos físicos y cobrará impuestos sobre las ventas:
Finalmente, llegamos a la página crucial de Pagos . Aquí puede decidir exactamente cómo va a aceptar el dinero que tanto le costó ganar:
Ahora que ha ingresado todas sus configuraciones, verá el mensaje ¡ Listo! página, que le permite saber que está listo para comenzar a crear su primer producto:
Aunque usar el asistente es rápido y simple, en su lugar, puede optar por modificar manualmente la configuración seleccionando WooCommerce> Configuración desde su tablero.
En cualquier caso, en este punto estarás listo para crear tu primer producto. Veamos cómo hacerlo.
Cómo publicar tu primer producto usando el módulo Divi Shop (en 4 pasos)
Hay varias formas de usar WooCommerce dentro de Divi. Por ejemplo, puedes usarlo sin acceder al Divi Builder , o usando shortcodes en un módulo de Texto . Sin embargo, recomendamos usarlo con el módulo Tienda , que es en lo que nos centraremos aquí.
Este módulo se sincroniza con sus categorías de productos para que pueda organizar, organizar y ajustar fácilmente su escaparate. También viene con una gran cantidad de opciones de personalización para que pueda crear páginas de tiendas visualmente impresionantes para atraer visitantes. Comencemos agregando un producto.
Paso #1: Agregar un Producto
Una vez que haya completado el asistente de configuración, se le pedirá que cree su primer producto. ¡Simplemente haga clic en Crear su primer producto! botón. Sin embargo, puede optar por omitirlo, creando sus productos más tarde navegando a Productos> Agregar producto en su panel de WordPress. De cualquier manera, utilizará una nueva página en blanco para crear su entrada de producto. Aquí, ingrese el nombre de su producto en el cuadro de título y su descripción en el área de contenido principal:
Bajando a la sección Datos del producto , verá varias pestañas, incluida General (que es donde ingresa su precio), Inventario y Envío . Complete cada campo dentro de estas pestañas según sea necesario:
Directamente debajo de esto, encontrará la sección Descripción breve del producto . Esto funciona de manera similar a un extracto de una publicación regular de WordPress y se mostrará junto con el producto en las páginas de listado.
Pasando al lado derecho de la pantalla, tenemos la opción de agregar imágenes. En la sección Imagen del producto , haz clic en Establecer imagen del producto y sube la imagen principal de tu producto. Puede agregar más imágenes a la sección Galería de productos :
Finalmente, deberá asignar una categoría a su producto en la sección Categoría de producto (también en el lado derecho del editor). Este es un paso importante ya que le dice al módulo de Tienda qué productos mostrar:
Finalmente, haz clic en Publicar y habrás creado tu primer producto. El siguiente paso es crear una página dedicada para mostrar sus productos.
Paso #2: Crear una nueva página
Dado que insertará sus productos utilizando un módulo de Tienda, necesitará una página para agregarlos. Si pasó por el asistente de configuración, WooCommerce habría creado automáticamente una página en blanco llamada Tienda . Si aún no tiene una página de la tienda (o desea crear una nueva), vaya a Páginas > Agregar nuevo en su panel de control de WordPress, luego seleccione el botón Usar The Divi Builder para comenzar a crear su diseño:
La forma en que diseñe su página depende completamente de usted; por ejemplo, es posible que desee hacer coincidir el diseño del resto de su sitio o usar cualquier diseño que ya haya guardado. Por supuesto, no hay nada que le impida crear un aspecto completamente diferente para las páginas de su tienda, tal vez con un estilo completamente contrastante para ayudar a exhibir los productos.
Si es nuevo en el uso de Divi Builder, puede consultar nuestra documentación para comenzar. Divi también viene con dos diseños de tienda preconstruidos , uno de los cuales podría ser justo lo que estás buscando. Para acceder a estos, primero haga clic en Cargar desde biblioteca :
Desde aquí, desplácese hacia abajo hasta los dos diseños de tienda y elija el que desee:
Si elige un diseño predefinido, el módulo Tienda ya estará insertado para usted. Sin embargo, para diseños personalizados, querrá agregar el módulo usted mismo.
Paso #3: Inserte su Módulo de Tienda
A continuación, queremos agregar productos a nuestras páginas. Para aquellos que crean un diseño de página de tienda personalizado, haga clic en Insertar módulo(s) donde quiera que aparezca su producto:
A continuación, desplácese hacia abajo y seleccione Comprar :
Accederá a la pestaña Configuración general , donde puede personalizar el diseño del módulo. En primer lugar, puede decidir qué tipo de productos desea mostrar, incluidos los más recientes, los más vendidos o simplemente una sola categoría:
Una vez que haya seleccionado un tipo de producto, ingrese cuántos productos desea mostrar, antes de verificar qué categorías incluir y especificar cuántas columnas mostrar:
Finalmente, también hay una sección Ordenar por para jugar, que le permite elegir cómo ordenar sus productos, por clasificación, fecha o precio, por ejemplo.
El paso final es diseñar su módulo apropiadamente.
Paso #4: Dale estilo a tu módulo
Una vez que su diseño esté ordenado, puede diseñarlo. Dirígete a la pestaña Configuración avanzada de diseño , donde te encontrarás con una gran cantidad de opciones:
Aquí, se le brinda un conjunto completo de opciones para diseñar su módulo de tienda para que aparezca exactamente como lo desea. Por ejemplo, puede personalizar los colores de la insignia de venta, el cursor, la superposición del cursor y las fuentes para que combinen perfectamente con su combinación de colores. También puede elegir entre cientos de íconos flotantes, cambiar las fuentes de título y precio, y más.
Para aquellos de ustedes que deseen ensuciarse las manos con el código, pueden usar la pestaña CSS personalizado para personalizar aún más los elementos del módulo. En cualquier caso, si está buscando inspiración, puede consultar nuestra lista de increíbles sitios de comercio electrónico de Divi , junto con nuestro tutorial de estilo de tienda , que ofrece consejos útiles para lograr algunos estilos únicos.
Conclusión
Para destacar, es importante que su sitio sea atractivo y funcional. Para exhibir sus productos, querrá una solución rápida y fácil de usar, que también brinde resultados sorprendentes y prácticos.
El uso de WooCommerce en combinación con el módulo Divi’s Shop le permite mostrar sus productos de manera hermosa, sin que se convierta en un tiempo perdido. Una vez que haya instalado, activado y configurado el complemento, querrá:
- Añadir un producto.
- Crear una nueva página.
- Inserta tu módulo de Tienda.
- Dale estilo a tu módulo.
¿ Tiene alguna pregunta sobre el uso de WooCommerce con Divi ? Háganos saber en la sección de comentarios a continuación, ¡y no olvide suscribirse para poder seguir la conversación!
Imagen en miniatura del artículo de Zakharchenko Anna / shutterstock.com.