Blog de Divi en español

Diseña tu propia web con la plantilla y constructor web Divi, de Elegant Themes.

Ya comentamos en otra ocasión el gran potencial de unir el plugin WooCommerce para convertir tu web en una tienda online, más Divi como plantilla de esta tienda online.

Este post te va a ayudar a configurar, optimizar y diseñar la ficha de producto de tu web con Divi y WooCommerce.

Si quieres que tus ventas se vean incrementadas, te recomendamos cuidar al detalle tu tienda virtual, pero sobre todo, cuidar al detalle la imagen de tus productos de cara al cliente.

Así que ¡vamos al lío! 😉

5 Consejos para optimizar la ficha de producto de tu tienda online

La ficha de producto no es más que la página individual de cada uno de los productos de una tienda online o eCommerce.

Una ficha de producto estándar muestra las imágenes del producto, la descripción y características del mismo, el precio, el botón de compra, las valoraciones de otros clientes y una sección de productos relacionados.

Normalmente, el visitante de tu web llega a las fichas de tus productos a través de tu página de Tienda o ,a veces, también a través del Blog, de otra web intermediaria…

Aunque parezca algo simple, crear una ficha de producto atractiva para tu tienda online, capaz de cautivar al cliente y con un diseño adecuado requiere un gran trabajo detrás.

Si llevas poco tiempo por aquí, antes de nada te convendrá saber cómo realizar el primer paso, añadir productos a WooCommerce.

woocommerce divi ficha de producto

Reuniendo los principales puntos y tratatando de generalizar, pues cada tipo de negocio es un mundo, te recomendamos tener muy en cuenta los siguientes puntos:

1- CREA UN TÍTULO QUE VENDA.

El título puede ser el factor relevante que haga a una persona clicar en tu enlace o no y además es uno de los principales factores a tener en cuenta para el SEO.

Por ello, crea títulos precisos, que llamen la atención y que al mismo tiempo describan y resalten el producto que quieres vender.

2- CUIDA LAS DESCRIPCIONES DEL PRODUCTO.

Identifica cuál es el perfil de tu cliente potencial, qué vocabulario usa, qué búsquedas realiza en internet para encontrar los productos que necesita y cuáles son sus intereses.

Esto te beneficiará para saber cómo redactar las descripciones y conocer qué puntos son los que debes destacar para llamar su atención rápidamente. Igualmente, cuida el SEO de estas descripciones, introduciendo las palabras que te gustaría posicionar, poniédolas en negrita…

3- UTILIZA IMÁGENES DE CALIDAD.

Utiliza imágenes que vendan por sí solas. Esto no quiere decir que retoques el producto de forma que decepcione al cliente cuando vea el aspecto real, ni mucho menos se trata de engañar.

Pero resaltar los puntos fuertes que tiene tu producto, añadir distintas imágenes desde distintos ángulos y usar fotos de calidad, con buena resolución y con fondo blanco ayudarán al cliente a hacerse una idea rápida de cómo es el producto.

Ten en cuenta que, al no poder tener físicamente el producto, al cliente que compra online le gusta ver todos los detalles posibles desde la web.

4- AÑADE UN VÍDEO EXPLICATIVO.

Si te lo puedes permitir, añade un vídeo donde se muestre cómo funciona tu producto y qué ventajas tiene. Pónselo fácil a tu cliente pontencial.

Además conseguirás incrementar el tiempo de permanencia del visitante en tu web. Como pataforma para subir tus vídeos, lo recomendable es usar Youtube.

5- CONSIGUE VALORACIONES DE LOS CLIENTES.

Tener valoraciones positivas de clientes reales te ayudará a vender mucho más que cualquier mejora que puedas realizar en la ficha de producto. A los que visitan tus productos les interesa saber cómo les fue a otras personas que ya los compraron.

Cómo diseñar la página de producto en la plantilla Divi

Al instalar el plugin de WooCommerce, se creará automáticamente un apartado en tu panel de WordPress desde el cual podrás añadir nuevos productos, así cómo configurar las categorías de producto, las etiquetas y los atributos.

De igual manera, al instalar la plantilla Divi, el diseño de la ficha de producto se crea automáticamente.

Entonces, ¿Ya está todo hecho? ¿Es suficiente con ir añadiendo todos mis productos?

Podrías dejarlo tal cual, sin personalizar, pero lo ideal es alinear toda la web al mismo diseño y al mismo estilo, de manera que represente tu marca y tus productos.

IMPORTANTE: Antes de nada, lo más recomendable es configurar la ficha de producto en ancho completo, es decir, sin sidebar o barra lateral. ¿Por qué? pues simplemente porque así evitarás distracciones al cliente potencial.

Si ha entrado a la ficha de producto es porque le interesa lo que ve y se encuentra a tan solo un paso de terminar la compra ¡que no se te escape!

Esto es tan sencillo como entrar en la edición de cada producto y seleccionar la pestaña “Ancho completo”, ya que si has configurado las opciones generales de la plantilla Divi para que añada una barra lateral, esta aparecerá en todas las páginas; Tienda, Carrito, Página de pago, ficha de producto, Blog… ficha de producto ancho completo en divi

Cuando trabajas con módulos de la plantilla Divi, basta con configurar cada módulo individual, pero las fichas de productos son páginas que se han creado al instalar WooCoommerce y que en principio heredan el diseño general de la plantilla.

La parte negativa de todo esto es que Divi no da la opción de personalizar cada página de WooCommerce por separado, pero la parte positiva es que con aplicar los estilos una sola vez, se aplicarán automáticamente a todas las páginas individuales de todos los productos que tengas. Por lo que no te llevará mucho tiempo hacerlo.

Por lo tanto, una vez tengas tus productos subidos a WordPress, es momento de personalizar la apariencia de la página o ficha de producto.

Por ello, vamos a repasar uno por uno, los principales elementos que aparecen en una ficha de producto con la plantilla Divi:

Título y descripción del producto

El título y el texto de la ficha de producto coge por defecto el estilo de tipografía que le hayas dado a la plantilla en general.

Para personalizar los títulos de cabecera y los textos de tu web, dirígete a:

Divi -> Personalizador de temas -> Ajustes Generales -> Tipografía.

Desde aquí podrás seleccionar:

  • El tamaño de los textos y de los títulos.
  • La altura de línea de los textos y de los títulos.
  • El espaco entre letras del título.
  • El estilo de fuente del titulo (cursiva, negrita, subrayado o mayúscula).
  • La fuente de los textos y de los títulos (Lato, Open Sans, Nunito, Monserrat, Abel, Arimo…).
  • El color del enlace de cuerpo. Es decir, de todos los enlaces, tanto internos como externos.
  • El color de los textos.
  • Y el color de los títulos.

cómo personalizar ficha de producto

Además, la gran ventaja es que con el Personalizador de temas, podrás configurar los textos y títulos de tu ficha de producto en la plantilla Divi de forma visual, viendo cómo resultan todos los cambios.

Recuerda que esta configuración afectará al total de tu web y si quisieras configurar un estilo de tipografía diferente para la ficha de producto, tendrías que ayudarte de códigos CSS.

En este caso, puedes pegar el siguiente código en Divi -> Opciones del tema -> CSS Personalizado para personalizar los títulos de la ficha de producto:

.woocommerce div.product .product_title {
    clear: none;
    margin-top: 0;
    padding: 0;
    font-size: 40px;
    color: #000000;
}

No olvides modificar los valores del tamaño (px) y el color del texto (#) para adecuarlos a tu gusto y automáticamente los títulos de todas las fichas de productos de tu web se acogerán a este estilo.

Imágenes del producto

En cuanto a las imágenes de los productos de una web con Divi, la plantilla no incluye ninguna opción de configuración directa.

Aún así, tras la última actualización de WooCommerce, las imágenes de los productos se muestran mucho más atractivas, con efecto de zoom incluido y con una galería muy intuitiva.

Por lo que simplemente, tendrás que subir las imágenes de tus productos a WordPress e indicar cuál será la imagen principal y la galería de imágenes de cada producto.

imágenes productos tienda online

Obviamente, este paso lo tendrás que hacer de forma individual con cada producto.

Si en tu caso, tienes una tienda online que cuenta con una cantidad elevada de productos, lo más sencillo será utilizar un plugin de importación como WP All Import para subir todos los productos a la vez.

Migas de pan o breadcrumbs

Las migas de pan o breadcrumbs es como se llama a la secuencia de enlaces que se muestran en la parte superior. Estas indican el camino que ha seguido el cliente para llegar hasta la página en la que se encuentra.

Al ser enlaces, clicando en ellos, se puede retroceder hasta cualquier paso anterior que se haya realizado.

Es conveniente configurarlas para que sean visibles en las páginas de tu tienda online con WooCommerce y así el cliente quede orientado en todo el proceso de la compra.

Esta ruta de enlaces también hereda los estilos que le hayas dado a la tipografía general.

breadcrumbs plantilla divi

Si te interesa darle otro formato, puedes utilizar el siguiente código, modificando los valores de color y tamaño a tu gusto e incluyéndolo en Divi -> Opciones del tema -> CSS Personalizado.

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
    margin: 0 0 1em;
    padding: 0;
    font-size: 20px;
    color: #000000;
}

Ten en cuenta que, esta modificación es general y se aplicará a las breadcrumbs tanto de la ficha de los productos como de la página de tienda.

Precio del producto

El precio que se muestra dentro de la ficha de producto hereda por defecto el “color de énfasis” de la plantilla.

Este color se selecciona en:

Divi -> Personalizador de temas -> Ajustes generales -> Ajustes de formato -> Color de énfasis del tema.

Ten cuidado al modificar este color, pues la plantilla Divi utiliza el color de énfasis del tema para el estilo de muchos elementos de la web, como por ejemplo, la categoría en la ficha de producto, la barra superior con mensaje de añadido al carro o agregar cupón…

Por tanto, si modificas este color en el Personalizador de temas, modificarás el color de todos estos elementos.

ficha de producto plantilla divi personalizar
De todas formas, si necesitas cambiar el tamaño (px) o el color (#) del precio de la ficha de producto, copia y pega el siguiente código en Divi -> CSS Personalizado y modifica o amplia los valores que necesites:

.entry-summary p.price span {
font-size: 60px !important;
color: #000000;
}

Botón de Añadir al carrito

Para personalizar el botón de Añadir al carrito de la ficha de producto, tendrás que personalizar los ajustes generales de la plantilla.

Igualmente, todos los botones que añade automáticamente WooCommerce (Ver carrito, Finalizar compra, Realizar pago…) y todos los botones que incluyas tú en tu web (en la Home, en el blog, en el formulario de contacto…) heredarán el mismo estilo general.

Por tanto, dirígete a Divi -> Personalizador de temas -> Botones.

Desde aquí podrás seleccionar:

  • El tamaño del texto.
  • El color del texto.
  • EL color de fondo del botón.
  • La anchura del borde.
  • EL color del borde.
  • Radio del borde.
  • Espacio entre letras.
  • Estilo de fuente (cursiva, negrita, mayúscula o subrayado).
  • Fuente del texto.
  • Icono del botón, color y ubicación de este.
  • Estilo del botón en hover (al pasar el ratón por encima).

 

personalizar botones ficha de producto tema divi

Siempre es recomendable mantener la misma línea de diseño en toda la web, incluyendo el diseño de los botones.

Pero si necesitas modificar el aspecto de este botón en concreto puedes añadir el siguiente código a Divi -> Personalizador de temas -> CSS Personalizado.

.woocommerce div.product form.cart .button {
    border-color: #dd9933;
    font-size: 25px;
    color: #ffffff !important;
    background-color: #dd9933;
}
.woocommerce div.product form.cart .button:hover {
    border-color: #d6ae73 !important;
    font-size: 25px;
    color: #ffffff !important;
    background-color: #d6ae73;
}

Después modifica los valores de tamaño (px) y de color (#), tanto en estático como en hover, ya que los valores que incluye el código son de ejemplo.

Productos relacionados

Esta seccción también hereda los estillos generales que hayas seleccionado para la tipografía.

Lamentablemente, la pantilla Divi sigue sin incluir diferentes estilos por separado para los títulos h1, h2, h3, h4, h5 y h6 y solo hace distinción entre cabecera o texto.

Por lo tanto, al modificar la tipografía general, modificas a la vez la tipografía de la Home, de la Tienda, del Blog (siempre que no sea un módulo), de la Ficha de Producto, de la Página de carrito, de la Página de pago… Y también de la sección de Productos relacionados.

plantilla divi productos relacionados

Si necesitas modificar el tamaño o el color de esta sección por separado, puedes copiar y pegar el siguiente código en Divi -> Opciones del tema -> CSS Peronalizado y a continuación modificar los valores de color y tamaño:

.woocommerce ul.products li.product .price .amount, 
.woocommerce-page ul.products li.product .price .amount {
    font-size: 30px;
    color: #dd9933;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
     font-size: 20px !important;
}

Resumiendo, la plantilla Divi se adapta y funciona muy bien con WooCommerce, aunque se hechan de menos algunas opciones de personalización más precisas.

Aún así, como has podido comprobar, configurar, optimiar y diseñar la ficha de producto de tu web con WooCommerce y Divi es bastante sencillo, intuitivo y rápido.

Además, solo tendrás que hacerlo una vez y se aplicará a todos los productos que tengas inluidos en tu negocio online.

Recuerda que estos estilos debes aplicarlos siempre a tu tema hijo de Divi y no a la plantilla padre.

También te puede interesar...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
¡GRATIS!Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!