Cómo crear un sitio web personalizado de WooCommerce utilizando DIV (una guía completa)

WooCommerce es el complemento más popular para crear un sitio web electrónico basado en WordPress. Es extremadamente personalizable, lo que le permite crear un sitio web único de comercio electrónico con su diseño. Divi puede ayudarlo a crear un sitio web de WooCommerce totalmente personalizado sin codificar. Te mostraremos cómo en esta publicación. Div en sí es un producto de temas elegantes. Es un tema de WordPress que viene con un generador de página construido llamado Divi Builder. Divi Builder viene con una función de crear el tema que puede usar para crear un encabezado personalizado, un encabezado personalizado y otras partes de su tema de WordPress. Si tiene WooCommerce instalado en WordPress, también puede crear páginas personalizadas de WooCommerce, como la página de la tienda, la página única del producto, la página de finalización del pedido, etc. Puedes hacer esto usando el editor visual de Divi Builder. No es necesario tocar una sola línea de código. Divi Builder en sí está disponible en dos versiones. Además de convertirse en una parte integral del tema de la división, también está disponible como un complemento independiente que puede instalar en otros temas de WordPress.
Entendiendo las páginas principales de WooCommerce antes de continuar, es esencial comprender primero las páginas principales de WooCommerce. Estas son las páginas principales de WooCommerce:
Página de la tienda
La página de la canasta
Página de pago
Página de cuenta de clientes
Página con un solo producto
Páginas de archivo de productos
Estas páginas se crearon en la instalación del complemento WooCommerce. Están controlados por archivos de plantilla que puede encontrar en la carpeta WooCommerce/Templates (ruta completa: WP-Content/Plugins/WooCommerce/Templates). Con Divi Builder, puede crear plantillas personalizadas para reemplazar las plantillas predeterminadas de WooCommerce anteriores. Las páginas de WooCommerce para las que puede crear plantillas personalizadas son: la página de la tienda
La página de la canasta
Página de pago
Página de cuenta de clientes
Página con un solo producto
Páginas de archivo de productos (etiquetas y categorías)
Cómo crear un sitio web de WooCommerce usando DIV antes de comenzar, asegúrese de haber instalado el tema Div (o complemento Div Builder si prefiere usarlo en otro tema) en su sitio web de WordPress. Además, asegúrese de haber instalado y activado el complemento WooCommerce. Una vez que esté listo, puede comenzar a crear plantillas personalizadas para reemplazar las plantillas predeterminadas de WooCommerce: Creación de la página de taller personalizada. Creé un artículo separado que trata una tienda WooCommerce personalizada utilizando Divi Builder. Puedes leerlo si estás interesado.
Para comenzar a crear una página de tienda personalizada usando Divi Builder, primero, vaya a Div -> Temor Builder en el tablero de WordPress. Agregue una nueva plantilla haciendo clic en el botón Plus. Seleccione Comprar en el bloque WooCommerce Pages y haga clic en el botón Creare de la plantilla.
Haga clic en Agregar cuerpo personalizado -> Crear cuerpo personalizado.

En la ventana de diálogo que aparece, puede seleccionar la opción a la izquierda (edificio desde Zaza) para crear la página de la tienda personalizada desde cero y hacer clic en el botón de construcción para comenzar a crear la plantilla. O también puede seleccionar la opción Elija un aspecto prefabricado si desea crear la página de almacenamiento personalizada desde un aspecto predeterminado. Seleccione una fila y luego agregue el módulo de almacenamiento.

Como puede ver, el módulo de la tienda cobra automáticamente sus productos de WooCommerce en el área de lienzo. Puede hacer configuraciones como el número de productos por página y el número de columnas en la pestaña de contenido en el panel de configuración. Para activar la paginación, puede abrir el bloque de elementos. Para enfatizar el módulo de la tienda, puede acceder a la pestaña de diseño desde el panel de configuración. Hay alrededor de 14 bloques que puede abrir en esta pestaña. Puede establecer cosas como tipografía (la familia de fuentes, el tamaño de la fuente, el estilo de fuente, etc.) los elementos del producto (precio, título, insignia de venta, etc.), color de texto, tamaño de imagen, etc.

Puede agregar más módulos a la página de la tienda personalizada, dependiendo de sus necesidades después de haber terminado, haga clic en el botón de rescate en la esquina inferior derecha para guardar los cambios, seguido del icono X en la esquina superior derecha para salir del editor de Divi Builder. Esto lo llevará de regreso a la página del editor de temas.

En la página del constructor de temas, haga clic en los cambios Guardar para aplicar el cambio que acaba de hacer (página de la tienda personalizada en este caso).

Creación de la página de cesta personalizada Al crear una página de cesta de WooCommerce personalizada utilizando Divi Builder, puede usar el módulo de contenido posterior. El módulo mostrará los productos que se han agregado al carrito en una lista, complementados con el botón de finalización del pedido. Aquí está el ejemplo. Dive Builder no ofrece un aspecto predefinido para la página de la canasta, por lo que debe crearla desde cero. Primero, vaya a Div -> Temor Builder en el tablero de WordPress. Agregue una nueva plantilla haciendo clic en el botón Plus y seleccione COș en el bloque WooCommerce Pages. Haga clic en el botón Crear plantilla.

Haga clic en Agregar cuerpo personalizado -> Crear cuerpo personalizado. En el cuadro de diálogo que aparece, puede seleccionar la opción a la izquierda y hacer clic en el botón Iniciar edificios para comenzar a crear la página. Como se mencionó, puede usar el módulo de contenido Posti para mostrar los productos que se han agregado al carrito. Además de este módulo, puede agregar cualquier módulo como desee.

Después de haber terminado de agregar y editar los módulos, puede hacer clic en el botón Guardar en la esquina inferior derecha para guardar los cambios, seguido del icono X en la esquina superior derecha para salir del editor de Divin Builder. En la página del constructor de temas, haga clic en los cambios Guardar para aplicar el cambio que acaba de hacer (página de cesta personalizada en este caso).

Crear la página de pago personalizada a los pasos para crear una página de pago personalizada en Divi Builder es bastante similar a la creación de la página de canasta personalizada anterior. También puede usar el módulo de contenido post. En el contexto de la página de pago, el módulo mostrará el formulario de pago de la siguiente manera:

Vaya a Div -> Builder de temas en el tablero de WordPress. En la página de la página creativa, haga clic en el botón Plus para agregar una nueva plantilla. Seleccione el pago en el bloque de páginas WooCommerce y haga clic en el botón Crear plantilla. Haga clic en Agregar cuerpo personalizado -> Crear cuerpo personalizado. En la ventana de diálogo que aparece, puede hacer clic en la opción a la izquierda, porque Divi Builder no ofrece una apariencia predefinida para la página de pago personalizada. Agregue una fila, seguido del módulo de contenido posterior.

Puede personalizar el contenido de la publicación del módulo en el panel de configuración. Después de haber terminado el contenido de publicación de módulo personalizado, puede agregar otros módulos de acuerdo con sus necesidades.

Una vez que haya terminado de editar la página, puede hacer clic en el botón Guardar en la esquina inferior derecha para aplicar el cambio, seguido del icono X en la esquina superior derecha para salir del editor de Builder Divu. En la página del constructor de temas, haga clic en los cambios Guardar para aplicar el cambio (página de pago personalizada en este caso).

Creación de la página de cuenta personalizada para los clientes, así como la página del carrito de compras y la página de finalización del pedido, también puede usar el módulo de contenido publicado al crear una cuenta de cliente personalizada. En el contexto de la página de la cuenta del cliente, el módulo mostrará las conexiones asociadas con WoCommerce, como pedidos recientes, dirección de entrega, etc.

Para comenzar a crear la página personalizada de la cuenta de clientes, vaya a Div -> Temor Builder en el tablero de WordPress.Agregue una nueva plantilla haciendo clic en el botón Plus.Seleccione mi cuenta en el bloque WooCommerce Pages y haga clic en el botón Crear Teatblon.En la ventana de diálogo que aparece, puede elegir la opción a la izquierda (edificio desde Zaza), porque Div Builder no ofrece un aspecto predefinido para la página de la cuenta del cliente.Agregue una fila y agregue el módulo de contenido de publicación una vez que se abra el editor de Builder Divin.

Puede personalizar el contenido de la publicación del módulo en el panel de configuración. Una vez que haya completado la personalización del módulo, puede agregar otros módulos dependiendo de sus necesidades después de que haya terminado de agregar y módulos personalizados, puede hacer clic en el botón Guardar en la esquina inferior derecha para guardar los cambios y hacer clic en el icono X en el icono en el icono del Esquina superior derecha para cerrar el editor de Divin Builder. En la página del constructor de temas, haga clic en los cambios Guardar para aplicar el cambio (página de cuenta de cliente personalizada en esta página). La creación de la página de producto personalizada única Divi Builder también le permite crear una sola página de productos personalizados. Incluso puede asignar la página de productos de una sola persona de ciertos productos, productos de ciertas categorías y productos con ciertas etiquetas. Divi Builder no ofrece una apariencia prefabricada en su biblioteca de diseño para la página de productos única, pero ofrece algunas de las publicaciones de blog. Uno de ellos es este. Puede descargarlo si prefiere crear una página de producto individual personalizada mediante un aspecto predeterminado. En este ejemplo, le mostraremos cómo crear una página de producto individual personalizada desde cero. Divi Builder en sí ofrece algunos módulos que puede agregar a una sola página de productos personalizados, que incluye: Woo Image: para mostrar la imagen del producto
Título de Woo: para mostrar el título del producto

Calificación de WOO: para mostrar la evaluación del producto

Precio de Woo: para mostrar el precio del producto

Descripción de Woo: para mostrar la descripción del producto

Woo Agregar al carrito: para agregar el botón Agregar al carrito
Woo Meta: para mostrar meta producto (SKU, categorías, etiquetas)
Para comenzar a crear una página de producto única personalizada, primero, vaya a Div -> Temor Builder en el tablero de WordPress.Haga clic en el botón Plus para agregar una plantilla.En el bloque de productos, seleccione dónde desea asignar su plantilla personalizada.Si desea asignar la plantilla personalizada a todos los productos, puede seleccionar la opción de todos los productos.Haga clic en Crear plantilla.
Haga clic en Agregar cuerpo personalizado -> Crear cuerpo personalizado. Debido a que Divi Builder no ofrece una apariencia prefabricada de una página de producto única en su biblioteca de apariencia, puede hacer clic en la opción izquierda en el diálogo de aparición. Antes de agregar cualquier módulo al área de lienzo, puede establecer la apariencia agregando algunas líneas y secciones. Para obtener instrucciones más detalladas sobre cómo crear una página de producto única personalizada de WoCommerce usando Divi Builder, puede leer nuestro artículo anterior. Crear una página de archivo de productos personalizados (categoría de producto/página de etiqueta) La última página de WooCommerce que puede crear con Divi Builder es la página de archivo de productos, ya sea la categoría de producto o la etiqueta del producto. Al igual que la página de productos individuales personalizados, también puede asignar un archivo de producto personalizado a una determinada categoría o producto. Puede crear varias páginas de archivo de productos personalizados si lo desea. El módulo principal que necesita para crear una página de archivo de productos personalizada es el módulo de la tienda. Los pasos para crear una página de archivo de productos personalizados no son muy diferentes de la página de la tienda personalizada, como traté anteriormente. Primero, vaya a Div -> Builder de temas en el tablero de WordPress y haga clic en el botón Plus para agregar una nueva plantilla. Seleccione una categoría/etiqueta del producto a la que desea asignar la plantilla personalizada desde el bloque de páginas de archivo. Haga clic en el botón Crear plantilla.
Haga clic en Agregar cuerpo personalizado -> Crear cuerpo personalizado. En la ventana de diálogo que aparece, puede seleccionar la opción a la izquierda, porque Divi Builder no ofrece una apariencia predefinida para la página del archivo del producto. Al área de la tela, puede agregar algunas secciones y líneas dependiendo de sus necesidades. Una vez que las secciones y filas estén listas, agregue los módulos requeridos. Nuevamente, el módulo de la tienda es el módulo principal que puede usar para crear una página de archivo de productos personalizado. Por lo tanto, es necesario agregar este módulo. Poca nota. Debe establecer el módulo de la tienda para mostrar productos en función del archivo actual. Para hacer esto, abra el bloque contenido en la pestaña contenida en el panel de configuración y active la opción Use la página actual.
Para mostrar dinámicamente el título del archivo, puede usar la función de texto dinámico en Divi Builder. Primero, agregue el módulo de texto al área de lienzo. Una vez agregado, abra el bloque de texto en la pestaña Contenido en el panel de configuración. Haga clic en el icono dinámico en el editor de texto y seleccione el título de publicación/archivo en el menú Drop -down.
Puede acceder a la pestaña de diseño desde el panel de configuración para estilizar el módulo de texto. Puede agregar otros módulos, aparte del módulo de almacenamiento y el módulo de texto, en su página de archivo de producto personalizado, dependiendo de sus necesidades después de que termine de editar la página, puede hacer clic en el botón Guardar en la esquina inferior derecha para guardar el cambio y hacer clic en El icono X en la esquina superior derecha para salir del editor Divi Builder. En la página del constructor de temas, puede hacer clic en los cambios Guardar para aplicar la modificación (archivo de productos personalizados). Tenemos un artículo separado que trata cómo crear una página personalizada con categorías de productos en WooCommerce usando Divi Builder, si está interesado. Terminado. Has creado todas las páginas de WooCommerce personalizadas. Significa que acaba de crear su sitio web personalizado de WooCommerce utilizando Divi Builder. La conclusión fue que el generador de páginas abrió la oportunidad de crear un sitio web único, hermoso y personalizado sin codificar. Con Divi Builder, incluso puede dar un paso más al crear un sitio web personalizado de comercio electrónico. Divi Builder viene con un WooCommerce Builder que le permite crear un sitio web electrónico personalizado basado en WooCommerce de manera visual, utilizando su editor visual en vivo. Puede crear páginas personalizadas para reemplazar los valores predeterminados de WooCommerce, como la página de la tienda, la página de la canasta, la página de finalización del pedido, etc., como acabo de describir anteriormente. Hay dos opciones para usar Divi Builder. En primer lugar, puede usarlo como un complemento independiente.
En segundo lugar, puedes usar el tema div.Si prefiere la última opción, ya no tiene que instalar el plugin Divi Builder, porque es una parte integral del tema de la Divic.