Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

La plantilla Divi es una maravilla, de eso no tenemos duda. Pero cuando la usamos con Woocommerce observamos que estamos más limitados de lo habitual en lo que se refiere a la personalización de Woocommerce.

Pues bien, esa limitación ya se ha terminado. Te presento el plugin Divi Shop Extended.

Con este fabuloso plugin creado por Tanto Marketing, denominado “Divi Shop Extended” podremos ir mucho más lejos en la personalización de nuestra tienda online Woocommerce si utilizamos la plantilla Divi.

Este plugin es una extensión para la plantilla Divi cuando se usa junto a Woocommerce, gracias a ella podremos personalizar fácilmente Woocommerce sin tener conocimientos técnicos.

 

QUIERO EL PLUGIN

 

 

 

1.- Precio y licencia del plugin Divi Shop Extended para Woocommerce + Divi

 

Existen 2 licencias diferentes para adquirir el plugin:

 

->Licencia General (30$): el precio del plugin con esta licencia general es de 30 $. Al adquirir esta licencia podrás utilizar el plugin en un número ilimitado de páginas web. Lo que no podrás será distribuir el plulgin o lucrarte con su venta.

Esta licencia incluye actualizaciones por 1 año. Por lo que si quieres seguir disfrutando de actualizaciones, deberás ir renovando la licencia de manera anual

 

->Licencia Extendida (140 $): Esta licencia tiene un precio de 149 $ también permite la utilización del plugin en todos los sitios web que quieras. Pero a diferencia de la licencia estándar, ahora podrás utilizar el plugin en un tema hijo que comercialices en algún market place.

Si quieres utilizar el plugin en otro tema hijo que comercialices deberás comprar otra licencia. Esta licencia incluye también actualizaciones por un año.

 

QUIERO EL PLUGIN

 

 

2.- Los puntos clave que abarca Divi Shop Extended.

 

i.- Diseño y estructura de la ficha de producto a medida: No es que podamos personalizar superficialmente la ficha de producto, sino que gracias a los 15 nuevos módulos que aporta el plugin Divi Shop Extended podremos construir a medida la página de producto de la tienda online.

Es decir, tendremos un módulo para el precio, otro para el botón de añadir al carrito, otro para la imagen, otro para la descripción corta, etc. Tendremos módulos de todas las partes de la ficha de producto para poder distribuir cada parte en la posición que queramos.

 

Aprende en este post a crear una tienda online con Woocommerce y Divi: Tienda Woocommerce + Divi

 

También podremos disfrutar en cada módulo de todas las nuevas opciones de diseño que incorpora el divi builder como efectos de movimiento, sombras, etc.

Incluso podríamos hacer diferentes diseños y estructuras de fichas de producto para diferentes tipos de productos.

Te voy a mostrar algunos ejemplos de diseños personalizados de ficha de producto:

 

demo 1 ficha producto woocommerce divi personalizada

VER DEMO 1

 

demo 2 de producto con divi y woocommerce personalizado

VER DEMO 2

 

divi shop extended ejemplo de ficha de producto

VER DEMO 3

 

ii.- Módulo tienda personalizado (Tanto Shop): El plugin Divi Shop Extended nos ofrece un módulo para el Divi builder tipo “tienda” mejorado y ampliado que se denomina “Tanto Shop”.

Con este módulo del Divi builder podremos mostrar los productos como nunca antes lo habíamos podido realizar con Divi: Como un carrusel y en rejilla pero filtrando por categorías

EJEMPLOS CARRUSEL DE PRODUCTOS

EJEMPLOS DE PRODUCTOS EN REJILLA

 

Aprende a personalizar el footer de tu web con Divi: Footer Divi

 

iii.- Panel de personalización de tienda (Divi shop settings Panel): con este panel de ajustes podremos personalizar el diseño de los widgets de Woocommerce y algunas personalizaciones más.

 

QUIERO EL PLUGIN

 

 

3.- Crear una ficha de producto a medida con Divi Shop Extended, Woocommerce y Divi

 

¿No te gusta mucho la estructura y apariencia de la ficha de producto de Woocommerce?, pues ahora vas a poder construir una ficha de producto a medida.

Incluso podríamos crear diferente fichas de productos para diferentes familias o tipos de productos.

 

 

3.1.- Selector para NO utilizar el diseño por defecto de la ficha de producto que trae Woocommerce

 

Para ello lo primero que debes hacer es ir a: “Divi Shop Extended” y la pestaña “Products”. Ahí verás el siguiente selector:

 

Disable Woocommerce default template: este selector sirve para desactivar el diseño por defecto que viene con Woocommerce en la ficha de producto.

Es decir, que si seleccionamos:

 

i.- Disable: mantendremos el diseño por defecto que trae Woocommerce para la ficha de producto. Seleccionaremos esta opción cuando NO queremos realizar un nuevo diseño para la ficha de producto.

 

ii.- Enable: con esta opción NO mantendremos el diseño que viene por defecto en Woocommerce para la ficha de producto. Seleccionaremos esta opción cuando queramos realizar un diseño personalizado y a medida de la página de producto de Woocommerce.

 

hacer diseño personalizado de la ficha de producto woocommerce

Selector para activar o desactivar el diseño personalizado de la ficha de producto

 

 

3.2.- 15 nuevos módulos del Divi Builder para personalizar la construcción y diseño de la ficha de producto

 

Una vez hemos seleccionado que vamos a realizar un nuevo diseño para la ficha de productos nos pondremos manos a la obra para la creación de un nuevo diseño.

Para ello crearemos un producto modelo que reutilizaremos guardando la página construida con el Divi builder en la biblioteca.

Al comenzar la creación de dicho producto rellenaremos los datos habituales como: título, categoría, precio, inventario, etc.

A continuación haremos clic en el divi builder y cuando vayas a añadir un nuevo módulo desde el constructor, verás que tienes 15 nuevos módulos (utiliza el constructor tipo backoffice y no el visual).

 

Módulos divi builder para personalizar productos

Módulos para personalizar los productos con Woocommerce y Divi

 

Ahora vamos a ver para qué sirve cada uno de los 15 módulos + ejemplos:

 

i.- Wc Add to cart: este es el módulo que nos servirá para mostrar el botón de añadir al carrito junto al selector de unidades del producto. Podremos exprimir la personalización de este botón al máximo.

Aquí te dejo algún ejemplo: Módulo botón añadir al carrito

 

ii.- Wc aditional information: módulo que muestra la información adicional. Es decir las características del producto y atributos.

Aquí tienes un ejemplo de posibles diseños: Módulos información adicional

 

iii.- Wc Breadcrumb: este módulo de “Divi Shop Extended” sirve para mostrar “las migas de pan”. Es decir, la ruta hasta el producto.

Aquí puedes ver algunos ejemplos de diseño: Módulo Breadcrumbs

Aprende a crear un menú con WordPress y la plantilla Divi: Menús Divi

 

iv.- Wc Cart Notices: habrás visto que cuando añadimos un producto al carrito en Woocommerce nos aparece una aviso que nos indica el producto añadido y la opción de ir al carrito.

Pues bien, este módulo muestra precisamente este aviso de Woocommerce.

Aquí puedes ver varios ejemplos: Módulo Avisos Woocommerce

 

v.- Wc Gallery Product: este módulo muestra la galería de imágenes del producto, que podremos visualizar como rejilla normal, rejilla de ancho completo y como slider.

Aquí puedes ver algunos ejemplos: Módulo galería de imágenes de producto

 

vi.- Wc Meta: los productos en Woocommerce muestran una serie de información como es: la referencia o SKU, categorías a las que pertenece el producto y etiquetas.

Pues bien, con el módulo Wc Meta podrás mostrar y personalizar el diseño de esta meta información.

Aquí puedes ver algún ejemplo: Módulo meta información

 

vii.- Wc Price: Este módulo del plugin “Divi Shop Extended” se encargará de mostrar el precio del producto con el diseño que queramos mostrar.

Aquí te dejo algunos ejemplos: Módulo precio

 

viii.- Wc Rating: con este módulo podrás personalizar las valoraciones (estrellitas) de los clientes sobre el producto.

Aquí tiene algún ejemplo: Wc Rating

 

ix.- Wc related products: con este módulo podrás mostrar y personalizar el diseño del título del bloque de productos relacionados que aparece en la ficha de producto.

Ejemplos: Módulo productos relacionados

 

x.- Wc Review: con este módulo podrás personalizar un poco el bloque de valoraciones de clientes sobre el producto.

Aquí te dejo algunos ejemplos: Módulo Wc Review

 

xi.- Wc short description: este módulo de Divi Shop Extended se encargará de mostrar la descripción corta del producto.

Aquí puedes ver algún ejemplo: Wc short description

 

xii.- Wc sumary: este módulo nos permitirá personalizar del bloque de sumario que incorpora elementos como: título, precio, descripción corta, meta información y botón de añadir al carrito.

Tiene sentido usar este módulo cuando no vamos a usar por separado los módulos específicos para precio, título, descripción corta, meta información o botón de añadir al carrito.

Aquí tienes un ejemplo: Módulo Wc Sumary

 

xiii.- Wc title: con este módulo podremos personalizar el diseño del título del producto y colocarlo en el lugar que creamos conveniente en la ficha de producto.

Aquí te dejo algún ejemplo: Módulo título de producto

 

xiv.- Wc UpSell: con este módulo podrás añadir y personalizar el título del bloque de productos recomendados que tradicionalmente se muestra en la parte inferior de la ficha de producto de Woocommerce.

Aquí te dejo otro ejemplo: Módulo productos recomendados

 

xv.- Tanto Shop: el último módulo que podremos utilizar es el denominado “Tanto Shop” con el cual podremos mostrar grupos de productos en rejilla o carrusel.

Pero este módulo lo trataremos de manera independiente y lo veremos en más profundidad en el siguiente apartado.

 

xvi.- Resto de módulos del divi builder: NO olvides que también puedes utilizar el resto de módulos habituales de que dispone el Divi Builder en la construcción de la ficha de producto.

 

 

4.- El Módulo Tanto Shop de Divi Shop Extended

 

El plugin Divi Shop Extended incluye el módulo Tanto Shop para el Divi Builder. Éste módulo es del tipo “módulo tienda” que incluye por defecto el Divi builder para Woocommerce, pero más evolucionado.

El “módulo tienda” que viene por defecto con el Divi builder sirve para mostrar una serie de productos atendiendo a determinadas características.

 

[En este post puedes ver cómo funciona el módulo tienda que viene por defecto con la plantilla Divi: Módulo tienda Divi]

 

En este caso el módulo “Tanto Shop” incluye otras formas demandadas por diseñadores web de mostrar los productos y de las cuales no dispone el Módulo tienda como por ejemplo en rejilla con o sin filtro o en forma de un carrusel.

Cuando me refiero a rejilla con filtro quiero decir que los productos aparecerían en cuadrículas, pero con un filtro por categorías en su parte superior (el filtro es opcional).

También dispone de los típicos iconos que se muestran en la mayoría de productos de tiendas online: pre visualización de productos, añadir al carrito y compartir (en este caso en Facebook).

 

Nota: como cualquier otro plugin de terceros sobre Divi, el módulo Tanto Shop lo debes usar en el Divi builder tipo backend no en el visual.

 

 

4.1.- Insertar el módulo Tanto Shop

 

Tras la instalación del plugin Divi Shop Extended, el módulo “Tanto Shop” nos aparecerá en el Divi Builder para poder ser seleccionado.

Muy habitual será su uso en la home de la tienda online, para lo cual solo tendremos que hacer clic sobre él una vez desplegados los diferentes módulos del Divi Builder.

 

módulo tanto shop para mostrar carrusel de productos con divi y woocommerce

Módulos Tanto Shop y módulo tienda

 

 

4.2.- Carrusel de productos o mostrar productos en rejilla con Divi.

 

Ante de elegir como queremos mostrar los productos, tendremos que elegir qué productos queremos que se muestren.

En la pestaña “Contenido” de la configuración del módulo Tanto Shop tenemos el selector “Tipo” donde podremos seleccionar entre las siguientes opciones (igual que el módulo tienda que viene por defecto con Divi):

  • i.- Productos recientes: los últimos productos publicados
  • ii.- Productos destacados: los productos con la estrellita marcada (destacados). Esta es la que más suelo usar.
  • iii.- Productos en oferta: productos con descuentos
  • iv.- Productos más vendidos: productos más vendidos
  • v.- Productos mejor valorados: productos con mejores valoraciones
  • vi.- Categoría de producto: productos de una determinada categoría.

 

En la pestaña “Contenido” de la configuración del módulo elegiremos si queremos mostrar los productos en forma de un carrusel o en rejilla (en la pestaña Diseño elegiremos si queremos además un filtro por categorías).

En el campo “Diseño” podremos seleccionar:

  • i.- Carrousel: mostrar los productos como un carrusel
  • ii.- Rejilla: mostrar los productos en rejilla

 

carrusel de productos con woocommerce y divi

Selector para mostrar los productos en modo carrusel

carrusel de productos con la plantilla Divi

Carrusel de productos con Woocommerce y Divi

 

MÁS EJEMPLOS DE CARRUSEL

 

productos por cuadrícula con filtro categorías

Productos en rejilla con filtro por categorías con Woocommerce y Divi

 

EJEMPLOS DE PRODUCTOS EN REJILLA

 

En la pestaña contenido tenemos otras opciones importantes:

 

a.- Recuento de productos: número máximo de productos que queremos que se muestren.

b.- Incluir categorías: en el caso de que vayamos a utilizar el modo de visualización en rejilla filtrado, aquí elegiremos las categorías que queremos que aparezcan en el filtro (la activación del filtro la haremos en la pestaña “diseño”)

c.- Cantidad de columnas: número de columnas que queremos usar tanto para mostrar los productos como carrusel como por rejilla (cuantas más columnas pongamos más pequeños saldrán los productos).

d.- Ordenar por: aquí podremos elegir diferentes formas de ordenar los productos que se van a visualizar.

 

 

4.3.- Pestaña de Diseño de Módulo Tanto Shop

 

En la pestaña de diseño encontraremos algunas opciones propias de este módulo y una serie de opciones del módulo tienda y otras generales de todos los módulos del Divi builder.

Vamos a ver más detalladamente las opciones específicas de este módulo y a mencionar el resto.

 

 

4.3.1.- Capa Superpuesta

 

En este apartado podremos configurar algunos detalles referente a la capa que aparece cuando ponemos el ratón sobre un producto (tanto carrusel como rejilla)

 

i.- Color de icono: aquí elegiremos el color de los iconos que se muestran cuando ponemos el ratón sobre un producto (iconos de pre visualización, añadir al carrito y compartir)

ii.- Color de icono al pasar el ratón: color de los iconos anteriores cuando ponemos el ratón sobre uno de ellos.

iii.- Icon Background color: color de fondo del círculo que contiene a cada uno de los iconos antes comentados.

iv.- Icon hover background color: color del fondo del círculo cuando pasamos el ratón sobre uno de ellos.

v.- Icons on the right: en caso de seleccionar “SI” los iconos aparecerán en la parte derecha de manera vertical. En caso de elegir “NO” aparecerán a la izquierda en modo horizontal.

vi.- Color de capa superpuesta al pasar el ratón: color de la capa superpuesta que aparece cuando ponemos el ratón sobre uno de los productos.

 

iconos de ampliar, añadir al carrito o compartir producto

Iconos en imagen de producto

 

 

4.3.2.- Credencial de venta

 

Aquí solo tenemos una opción que es: “Color del distintivo de venta”.

Esto se refiere al color que queremos usar para mostrar la vitola que suele aparecer en productos especiales.

Como podría ser productos con un descuento, los cuales aparecen con una vitola que pone “Oferta”.

 

 

4.3.3.- Carrousel

 

En este apartado tenemos la opción “Carrousel Arrows Color”. Desde aquí podremos establecer el color de las flechas que aparecen en los dos extremos del carrusel para ver más productos.

 

 

4.3.4.- Category Filter

 

Este apartado solo tiene sentido si estamos visualizando lo productos en modo rejilla y no en modo carrusel.

Con la primera opción elegiremos si queremos mostrar o no los filtros por categorías y con el resto de opciones personalizaremos su diseño:

 

filtros categorias de productos al mostrarse como rejilla

Filtros de productos en rejilla

 

  • i.- Show Filter: con esta opción activaremos o desactivaremos el filtro de productos en rejilla (“SI” activar, y “NO” desactivar)
  • ii.- Font color: color del texto de la categoría
  • iii.- Hover Font color: color del texto de la categoría cuando se posa el ratón sobre ella.
  • iv.- Color de fondo: color de fondo de cada uno de los botones o filtros.
  • v.- Hover background color: color de fondo de los filtros cuando ponemos el ratón sobre ellos.
  • vi.- Color de borde: color de borde de los botones o filtros
  • vii.- Hover border color: color de borde de los botones o filtros cuando ponemos el ratón sobre ellos.

 

 

4.3.5. Varios

 

i.- Título texto: en este apartado encontraremos diferentes opciones de personalización del diseño del título del producto, que aparece al poner el ratón sobre un producto.

Tendremos opciones como: título fuente, título Font weight, título Font style, etc.

ii.- Precio texto: desde las opciones de este apartado podremos personalizar el diseño del precio que aparece en cada producto cuando ponemos el ratón sobre ellos.

iii.- Product description texto: aquí personalizaremos el diseño del pequeño texto descriptivo del producto.

iv.- Varios: luego tendremos otros apartados comunes a muchos módulos del Divi Builder como: Borde, Box Shadow y Animación,

 

 

5.- Personalización de Widgets de Woocommerce

 

Seguro que si has utilizado la plantilla Divi con Woocommerce has deseado poder personalizar más los widgets específicos para tienda online de que dispone Woocommerce, e incluso añadirle alguna característica más como podría ser la de que mostrara una miniatura del producto.

Pues bien, Con el plugin Divi Shop Extended vamos a poder personalizar dichos widgets y hacer una barra lateral de apoyo a la tienda y footer mucho más visual.

También podremos otras realizar otras interesantes opciones de personalización de la tienda a parte de la de los widgets.

 

Personalizar widgets de woocommerce con divi

Widgets woocommerce personalizados con Divi

 

 

5.1.- Interface de personalización de Widgets de Woocommerce con Divi Shop Extended

 

Para personalizar los widgets de Woocommerce con el plguin Divi Shop Extended iremos a nuestro panel de administración de wordpress y haremos clic en el menú lateral en la opción “Divi Shop Extended”

 

divi shop extended settings panel

Personalizar Widgets de woocommerce con Divi Settings Panel

 

 

5.2.- Widgets Woocommerce a Personalizar y otras opciones de personalización

 

Cada una de las pestañas se refiere a un Widget diferente:

 

i.- Pestaña Products: con estas opciones personalizaremos el diseño del widget “Productos Woocommerce”.

Ejemplo

ii.- Pestaña Top Rated: en esta pestaña aparecerán las opciones de personalización de diseño del widget “Productos mejor valorados de Woocommerce”.

Ejemplo

iii.- Pestaña Recent reviews: desde aquí personalizaremos el diseño del widget de Woocommerce “Valoraciones recientes de woocommerce”.

Ejemplos

iv.- Pestaña product Search: Desde esta pestaña personalizaremos el diseño del widget de barra de búsqueda de productos “Búsqueda de productos Woocommerce”

Ejemplos

v.- Pestaña Price filter: desde aquí podremos personalizar el widget de “Filtro de precios de Woocommerce”

Ejemplos

Otras opciones de personalización:

vi.- Pestaña botones: desde este apartado podremos personalizar el diseño de los botones de la tienda Woocommerce.

Ejemplos

vii.- Pestaña related products: desde aquí podremos personalizar el diseño de los productos relacionados que podemos mostrar al final de la ficha de producto.

Ejemplos

viii.- Pestaña Other: dentro de esta pestaña podremos personalizar dos cosas:

a.- Sale Badge: que es el formato de la banda que aparece cuando sobre la imagen del producto se ofrece una información especial, como podría ser que está en oferta.

b.- Product image: desde este apartado podremos seleccionar el efecto hover cuando se pone el ratón sobre la imagen de un producto.

Ejemplos

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies