Cómo crear una página de producto personalizada única en WooCommerce con Divi Builder

WooCommerce es un complemento popular para agregar características de comercio electrónico a su sitio web basado en WordPress. Puede instalarlo en cualquier tema de WordPress. Página de producto única de WooCommerce, independientemente del tema que use, no es tan malo. Pero puede mejorarlo creando una plantilla de página de producto personalizada. Puede agregar cualquier elemento que desee, puede establecer cualquier color e impresión. La función de crear el tema de Divi Builder le permite crear una página de producto personalizada única para WooCommerce sin codificar. Hay dos formas de crear una página de producto única personalizada para WooCommerce en Divi Builder. En primer lugar, puede crear uno en un aspecto prefabricado. En segundo lugar, puedes crear uno desde cero.
Cree una página de productos personalizada en Divi Builder a partir de un aspecto prefabricado, aunque puede crear una página de producto única personalizada a partir de un aspecto prefabricado, Divi Builder ofrece cualquier aspecto para la página de productos único de WooCommerce. Pero puede descargar uno de uno de los artículos de blog de temas elegantes (desarrollador Divi Builder).
Descargar una apariencia de una sola página de producto
Después de descargar el archivo de apariencia anterior (que está disponible en formato ZIP), descomprima hasta que obtenga el archivo del archivo JSON. Inicie sesión en el tablero de WordPress y vaya a Div -> Temor Builder. Haga clic en el icono con dos flechas en el lado derecho.

En la ventana que aparece, vaya a la pestaña Importar, haga clic en el archivo seleccionado para seleccionar el archivo del archivo JSON y haga clic en el botón Importar plantillas de constructor Divre para importar el aspecto.

Debería ver un nuevo bloque de plantillas en la página creativa del tema. Hasta ahora, ha creado con éxito la plantilla personalizada de página de producto única. Haga clic en los cambios Guardar para guardar sus cambios. Si desea editar la plantilla de página de producto única que acaba de crear, puede hacer clic en el icono del lápiz para abrir la plantilla en el editor front-end de Div Builder. En el editor delantero Divi Builder, puede editar cualquier elemento. Ya sea sección, fila o módulo. Haga clic en el icono de la rueda para convertir un elemento en un modo de edición para editarlo. También puede usar la característica de las capas de vista para una navegación más fácil. Cree una página de producto personalizada en Divi Builder desde cero Crear una sola página de productos personalizados desde cero es una opción adecuada si desea crear un solo producto completamente único. El proceso de crear una página de producto personalizada de un producto único en Divi Builder no es diferente de crear una apariencia personalizada de una sola publicación. En este artículo, demostraremos cómo crear una página de producto individual personalizada como la siguiente:

Se necesitan los siguientes elementos para crear una sola página de producto, como la anterior:

Una sección
Tres filas
Más módulos
Al crear una plantilla de producto personalizada única con Divi Builder, puede especificar dónde se aplica la plantilla de producto única. Ya sea en todo el sitio, en un producto en particular, en productos de una determinada categoría o en productos bajo una determinada etiqueta. Para comenzar, vaya a Div -> Temor Builder. Cree un nuevo bloque de plantilla y especifique dónde desea aplicar la plantilla única de página del producto en la sección del producto. En este ejemplo, crearemos una página de productos individuales personalizados para productos en la categoría de “camiseta”. Haga clic en el botón Crear plantilla. Haga clic en Agregar cuerpo personalizado en el bloque de plantilla que acaba de crear. Seleccione Build Custom Body.
En la página siguiente, seleccione la opción de construcción de Zaza y haga clic en el botón iniciar la construcción para comenzar a crear la plantilla.

Por defecto, se le ofrece una sección con un separador. Antes de agregar una fila, es posible que desee eliminar el separador de sección predeterminado. Para hacer esto, cruce el mouse sobre la sección y haga clic en el icono de la rueda para abrir el panel de edición. Puede eliminar el separador del bloque de divisores de la pestaña de diseño.

# Fila 1 Usaremos la primera fila para colocar los módulos de notificación de grumba de pan de pan Woo y Woo. Haga clic en el botón Green Plus para agregar una nueva fila. Seleccione la estructura con una sola columna. Agregue el módulo Woo Breadcrumb.

En la opción de producto en el bloque de contenido, establezca en este producto.

Para atar a las migas de pan, puede acceder a la pestaña de diseño. Puede establecer la tipografía (tamaño de fuente, el estilo de fuente, la familia de fuentes) y el color de texto en el bloque de texto. Para establecer el espacio (finalización y bordes), puede abrir el bloque de espaciado. Asegúrese de hacer clic en la lista de verificación verde cada vez que haya terminado de hacer nuevos cambios. Una vez que haya terminado con el Woo Breadcrumb, agregue el módulo de notificación del carrito Woo.

En la opción de producto en el bloque de contenido, establezca en este producto.


Para cambiar el fondo, abra el bloque de fondo en la pestaña de contenido. Para establecer la impresión, el color de texto y los estilos de los botones, puede acceder a la pestaña de diseño. # Fila 2 Usaremos la segunda fila para colocar los siguientes módulos:

Imagen de Woo

Título de Woo

Calificación de woo
Precio de woo
Descripción de Woo
Woo se suma al carrito
Woo meta
Agregue una nueva fila haciendo clic en el botón Green Plus. Seleccione la estructura con dos columnas.
## Columna 1 Vaya a la primera columna (la izquierda) y agregue el módulo de imagen WOO. En la opción de producto en el bloque de contenido, establezca en este producto.
Puede establecer tres elementos para aparecer en este módulo: la imagen presentada del producto, la galería de imágenes y la insignia a la venta. Para configurarlos, abra los elementos de bloque en la pestaña de contenido.
Para establecer el tamaño de la imagen, el rayo del borde y el texto de la insignia de venta, puede acceder a la pestaña de diseño. Puedes jugar con esta pestaña para estilar el módulo de imagen Woo. ## Columna 2 Vaya a la segunda columna (la correcta) y agregue el módulo de título WOO. En la opción de producto en la pestaña Contenido, establezca en este producto.

Vaya al diseño para diseñar el título. Puede establecer el color del texto y la tipografía en esta pestaña.

Después de que termine de editar el módulo de título de WOO, agregue los siguientes módulos: Calificación de Woo

Precio de woo

Descripción de Woo
Woo se suma al carrito
Woo meta
Nuevamente, puede ir al diseño para estilar cada módulo. # Fila 3 Utilizaremos la tercera fila para colocar el módulo de pestañas WOO y el módulo de productos relacionados con WOO. Agregue una nueva fila haciendo clic en el botón Green Plus. Seleccione la estructura con una sola columna. Agregue el módulo de pestañas WOO.
El módulo de pestañas WOO consta de tres pestañas: descripción, información adicional, revisión. Si desea deshabilitar una de estas pestañas, simplemente descarte la pestaña que desea apagar de la opción Incluir pestañas desde el bloque de contenido.
Vaya a la pestaña Diseño para establecer el estilo del módulo Woo Tabs. Puede establecer la tipografía del texto y el texto de la hoja. Después de haber terminado con el módulo de pestañas WOO, agregue el módulo de productos relacionados con WOO.
Nuevamente, puede acceder a la pestaña Diseño para que estille este módulo. Después de haber terminado de editar todos los elementos (sección, filas y módulos), haga clic en el botón de rescate en la esquina inferior derecha para guardar los cambios y haga clic en el icono X en la esquina superior derecha para salir del editor front-end Div. Builder.

En la página del constructor de temas, haga clic en los cambios Guardar para aplicar todos los cambios que acaba de hacer.