Índice
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.
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.
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… 
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.
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:
[pastacode lang=»css» manual=».woocommerce%20div.product%20.product_title%20%7B%0A%20%20%20%20clear%3A%20none%3B%0A%20%20%20%20margin-top%3A%200%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20font-size%3A%2040px%3B%0A%20%20%20%20color%3A%20%23000000%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
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.
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.
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.
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.
[pastacode lang=»css» manual=».woocommerce%20.woocommerce-breadcrumb%2C%0A.woocommerce%20.woocommerce-breadcrumb%20a%20%7B%0A%20%20%20%20margin%3A%200%200%201em%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20font-size%3A%2020px%3B%0A%20%20%20%20color%3A%20%23000000%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
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.
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:
[pastacode lang=»css» manual=».entry-summary%20p.price%20span%20%7B%0Afont-size%3A%2060px%20!important%3B%0Acolor%3A%20%23000000%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
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).
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.
[pastacode lang=»css» manual=».woocommerce%20div.product%20form.cart%20.button%20%7B%0A%20%20%20%20border-color%3A%20%23dd9933%3B%0A%20%20%20%20font-size%3A%2025px%3B%0A%20%20%20%20color%3A%20%23ffffff%20!important%3B%0A%20%20%20%20background-color%3A%20%23dd9933%3B%0A%7D%0A.woocommerce%20div.product%20form.cart%20.button%3Ahover%20%7B%0A%20%20%20%20border-color%3A%20%23d6ae73%20!important%3B%0A%20%20%20%20font-size%3A%2025px%3B%0A%20%20%20%20color%3A%20%23ffffff%20!important%3B%0A%20%20%20%20background-color%3A%20%23d6ae73%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
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.
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:
[pastacode lang=»css» manual=».woocommerce%20ul.products%20li.product%20.price%20.amount%2C%20%0A.woocommerce-page%20ul.products%20li.product%20.price%20.amount%20%7B%0A%20%20%20%20font-size%3A%2030px%3B%0A%20%20%20%20color%3A%20%23dd9933%3B%0A%7D%0A%0A.woocommerce%20ul.products%20li.product%20.woocommerce-loop-product__title%20%7B%0A%20%20%20%20%20font-size%3A%2020px%20!important%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
Resumiendo, la plantilla Divi se adapta y funciona muy bien con WooCommerce, aunque se echan de menos algunas opciones de personalización más precisas.
Aún así, como has podido comprobar, configurar, optimizar 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 incluidos en tu negocio online.
Recuerda que estos estilos debes aplicarlos siempre a tu tema hijo de Divi y no a la plantilla padre.
Hola ! Muchas gracias por el tutorial .
Tengo una pregunta estoy utilizando Divi para crear la ficha de producto pero me sucede algo. Tengo en el constructor las estrellas de valoración y cuando le doy guardar y ver en la página web al público no se ven visibles como si no estuvieran. ¿Necesito algún pulgin adicional?
Saludos.
Gracias por lo excelentes contenidos, nos ayudáis a muchos.
Tengo una consulta: estoy montando todo en DIVI pero cuando seleciono la pagina de productos en el woocomerce me desaparece todo cuando está desvinculada al woo funciona perfectamente pero en cuanto la selecciono en ajustes / woo se desaparece todo, alguna idea?
Saludos
Hola! como se hace para cambiar el estilo del campo de código del cupón, cuando ya estás en el carrito por finalizar la compra.. gracias!
Muy buen post! pero tengo un problema que me está robando mucho tiempo:
en la página de inicio he creado «productos en oferta» y a esta sección le he añadio un shorcode para que meta automáticamente los productos. Hasta ahí todo bien, pero el diseño de los productos vienen en predeterminados con el siguiente orden: imagen+nombre+precio
quiero eliminar el precio pero no me deja de ninguna de las maneras, en mi tienda si lo hice pero aquí no me deja ¿puedes ayudarme?
Buenas, no consigo customizar la página de etiqueta de productos, no me da la opción de habilitar el constructor. Y al hacer una plantilla para las etiquetas desde el generador de temas, no sé cómo mostrar todos los productos de esa etiqueta. Sabes de alguna solución? Muchas gracias de antemano.
Hola, estoy comenzando a construir una web y tengo un problema con la ficha de producto y es que cuando empiezo a utilizar el divi builder la foto de producto me aparece pequeña, cuando en el editor estandar aparece en tamaño perfecto, nunca antes me habia pasado, creo que se debe a la ultima actualizacion, si me pudiera ayudar le estaria muy agradecido.Gracias
Estimado, muy buen post, gracias por ayudarnos, mi consulta es si hay opcion , ya que uno baja el tamaño al boton, si es posible bajarle el tamaño donde van la cantidad de productos que se requieren.
saludos cordiales
Hola.
En primer lugar felicidades por el post. Está todo muy bien desarrollado y ordenado, por lo que resulta muy ilustrativo y de fácil comprensión.
Me gustaría saber como poder insertar las valoraciones del producto (las estrellitas) a las que haces referencia en el post.
Muchas gracias
Hola Javier! gracias por seguir el blog 😉 Me alegro que te haya sido útil este post.
Las valoraciones de los productos las puedes activar directamente desde las opciones de WooCommerce, en la pestaña de Productos. Aquí encontrarás una casilla para habilitar calificaciones y configurar a quién permites que las deje. Un saludo!
Hola,
Me ha servido mucho el post para poner la ficha de perfil un poco mas siguiendo el estilo de la página. El maldito naranja que viene por defecto me tenia negro
De hecho he tenido que añadir «important» a alguno de tus codigos para que se substituyera.
Pero todavía no consigo quitarlo de todas partes, cuando añades un producto al carrito, cuando pasas a la pagina del carrito y a la de rellenar tus datos sigue estando todo en naranja.
¿Puedes por favor decirme como podria cambiarlo de todos esos sitios? Tengo pesadillas con ese naranja jajajajajajajaj
mil gracias de antemano
Hola! Muy bueno el tutorial el tutorial.
Te hago una consulta, no encuentro la forma de cambiar el borde ni la letra del boton «enviar» que figura en la parte de valoraciones de productos. Actualmente me sale de color azul, cuando mi web esta orientada a colores verdes, por lo que no queda muy bien.
Te dejo un link por si queres ver a que me refiero.
https://coinsasa.com.ar/producto/escoba-combisystem-08919-20/
Un gran saludo!
Matias
Hola Matías!
Si ya has personalizado las opciones de los botones en, Divi > Personalizador de temas > Botones, prueba a añadir este código en las opciones del tema:
.woocommerce-page #respond input#submit {
background: #ffffff;
border-color: #00a859;
color: #00a859;
}
Como ves, ya está listo con el color de tu web. Un saludo!
muchísimas gracias!
Saludos,
Matias
Hola. necesito resolver un problema. resulta que necesito copiar las descripciones de productos de la tienda de mi proveedor y pegarlas a los míos. el problema es que al momento de pegar no se mantiene el formato de texto.
en la pagina de mi proveedor se muestra de la siguiente manera http://pclifecr.com/wp-content/uploads/2018/03/descripcion-proveedor.jpg
y al momento de pegar en mi web queda de la siguiente manera http://pclifecr.com/wp-content/uploads/2018/03/descripcion-pclife.jpg
Agradecería alguien me pueda orientar en como mantener el formato ya que llevo dos semanas tratando de corregir esto y no he podido publicar productos por esa situacion
gracias
Hola Freisel,
En los enlaces enviados no se muestra nada 🙁
Para que se muestre de forma correcta, prueba a seleccionar previamente el botón «Pegar como texto» en el editor del producto en WordPress y a continuación, pega la descripción del producto. Por otra parte, no te recomiendo duplicar contenido de una web a otra, por tema de SEO, aunque se trate del mismo producto y de tu proveedor 😉
Un saludo!
Hola
Muchas GRACIAS por esta maravillosa información.
Yo necesito mostrar y ocultar el botón de compra «añadir en el carrito» dependiendo de los productos porque son libros y unos van estar a la venta y otros en lanzamiento.
Cómo lo hago??…help!!
Hola Noelia!
La verdad es que lo que necesitas no depende del tema que tengas instalado en tu web. Es decir, no depende de Divi.
Pero sí he encontrado un plugin para WooCommerce que parece ser realiza la función que necesitas. Te paso el enlace: https://es.wordpress.org/plugins/hide-add-to-cart-button/
Espero que te sirva de ayuda.
Un saludo y gracias por seguir el blog 😉
Hola! Muy buen post! Tengo una duda, ¿se podrían poner las pestañas a la derecha de la imagen principal en vez de debajo? Por ejemplo que la primera abierta por defecto sea la de descripción, otra especificaciones técnicas, otra por ejemplo un vídeo del producto,.. pero como te digo, justo a la derecha.
Gracias!
Hola Elena!
La estructura de la ficha de producto no es posible modificarla con el constructor, pero si puedes utilizar algún plugin específico, como Divi Shop Extended, con el que puedes personalizar la ficha de producto o tienda con la plantilla Divi: https://www.tantomarketing.com/producto/divi-shop-extended/ref/Divesp/
Espero que te sirva de ayuda. Un saludo!
Hola, me gustaría saber como puedo editar el cuadro de cantidad de productos. Saludos.
Hola Pau!
Desde las opciones de plantilla no hay opción de modificar el cuadro de la cantidad de productos. De momento, tendrías que modificarlo aplicándole estilos con CSS.
Saludos!
Hola, tienes algún estilo para compartir? saludos.
Hola Pau! Tomo nota para actualizar este post y añadir lo que comentas 😉 Un saludo!
Hola! Gracias por el tutorial, está muy completo. Tengo una duda que llevo ya varias semanas dándole vueltas y no encuentro nada…
En la tienda (divi 3 / woocommerce) al habilitar el constructor visual, no puedo modificar la fuente del título del producto. Es raro porque si puedo hacerlo con el precio del producto. He tratado de hacerlo desde el constructor visual y desde el módulo en la sección de página. ¿sabrías porqué pasa esto? Muchas gracias, un saludo!
Hola Edén!
Antes de nada, gracias por seguir el blog 🙂
Si te refieres a modificar el título del producto de un módulo de Tienda, puedes hacerlo o bien entrando en los ajustes del mismo módulo o los de su sección, o bien en la opción general de Divi>Personalizador de Módulos>Tienda y así hacerlo de forma general para todos los módulos de Tienda que añadas. Mira que no se hayan solapado estas configuraciones y por ello no te funcione.
Si te refieres a modificar el tamaño del título del producto en la Ficha de Producto, esto no es posible hacerlo con el constructor (salvo con algún plugin) y tendrás que usar un código CSS como el que aparece en este post.
Espero que puedas solucionarlo pronto.
Un saludo!