Divi ha sido diseñado para ser compatible con WooCommerce. Integrar WooCommerce, debe instalar la última versión de WooCommerce.

WooCommerce es el complemento comercio electrónico que recomendamos, ya que tiene el mejor conjunto de características, interfaz y sigue las mejores prácticas de codificación. Después de activar el complemento, verá dos nuevas secciones "WooCommerce" y "Productos" agregadas a su panel de WordPress. Puede utilizar estas áreas para ajustar la configuración de su comercio electrónico y publicar nuevos productos. Puedes encontrar el documentación completo en WooCommerce aquí .

Tenga en cuenta que aunque el constructor incluye varios módulos de WooCommerce, también puede utilizar WooCommerce por sí solo sin el constructor. Puede crear páginas estándar para Checkout, Shopping Cart, etc. como se muestra en su documentación. También puede vincular directamente a sus categorías de woocommerce, o utilizar el Códigos cortos WooCommerce en un módulo de texto Divi. Te da la libertad de hacer casi cualquier cosa.

Cómo agregar un módulo de tienda a tu página

Antes de que pueda agregar un módulo de tienda a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando navega por su sitio web en primer plano si está conectado a su panel de WordPress.

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero. Tenemos excelentes tutoriales sobre el uso de elementos de línea y sección de Divi.

Busque el módulo de la tienda en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "tienda" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo de la tienda. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .

Ejemplo de caso de uso: mostrar los productos más recientes en una página de inicio utilizando el módulo Tienda

Para este ejemplo, usaré el módulo de la tienda para mostrar los productos más recientes en una página de inicio.

Aquí está la página con los cuatro productos presentados.

Vamos a empezar.

Utilice el constructor visual para agregar una sección regular con una fila de ancho completo (1 columna). Cambie el parámetro de fila para que sea de ancho completo con un ancho de canalón personalizado de 2.

Luego agregue un módulo de tienda a la línea.

Actualice la configuración del módulo de la siguiente manera:

Opciones de contenido

Tipo: productos recientes
Número de productos: 4

Opciones de diseño

Icono Color de desplazamiento: # ea1d63
Título Policía: Abierto sin
Tamaño de fuente del título: 24px
Premio de la policía: abierto sin
Tamaño de fuente de precio: 20px

Opciones avanzadas (CSS personalizado)

Título:

text-align: center;
fondo: #fff;
margin-top: -10px! significativa;

Premio:

text-align: center;
fondo: #fff;
tapizado hacia abajo: 15px;

¡Es todo! Aquí esta el resultado final.

Compre las opciones de contenido

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

Tipo de Propiedad

Elija el tipo de productos que desea mostrar en su feed de productos. Puede elegir entre Productos recientes que mostrarán todos sus productos en orden cronológico, Productos destacados, Productos en oferta, Productos más vendidos o Productos mejor calificados.

Numero de productos

Defina la cantidad de productos que desea mostrar. Necesitará tener productos hechos para que cualquier cosa aparezca en este módulo.

Incluir categorías

Elija las categorías que desea incluir.

Numero de columnas

Elija la cantidad de columnas que se mostrarán en el módulo de su tienda. Deben usarse 4 columnas para una fila de 1 columna. Se deben usar 3 columnas para una columna que ocupa 3/4 del espacio de la fila. La columna 2 debe usarse para una columna que ocupa la mitad del espacio de la luz. Una columna debe usarse para una columna de 1/2 de espacio de fila.

Reorganizar por

Elija cómo desea que se ordenen sus productos. Elija ordenar por defecto Ordenar, Popularidad, Clasificación, Fecha, Precio de menor a mayor, Precio de mayor a menor, más antiguo a más nuevo, más nuevo a más antiguo.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.

Opciones de diseño de talleres

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar cualquier cosa.

Icono de superposición

Cuando pasa el cursor sobre un artículo en el módulo Tienda, aparece un icono superpuesto. Puede ajustar el color utilizado para este icono utilizando el selector de color en esta configuración.

Color de la superposición

Cuando pasa el mouse sobre un artículo en el módulo Tienda, aparece una superposición de color en la parte superior de la imagen y debajo del texto y el ícono del título de la tienda. De forma predeterminada, se utiliza un color blanco semitransparente. Si desea utilizar un color diferente, puede ajustar el color con el selector de color en esta configuración

Icono selector

Aquí puede elegir un ícono personalizado para mostrar cuando un visitante se desplaza sobre los elementos de la tienda en el módulo.

Color de la insignia de ventas

Cuando un artículo está en oferta, aparece una insignia de oferta en la imagen del producto. Con esta configuración, puede ajustar el color utilizado para el fondo de la insignia.

Título de letra

Puede cambiar la fuente del texto del título seleccionando la fuente deseada en el menú desplegable. Divi ofrece docenas de excelentes fuentes ofrecidas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de letra del título

Aquí puede ajustar el tamaño del texto de su título. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.

Color del texto del título

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de título

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto del título, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de título

La altura de la línea afecta el espacio entre cada línea del texto del título. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según el valor de su tamaño para cambiar el tipo de unidad.

Política de precios

Puede cambiar la fuente del texto de su precio seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes geniales impulsadas por Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto utilizando las opciones de negrita, cursiva, mayúsculas y subrayado.

Tamaño de fuente de precio

Aquí puede ajustar el tamaño del texto de su precio. Puede arrastrar el control deslizante de rango para aumentar o disminuir el tamaño de su texto o ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Color del texto del precio

De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su precio, elija el color deseado en el selector de color usando esta opción.

Espaciado de letras de precio

El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra en el texto de su precio, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Altura de la línea de precio

La altura de la fila afecta el espacio entre cada fila de su texto de precio Si desea aumentar el espacio entre cada fila, use el control deslizante de rango para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada ubicado a la derecha del cursor. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según el valor de su tamaño para cambiar su tipo de unidad.

Opciones avanzadas de la tienda.

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.

ID de CSS

Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.

CSS personalizado

También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARGUE EL TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DESCARGAR PLANTILLAS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Otros tutoriales de Divi

• 5 sitios web para su uso restaurante temático Divi
• Cómo agregar texto en un producto Divi WooCommerce
• Cómo cambiar el color del menú entre páginas Divi
• Cómo personalizar las cuadrículas de un blog con Divi
• Cómo utilizar la función de editor Divi en WordPress
• Cómo crear un control deslizante Divi a pantalla completa
• Cómo cambiar el color de los menús entre páginas Divi
• Características que probablemente no conozcas sobre Divi
• Cómo usar Divi Builder en WordPress
• Cómo usar el módulo de desplazamiento de video Divi
• Cómo usar el módulo Divi Builder Flip
• Cómo agregar un módulo testimonial en Divi Builder
• Cómo usar el módulo de texto Divi
• Cómo crear un control deslizante en Divi
• Cómo editar un rol de usuario Divi
• Cómo usar el módulo de Divi Social Media
• Cómo usar el módulo de tienda en el tema WordPress Divi
• Cómo usar el módulo de la barra lateral Divi
• Cómo usar el Módulo Divi Price Table
• Cómo usar el módulo de título de las publicaciones de Divi
• Cómo agregar un módulo de video de Divi
• Cómo usar el módulo de navegación del artículo
• Cómo usar el módulo de búsqueda Divi
• Cómo usar el módulo Divi wallet
• Cómo usar el módulo de persona en Divi Builder
• Cómo usar el módulo de billetera con filtro Divi
• Cómo usar el módulo deslizante de ancho completo
• Cómo usar el Módulo de imagen Divi Builder
• Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
• Cómo usar el módulo de la galería de imágenes
• Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
• Cómo utilizar el módulo de cartera de ancho completo de Divi
• Cómo usar el módulo de encabezado de ancho completo Divi
• Cómo usar el módulo Divi Counter
• Cómo usar el control deslizante de artículos en Divi Builder
• Cómo usar el módulo Divi Email Optin