Crear un modelo de hoja de productos WooCommerce con Divi es posible gracias a dos características: WooCommerce Builder y Theme Builder.
Con ellos, podrás crear plantillas temáticas y asignar a plantillas de página Su sitio. Por ejemplo: error de página de plantilla 404, página de búsqueda plantilla o plantilla de artículo del blog.
Así que, en unos pocos clics, vas a cambiar la apariencia de sus hojas de producto, si usted tiene 1 o 1000 !!!
En este artículo, no voy a explicar cómo crear una tienda en línea con WooCommerce, mon ebook-training "WooCommerce: the Guide" Por eso. Te aconsejo que si quieres añadir una tienda a tu sitio de escaparate y no sabes cómo hacerlo...
Así que en este artículo, nos enfocaremos en el hoja de productos Ella misma y veremos cuáles son las posibilidades de Divi.
- 1 – ¿Podemos actuar en una tienda WooCommerce existente?
- 2 - Crear hoja de productos WooCommerce
- 3 – Módulos Divi utilizados dentro de una hoja de producto
- 4 - Crear una plantilla para todas sus hojas de productos
- 5 - Crear un modelo basado en las categorías de productos
- 6 - Otras opciones disponibles
¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.
1 – ¿Podemos actuar en una tienda WooCommerce existente?
Si instalas un tienda online en un sitio WordPress utilizando Divi 4.0 Hoy, la pregunta no surge...
Por otro lado, si ya tienes una tienda con decenas o cientos de productos, entiendo que eres reacio a la idea de actualización Divi.
No te preocupes. puede sin problema de actualización Divi y empezar a disfrutar de sus nuevas características.
Y eso es lo que vamos a ver en el resto de este artículo...
2 - Crear hoja de productos WooCommerce
Si acaba de instalar y configurar WooTrade, usted puede crear su primer producto yendo a la pestaña Productos. Simplemente haga clic en "Crear un producto".
Si ya tiene una tienda WooCommerce, esta pestaña listará todos sus productos existentes...
Lee también: ¿Cómo personalizar la página de la tienda WooCommerce con el Divi Theme Builder?
2.1 – Hoja de producto con el editor de WordPress predeterminado
Esto es lo que su hoja de producto de back-office parece:
En este editor (clasic/default WordPress editor), usted necesitará proporcionar toda la información para su producto:
- Introduzca el título de su producto.
- Escribe una descripción "long".
- Llenar todos los campos requeridos para la venta: precio, tipo de producto, acciones, impuestos, etc.
- Escribe una breve descripción.
- Añadir la imagen principal del producto.
- Añadir más imágenes para formar la galería de imágenes del producto (opcional).
- Asignar una categoría a su producto.
- Elija la plantilla de página: con o sin barra lateral. Esta acción se vuelve opcional porque lo haremos construir el diseño de esta hoja utilizando el tema del constructor.
- Publique su producto.
En esta etapa, aquí está cómo luce su hoja de productos de gama delantera:
Este sitio es "virgin", no ha sido personalizado y el diseño presentado es el básico de Divi.
No es mucho. Glamour¿Verdad?
2.2 - Ficha de producto con Divi Builder
Siempre desde la oficina trasera, si hace clic en el botón morado "Use Divi Generator", aquí está lo que aparece :
Luego descubrimos El viejo Divi Builder, el que estaba disponible en la oficina trasera…
Usando el drag & drop (slide y drop), se puede reorganizar fácilmente la estructura de su hoja de productos WooCommerce.
También puede abrir la configuración de cada módulo para personalizarlos...
Nota: por ahora, los cambios que haces en esta hoja de productos sólo aparecerá dentro de ella. Si utiliza este método, entonces tendrá que comenzar de nuevo el diseño para cada una de sus hojas de productos. Lo que sería contraproducente...
2.3 – Ficha de producto con Visual Builder
Si hace clic en el botón "Construyendo en el frente", procederá a editar su hoja de producto en modo visual.
Sigue siendo mejor, ¿no?
Pero esto no es suficiente para asignar este diseño a todas sus hojas de datos del producto. Con este método, de nuevo, siempre tendrás que empezar por el diseño de cada producto...
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
3 – Módulos Divi utilizados dentro de una hoja de producto
Uno hoja de productos básicos se compone de varios elementos "mandatorios" – o más bien necesario – como el precio o el botón para añadir a la cesta por ejemplo. Otros elementos pueden convertirse en opcionales si decide...
De hecho, como se puede ver en esta captura, la mayoría de la WooCommerce Módulos de construcción se utilizan dentro de una hoja de producto. En éste encontramos:
- Woo Breadcrumb
- Woo Cart Notice
- Woo Images
- Woo Title
- Woo Rating
- Woo Price
- Woo Descripción
- Woo Add to Cart
- Woo Meta
- Woo Tabs
- Woo Upsell
- Woo Productos relacionados
Existen otros módulos pero no aparecen aquí porque este formulario no lo requiere. Este es a menudo el caso de los productos desmaterializados (sin stock) o de los productos que todavía no tienen aviso (Woo Reviews), por ejemplo:
- Woo Stock
- Woo Opiniones
- Woo Información adicional
- Woo Gallery
Así que si lo estás construyendo de cualquier habitación diseño de su hoja de productostenga cuidado de no eliminar algunos módulos importantes.
4 - Crear una plantilla para todas sus hojas de productos
Esta es una característica que deleitará a la mayoría de los propietarios de un sitio WooCommerce con Divi: la posibilidad de crear un modelo aplicable a todos (o no) productos de la tienda (los ya publicados como los que vienen).
La idea no es construir el diseño, producido por el producto, como se ve en los capítulos anteriores, sino construirlo de una vez por todas y grabarlo como "modelo".
Para hacer esto, simplemente crearás un plantilla temática desde la pestaña Theme Builder.
Haciendo clic en el icono "+" Añadir nueva plantilla, simplemente asigna a la opción Todos los productos.
Esta plantilla de tema actuará por defecto en todas las hojas de productos de su tienda.
En términos absolutos, la adición de Global Header y Global Footer es opcional. Lo que realmente nos interesa aquí es añadir un Personal y configura 1 sola vez, para aplicar a todas las hojas de datos producidas.
Cuando editas esto Personal, te encontrarás en el entorno Visual Builder y podrás añadir secciones, líneas y módulos, como lo harías al construir un diseño de página.
Pero hay varias cosas que saber:
4.1 – Use módulos WooCommerce para construir el modelo
Construye su hoja de producto tanto utilizar los módulos WooCommerce...
- Insertar un módulo Woo...
- En el caso del módulo Woo Price, aparece un precio "ficticio".
- Elija "Este producto" : importante!
- Cambiar el estilo: color, tamaño de texto, sombra, animación etc.
- Agregue configuraciones avanzadas si es necesario.
- Guarda.
Al insertar módulos Woo, elija "Este producto".
"Este producto" permite utilizar la información del producto mostrado. Así que no importa en qué ficha de producto estás, el precio variará basado en la información ingresada en el momento de su creación (Capítulo 2.1 de este Artículo).
4.2 - Uso del contenido dinámico
En una hoja de producto, también puede añadir otra Módulos Divi : texto, imagen, etc.
Además, algunos módulos se vuelven interesantes si los utiliza para mostrar "Contenido dinamico".
- Añadir Módulo de texto
- Haga clic en icono "Use Contenido Dinámico"
- Seleccione el contenido dinámico que desea mostrar. En la captura de pantalla, esta es la « Categorías de Correos ».
- Esto mostrará las categorías asignadas a cada producto.
Más información sobre contenido dinámico.
4.3 – El papel del módulo Post Content en la hoja de productos
La mayoría de los módulos WooCommerce son esenciales. Pero... Para qué es el módulo Contenido Post, apareció desde la versión 4.0 de Divi?
Si inserta, su hoja de producto mostrará la "descripciones largas" (Pastille No 2 del Capítulo 2.1 de este Artículo).
Esta larga descripción utiliza un editor de texto clásico donde se pueden añadir texto e imágenes.
5 - Crear un modelo basado en las categorías de productos
En el capítulo anterior se estableció el diseño de todas las hojas de productos de la tienda.
Sin embargo, usted no tiene que utilizar el mismo diseño para todos sus productos. Usted podría crear varias plantillas (siempre desde el Theme Builder) y asignarlas a ciertos tipos de productos.
Puede crear provisiones basadas en categorías de productos, por ejemplo.
En la captura anterior, un diseño fue asignado a la categoría "Cocina Tradicional" y otro a la categoría "Cocina de la Luz".
La elección de la asignación de la plantilla se decide cuando la crea, pero puede cambiar esto con la configuración de la plantilla (imagen de la rueda tomada).
En este caso, los productos de la categoría "A" se verán diferentes de los de la categoría "B".
6 - Otras opciones disponibles
Al crear plantillas temáticas para su hoja de productos, usted tiene varias opciones: no sólo "Todos los productos" y "Productos en categorías específicas de productos"...
Puedes crear Diseños de plug de producto según etiquetas, productos específicos (sólo), página de archivo de productos, etc.
Para ir más lejos:
- Crear una plantilla de página
- ¿Cómo crear un precio dinámico en WooCommerce?
- ¿Cómo mejorar la página de Salida de WooCommerce?
- ¿Cómo crear una página de categoría de producto con Theme Builder?
Para empezar con Divi, descubrir todos los artículos para empezar tranquilamente!
78 Comentarios