Lo más destacado del complemento Divi: WC Product Builder

No hay duda de la popularidad de WooCommerce para WordPress. Incluso con su popularidad, el diseño de la página de productos de WooCommerce es limitado. Incluso con temas como Divi y Extra , no se puede hacer mucho para cambiar el diseño. Afortunadamente, hay varios complementos de terceros creados para Divi que hacen exactamente eso.

WC Product Builder de DiviKingdom es uno de estos complementos. Proporciona cada elemento de producto de WooCommerce como un módulo Divi (20 módulos Divi en total), agrega 14 códigos abreviados para que pueda colocar elementos de WooCommerce dentro de los módulos Divi en la página del producto y agrega Divi Builder a las páginas del producto para que pueda crear prácticamente cualquier tipo. del diseño de la descripción del producto que puedas imaginar. También incluye 8 demostraciones de diseños de página de productos.

En este complemento destacado, veremos el complemento y cada una de las demostraciones. Las imágenes de los ejemplos se tomaron del paquete de diseño gratuito Photo Marketplace de Elegant Theme .

Instalación del Creador de productos de WC

Cargue y active el complemento de forma normal. Si aún no tienes WooCommerce activado, te avisará para que lo actives.

A continuación, deberá ingresar su clave de activación. En el menú del panel, vaya a Configuración , WC Product Builder . Seleccione Actualizaciones y pegue su clave. Guardar cambios.

Configuración general y códigos abreviados de WC Product Builder

En la pestaña Configuración general, puede elegir la página de diseño de producto predeterminada en un cuadro desplegable. Estos son diseños en su Biblioteca Divi. Esto le permite crear un diseño prefabricado con Divi Builder para establecerlo como predeterminado. Puede anular el diseño predeterminado para productos específicos si lo desea eligiendo un nuevo diseño en la página del producto.

Asegúrese de seleccionar Activar para Divi Builder para Descripción del producto. Siempre he agregado esto a través de PHP, pero prefiero hacer clic en un botón. Esto le permite usar Divi Builder para crear diseños dentro del área de descripción del producto del editor de productos de WooCommerce.

La pestaña Códigos cortos proporciona una lista de 14 códigos cortos para que pueda copiar y pegar elementos de Woo, como descripciones e imágenes, dentro del área de contenido de los módulos Divi, como texto, controles deslizantes, pestañas, conmutadores, etc. Aunque requiere que navegue hasta este page para obtener el shortcode, prefiero esto a ir a otro sitio web para obtener los shortcodes. También están disponibles en el sitio web del desarrollador si lo necesita.

Uso de WC Product Builder en publicaciones de productos de WooCommerce

Se agregan un par de características nuevas a la página del producto:

  • Elija el diseño de división de productos
  • Imagen de portada del producto

Si lo ha habilitado, Divi Builder se agrega automáticamente al editor de productos de WooCommerce, lo que le permite usar Divi Builder para crear un diseño para el área de descripción del producto. Los diseños de los productos se crean dentro de la Biblioteca Divi. Puede usar el diseño predeterminado o elegir un nuevo diseño en el cuadro desplegable.

Creación de un diseño de descripción de producto de WC Product Builder

El área de descripción del producto estándar utiliza el editor TinyMCE. La imagen de arriba muestra la descripción estándar.

Esta es el área de descripción dentro de la página del producto. Se pueden agregar otros contenidos, como imágenes. Por supuesto, se puede hacer mucho más con Divi Builder.

Creé un diseño con Divi Builder y agregué un control deslizante.

El área de descripción ahora muestra mi diseño. También agregué un fondo y cambié el texto a claro.

Módulos de creación de productos de WC

WC Product Builder agrega 20 nuevos módulos a Divi Builder para ayudarlo a crear páginas de productos personalizadas. Cada elemento de WooCommerce es un módulo separado para que pueda diseñar un diseño utilizando solo los elementos que desee y colocándolos donde desee. Los módulos tienen íconos únicos, lo que los hace fáciles de encontrar de un vistazo.

Creación de un diseño de generador de productos de WC en la biblioteca Divi

Creé un diseño en la Biblioteca Divi usando los módulos WooCommerce y Divi. En la página del producto WooCommerce, seleccionaré el diseño del cuadro desplegable.

El diseño que ha creado se mostrará en lugar del predeterminado. En realidad, esta es una modificación de la demostración n.º 1, por lo que no tuve que crear el estilo ni gran parte del diseño del diseño. Como cualquier buen diseño de diseño, las demostraciones son excelentes para ahorrar tiempo.

Demostraciones del creador de productos de WC

Las 8 demostraciones del sitio web del desarrollador se incluyen como una descarga independiente para ayudarlo a comenzar rápidamente. Varios de ellos incluyen un estilo personalizado. Al menos uno incluye un ejemplo del uso de códigos cortos.

Cargue las demostraciones dentro de la Biblioteca Divi. Los diseños no se cargan en Divi Builder como los diseños normales, por lo que no podrá editarlos desde Divi Builder en el editor de productos Woo.

Para editarlos, seleccione Editar dentro de la Biblioteca Divi (como cualquier diseño en la biblioteca). También puede cargarlos o crearlos dentro de publicaciones o páginas y guardarlos en la biblioteca para usarlos dentro de las páginas de productos.

Para usarlos, seleccione el diseño que desee del cuadro desplegable a la derecha etiquetado como Elegir diseño de división de producto . No pude obtener una vista previa de los diseños, así que para ver el diseño tuve que actualizar el producto. La imagen de arriba muestra la configuración que usaré para cada una de las demostraciones. Agregué un texto ficticio para las descripciones del producto, la imagen de portada del producto, la imagen destacada y la galería de productos.

Diseño de producto predeterminado de WooCommerce

Este ejemplo utiliza el diseño estándar del producto Woo. También agregué algunos productos relacionados para que podamos ver cómo se manejan en las demostraciones.

demostración 1

La demostración 1 agrega una imagen de encabezado y coloca el nombre del producto dentro del encabezado. También agrega todas las categorías dentro de una barra lateral.

demostración 2

Demo 2 agrega una barra de navegación superior sobre una imagen de encabezado. La imagen del producto se superpone al encabezado.

demostración 3

La demostración 3 incluye un encabezado con paralaje, un video incrustado y una gran galería de imágenes dentro de una cuadrícula junto a los productos destacados.

demostración 4

La demostración 4 usa la imagen de portada del producto como imagen de encabezado y no muestra la imagen del producto dentro de los detalles del producto. Cada uno de los elementos están dentro de una sola fila.

demostración 5

Demo 5 agrega un encabezado de fondo sólido con migas de pan , estilo a filas individuales y botones de estilo para que coincidan.

demostración 6

Demo 6 coloca los productos relacionados como una barra lateral dentro del área de descripción.

demostración 7

Demo 7 agrega información de envío dentro del área del carrito de compras y proporciona información usando códigos cortos dentro de pestañas con estilo.

demostración 8

Demo 8 hace todo lo posible con un CTA de ancho completo, un temporizador de cuenta regresiva con estilo, anuncios publicitarios, un diseño de información elegante, CTA que alterna con imágenes y descripciones, testimonios y CTA de ancho completo. Este ejemplo solo usa un módulo Woo, por lo que no usa la información de mi producto.

Uso de códigos cortos de WC Product Builder con módulos Divi

Los códigos abreviados le permiten usar módulos WooCommerce dentro de módulos Divi regulares en páginas y diseños de productos. Esto abre algunas posibilidades de diseño, lo que le permite colocar productos dentro de pestañas, controles deslizantes, interruptores, acordeones, etc.

Los códigos abreviados solo se aplican al producto para esa página de producto, por lo que no puede usarlos en páginas, publicaciones o widgets normales.

Agregué un conmutador al área CTA de la demostración n.° 8 y coloqué códigos cortos para mostrar el título, la descripción, el precio, la calificación y el botón Agregar al carrito.

Los elementos de los códigos abreviados se muestran dentro de la palanca. Incluso muestra la descripción que creé con Divi Builder. Probé varios módulos que pueden tomar un código abreviado y cada uno funcionó como se esperaba.

Aquí hay un vistazo al módulo de pestañas, que muestra la descripción que creé con Divi Builder.

Usando WC Product Builder con Extra

Los diseños funcionan igual de bien con Extra. Esta es la Demo 5. La estoy usando sin una barra lateral.

También puede usarlo dentro del área de descripción del producto, que funciona bien con las características de WooCommerce de Extra. El ejemplo anterior usa el diseño de producto estándar de WooCommerce pero también usa la descripción del producto que creé usando Divi Builder.

Licencia, documentación y dónde comprar

Hay tres licencias disponibles:

  • Un sitio web – $19
  • 5 sitios web – $29
  • Ilimitado – $39

La documentación se proporciona en el sitio web del desarrollador como una serie de publicaciones de blog para ayudarlo a responder preguntas y comenzar.

El complemento se puede comprar desde el sitio web del desarrollador .

pensamientos finales

WC Product Builder convierte cada elemento de WooCommerce en un módulo individual, que agrega muchos módulos a Divi Builder para crear nuevos diseños de productos de WooCommerce. También agrega Divi Builder al área de descripción del producto, y puede agregar 14 elementos diferentes a los módulos Divi usando códigos cortos. Esto crea muchas posibilidades de diseño. Incluso han incluido 8 diseños de demostración para despertar su imaginación y ayudarlo a comenzar.

Encontré el complemento fácil de usar. Los diseños fueron especialmente útiles. Me alegro de que hayan incluido un ejemplo del uso de los códigos abreviados. Me gustaría ver aún más ejemplos con códigos abreviados y algunos que usen la descripción del producto. Las demostraciones ahorran mucho tiempo de diseño. Si está interesado en crear nuevos diseños para sus páginas de productos de WooCommerce, vale la pena echarle un vistazo a WC Product Builder.

Queremos escuchar de ti. ¿Ha utilizado WC Product Builder? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada vía 660917131 / shutterstock.com