Aunque la plantilla Divi sea bastante completa en sus opciones de diseño, a veces, se pueden echar en falta algunas funcionalidades para personalizar una sección o un módulo de la web.
En ese caso, recurriremos al CSS para modificar detalles de esta plantilla para WordPress, con el fin de que la web consiga un diseño más original y diferente del resto.
Si eres dueño o gestionas alguna tienda online con WooCommerce y quieres hacer resaltar los productos de tu web, te convendrá echarle un ojo a estos 2 sencillos códigos CSS para modificar las imágenes de los productos de WooCommerce en Divi.
Dos trucos para personalizar las imágenes de los productos en la plantilla Divi
Por defecto, las imágenes de los productos en la plantilla Divi se muestran cuadradas y al hacer hover se muestra el símbolo «+» en morado.
Tal y como ves en la siguiente imagen.
Recuerda que para que los productos se muestren de forma automática en la Página Inicial de tu web o en cualquier otra página que diseñes con Divi, tendrás que añadir previamente el módulo de Tienda. Te decimos cómo hacerlo aquí.
A continuación te muestro dos códigos que permitirán darles una apariencia propia a los productos de tu tienda online. Estas funciones no las incluye la plantilla Divi, pero integrarlas en tu web es bastante sencillo y tan solo te llevará dos minutos.
Sustituir el icono en hover por texto
Por defecto, la plantilla Divi añade un icono morado al pasar el ratón por el producto y tú puedes elegir entre un montón de iconos y cambiar el color de este.
Pero, ¿Y si te interesa añadir texto en el hover del producto en vez de un icono?
Puedes tener varias razones por las que preferir añadir texto en el hover de las imágenes en vez de un icono.
Por ejemplo, añadir palabras como «ver», «ver más», «más info» o «comprar» pueden incitar a mayor número de usuarios a clicar en el producto.
Por otro lado, modificar tu diseño con pequeños detalles como este dan personalidad a tu marca y marcan la diferencia.
Para conseguir este efecto, primero selecciona el color que quieras para la capa superpuesta del producto en:
Editar página -> Tienda -> Ajustes avanzados -> color de capa superpuesta al pasar el ratón
Deja el color del icono por defecto (sin marcar ninguno) y no selecciones ningún icono.
Guarda cambios.
A continuación copia este código de abajo y pégalo en tu plantilla Divi en:
WordPress -> Divi -> Opciones del tema -> CSS personalizado
[pastacode lang=»css» manual=».woocommerce%20.et_overlay%3Abefore%20%7B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20margin-left%3A%200%3B%0A%20%20%20%20content%3A%20’VER%20M%C3%81S’%3B%0A%20%20%20%20%2F***%20TEXTO%20%20***%2F%0A%20%20%20%20font-family%3A%20’Source%20Sans%20Pro’%2C%20Arial%20!important%3B%0A%20%20%20%20%2F***%20TIPOGRAF%C3%8DA%20***%2F%0A%20%20%20%20text-transform%3A%20uppercase%3B%0A%20%20%20%20font-size%3A%2024px%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%2F***%20COLOR%20DEL%20TEXTO%20***%2F%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20padding%3A%205px%200%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
Una vez modifiques el texto, el color y la tipografía a tu gusto, puedes eliminar los mensajes que aparecen entre /***
Guarda cambios y el resultado al pasar el ratón por los productos de la web será el siguiente:
Mostrar la imagen del producto en forma de círculo
Si además quieres mostrar los productos de tu tienda con WooCommerce en forma de círculo, esta opción no la incluye Divi en ningún apartado, pero la solución es muy sencilla.
Copia el siguiente código y pégalo en tu plantilla Divi en:
WordPress -> Divi -> Opciones del tema -> CSS personalizado
[pastacode lang=»css» manual=».woocommerce%20ul.products%20li.product%20a%20img%2C%0A.et_overlay%20%7B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%7D» message=»» highlight=»» provider=»manual»/]
Este efecto se creará automáticamente en todos los productos, incluidos los del catálogo de Tienda.
Guarda cambios y comprueba que las imágenes de los productos de tu ecommerce se ven así al pasar el ratón por encima:
Estos dos sencillos trucos para personalizar los productos de WooCommerce en Divi pueden hacer cambiar notablemente el aspecto de tu web.
Ten en cuenta que las imágenes que te muestro en este post son solo un ejemplo, pero el diseño puede ser totalmente diferente al modificar el tipo de letra, el tamaño, el color del texto, el color de la capa superpuesta o la transparencia de esta.
Cuéntanos más abajo si prefieres añadir texto en hover a los productos de WooCommerce en vez de iconos o si prefieres las imágenes cuadradas o redondas ¡Me encantará saberlo!
Hola!
He utilizado este fragmento de código que indicas en la publicación para que la imagen del producto se muestre en forma de círculo, pero me indica que es erróneo:
.woocommerce ul.products li.product a img,
.et_overlay {
border-radius: 50%;
}
Hola!! como hago para que al pararme con el mouse aparezca otra imagen del producto? Buen día.
Hola como hacer para colocar 4 productos por columna en vez de 3? en la tienda?
Hola Yefferson, si te refieres a la página de Tienda, Divi no permite establecer una configuración de columnas diferente a la que viene por defecto en WooCommerce. Por lo que tendrías que añadir código para modificarlo. Por contra, en las páginas que añadas el módulo de Tienda de Divi, sí podrás configurar las filas y columnas de los productos. Saludos!
Hola!
Me gustaría saber como puedo modificar el tamaño de los textos de los productos relacionados y el precio, me salen demasiado grandes.
Gracias!
Hola Pat, tendrás que utilizar el código CSS que corresponda, ya que la plantilla no dispone de ninguna opción directa para ello. Saludos!
Como elimino la capa superpuesta?
Hola Iván! No existe una opción directa para eliminar la capa superpuesta de los productos, pero puedes seleccionar el color de la capa totalmente transparente para que no se muestre. Un saludo!
Hola, muy buen post, gracias por compartirlo. Pero me gustaría saber como podría poner un texto diferente en cada foto, es decir, que en lugar de que diga «ver más» en todas, yo pueda personalizar en cada imagen el texto.
He probado desde css de cada imagen y no ha funcionado.
Mil gracias de antemano.
Un saludo.
Hola Alex! Antes de nada, gracias por seguir el blog 😉
Por el momento desconozco si hay alguna forma de poner un texto distinto en el hover de cada producto. Dejo aquí tu dda por si alguien conoce una solución. Saludos!
Hola que tal, quisiera saber que tamaño en pixeles se usan en la foto para que el redondeado quede esteticamente bien.
Muchas gracias
Hola Nicolás, en este ejemplo se han utilizado unas imágenes de 800×800, pero el tamaño de las imágenes no debe afectar al efecto. Lo único que debes tener en cuenta es que en la imagen que uses, el producto aparezca centrado y con algunos espacios en los márgenes, así al aplicar el redondeado, se mostrará correctamente. Saludos!
Hola como puedo colocar un zoom en la capa superpuesta ,muchas gracias
Hola Juan Manuel!
Si te refieres a añadir el efecto zoom al pasar el ratón por los productos de la página y el módulo de tienda, de momento no hay opción de hacerlo con las opciones de la plantilla. Por lo que tendrías que agregar un código o instalar algún plugin para crear este efecto.
Para otros elementos como imágenes, filas, iconos… Divi ha incluido una opción directa de animaciones, en ajustes avanzados.
Tomaré nota para escribir sobre ello 😉
Un saludo!
Como hacer para personalizar el tamaño. Tengo un sitio con distintas secciones y galerias de producto, no quiero tocar el tamaño desde la configuración general ya que solo necesito modificarlo en una sección para que no me recorte la imagen y tome la totalidad. Lo puedo hacer por CSS personalizando solo esa galeria de productos?
grcias! Espero que me puedan dar una mano.
Hola Paula!
Lo más sencillo es subir todas las imágenes a WordPress con las mismas dimensiones. Si no, tendrás que modificar el css individual de cada imagen o también puedes personalizar su tamaño desde WooCommerce > Productos > Mostrar.
Gracias por seguir el blog y hasta pronto!
como puedo hacer para modificar el color y transparencia de fondo del producto, cuando estoy sobre el con el mouse?
Hola Diego! Si te refieres al color de la capa superpuesta al pasar el ratón sobre el producto, se selecciona en el Módulo de Tienda -> Ajustes avanzados -> color de capa superpuesta al pasar el ratón. También puedes modificar el color del icono.
Espero que te sirva. Un saludo!