Cómo editar la plantilla de la página del producto en Divi Builder

Publicado: 2022-10-25

Si está utilizando el tema Divi para WordPress y desea editar las páginas de sus productos , hay algunas cosas que debe saber. Primero, necesitas crear un tema hijo. Esto le permitirá realizar cambios en el código sin afectar los archivos del tema original. Una vez que haya configurado un tema secundario, puede editar la plantilla de la página del producto en Divi Builder. Para editar la plantilla de la página del producto, primero vaya a la pestaña Divi Builder en el panel de administración de WordPress. Luego, haga clic en la pestaña "Plantillas" y seleccione "Página del producto" en el menú desplegable. Una vez que esté en Divi Builder, verá una lista de todos los elementos que componen la plantilla de la página del producto. Puede editar cualquiera de estos elementos haciendo clic en ellos y luego haciendo los cambios en la barra lateral de la derecha. Por ejemplo, si desea cambiar la imagen del producto, haga clic en el elemento "Imagen" y luego seleccione una nueva imagen de la biblioteca multimedia de WordPress. Cuando haya terminado de realizar los cambios, haga clic en el botón "Guardar" en la barra lateral de Divi Builder. Sus cambios ahora se aplicarán a todos los productos en su sitio web.

Divi Builder es una herramienta fantástica que te permite personalizar visualmente los sitios web de WooCommerce sin tener que codificar nada. En la página de productos de su tienda, podrá demostrar cómo se muestran sus productos. Es una buena idea colorear la página del producto y agregar los elementos relevantes, pero hay mucho más. El tema Divi incluye un creador de páginas Divi Builder, que se puede usar para crear páginas personalizadas . Podrá personalizar rápida y fácilmente la página del producto WooCommerce y cualquier otra parte de su sitio sin ninguna experiencia previa en codificación. La plataforma WooCommerce admite una amplia gama de módulos que se pueden modificar fácilmente para cumplir con sus requisitos específicos. Con Divi Builder, puede desactivar rápidamente el recuento de reseñas de clientes y mostrar la calificación de estrellas, o puede ocultar la funcionalidad.

Puede aumentar las tasas de conversión agregando una galería de productos a sus páginas de productos. Le recomendamos que incluya al menos 3-4 fotos de cada uno de sus artículos en su pedido. Si vende cursos en línea, es posible que desee desactivar la opción de cantidad para mantener la página del producto despejada. Los conmutadores facilitan la visualización de la información mientras mantienen limpia la página de su producto. Le mostraremos cómo instalar un módulo de alternar debajo de la descripción del producto, desde la página del producto a continuación. En nuestra sección Producto/Archivo, el encabezado será el título del Producto/Archivo, pero puedes seleccionar el material que mejor se adapte a tus necesidades como autor. Al seleccionar Descripción del producto en el menú, puede acceder a su base de datos. Una vez que haya completado los cambios, recibirá actualizaciones automáticas tan pronto como se completen. Este módulo te permite crear secciones y personalizar tus páginas y publicaciones de manera sencilla.

Divi Woocommerce Personalizar la página del producto

Crédito: diviextended.com

Hay muchas formas de personalizar una página de producto de Divi WooCommerce . Puede cambiar el diseño, los colores, la fuente y mucho más. También puede agregar CSS y HTML personalizados para personalizar aún más la apariencia de la página de su producto.

Plantilla de página de producto Divi Woocommerce

Crédito: nielspicard.nl

Una plantilla de página de producto de divi woocommerce es una excelente manera de exhibir sus productos en su sitio web. Este tipo de plantilla le permite mostrar sus productos de manera limpia y organizada, lo que facilita que los visitantes naveguen y encuentren lo que buscan. Además, una plantilla de página de producto de divi woocommerce puede ayudar a impulsar la optimización de motores de búsqueda (SEO) de su sitio web al facilitar que los motores de búsqueda encuentren e indexen sus productos.

Puede usar WooCommerce para crear una tienda de comercio electrónico en su sitio web porque incluye todas las campanas y silbatos necesarios. El diseño de página predeterminado de WooCommerce, en particular las páginas de productos, es extremadamente simple y carece de creatividad. En este tutorial, aprenderemos cómo crear una plantilla de página de producto de WooCommerce usando Divi desde cero. Este video paso a paso le muestra cómo crear una plantilla de página de producto de WooCommerce usando Divi. A continuación, puede diseñar y maquetar sus productos según los criterios definidos en este punto. Las páginas de productos individuales o las páginas de archivo de productos se pueden crear como plantillas separadas. En ambas columnas, habrá muchos módulos.

Hemos creado una sección dedicada para cada módulo para ayudarlo a agregarlos y modificarlos. Para comenzar, primero debemos definir el módulo de imagen del producto para la plantilla. En el siguiente paso, agregaremos una notificación de carrito a la página del producto. El nombre del producto y la calificación deben mostrarse en la página del producto. Al tener una explicación detallada de la procedencia del producto, los usuarios podrán averiguar en qué parte de la página se encuentran. Puede agregar migas de pan seleccionando el botón Agregar nuevo módulo y luego Woo Breadcrumbs. También se requieren el aviso del carrito y el separador.

Queremos incluir el precio del producto para mostrar a nuestros usuarios cuánto cuesta el producto después de agregar las calificaciones del producto. Luego, en la sección Price Text, incluye el módulo Woo Price. El siguiente paso es seleccionar Usar estilo personalizado para el botón en la pestaña Diseño. Para mantener la coherencia del diseño, seleccione púrpura como Color del texto del botón. Ahora es el momento de agregar la descripción del producto. Si presiona la URL del marcador de posición, se mostrará el texto del marcador de posición de la página del producto, pero se actualizará dinámicamente para reflejar el contenido de la página. En el paso 3, deberá agregar el módulo Producto relacionado con Woo.

Este paso implica hacer la tercera fila del panel, que está destinada a sostener una bandeja de producto. Comprueba que todo funcione correctamente probando la plantilla de la página de tu producto. Para comenzar, primero debemos guardar nuestra plantilla. Si todo va bien, podrá crear su plantilla de página de producto de WooCommerce personalizada con Divi. Los potentes módulos y la interfaz de usuario intuitiva de Divi simplifican la creación de un diseño de aspecto profesional en muy poco tiempo. Para que sea lo más breve posible, solo observamos una configuración en nuestro tutorial. Debido a que cada módulo tiene su propio conjunto de configuraciones y opciones de diseño, las posibilidades son infinitas.

Diseño de la página del producto Divi

Un diseño de página de producto Divi es un diseño diseñado para exhibir productos en una tienda en línea. Este tipo de diseño suele incluir imágenes grandes de los productos, así como descripciones y precios. La mayoría de los diseños de página de productos Divi también incluyen una forma para que los clientes agreguen los productos a sus carritos de compras.

Puede crear una tienda en línea con WooCommerce Layouts for Divi. La tienda Divi viene con una gran cantidad de plantillas que le permiten personalizar cada aspecto de su sitio de comercio electrónico, no solo el diseño de la tienda Divi. Las páginas de productos, las páginas de la tienda, las páginas del carrito y las páginas de pago están disponibles. Estos diseños ayudarán a los clientes al crear páginas de carrito Divi que sean fáciles de usar, lo que les permitirá dejar una compra en el medio si su carrito actual está desactualizado. Cuando utilice estas plantillas de página de pago de Divi, tendrá control completo sobre todo el sitio web, desde la página de la tienda hasta la página de pago. Puede conectarse a cualquier página en cualquier dispositivo con una resolución de pantalla de cualquier tamaño utilizando los botones de esta página.

Disposición de la tienda del tema Divi

Si desea crear una tienda en línea con WordPress, deberá elegir un tema que incluya la funcionalidad de comercio electrónico. El tema Divi es una opción popular para muchas tiendas en línea, ya que incluye un diseño preconstruido específicamente para sitios de comercio electrónico. Este diseño incluye una cuadrícula de productos, páginas de productos, un carrito de compras y más. Puede personalizar fácilmente el tema Divi para que coincida con la marca y el estilo de su tienda.

Las siguientes páginas contienen una lista completa de diseños de comercio electrónico disponibles para Divi. Los diseños de Divi son los más prácticos de cualquier plataforma en el mercado, con diseños de diseñadores y desarrolladores de todo el mundo. Divi Builder le permite importar diseños de comercio electrónico directamente a su biblioteca Divi, lo que le permite comenzar a trabajar en su próximo proyecto Divi de inmediato. Debido a que Divi Theme es compatible con WordPress, puede usar los diseños de comercio electrónico que se muestran arriba en su sitio web. Se puede usar una función de búsqueda en la barra lateral para buscar y explorar este directorio de diseño. Le recomendamos que envíe su diseño de DivieCommerce al directorio de Divilayouts.com.

Por qué Divi es el tema perfecto para su sitio web de comercio electrónico

Divi es un buen tema de comercio electrónico . Divi es una excelente plataforma para un sitio web de comercio electrónico. Con él, puede crear un sitio web versátil y que funcione bien que se integre con WooCommerce. Divi es una excelente opción si desea comenzar de nuevo o actualizar su sitio web existente.