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.

mostrar productos woocommerce

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

color capa superpuesta producto divi

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

.woocommerce .et_overlay:before {
    left: 0;
    margin-left: 0;
    content: 'VER MÁS';
    /*** TEXTO  ***/
    font-family: 'Source Sans Pro', Arial !important;
    /*** TIPOGRAFÍA ***/
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    /*** COLOR DEL TEXTO ***/
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}

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:

hover productos plantilla divi

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

.woocommerce ul.products li.product a img,
.et_overlay {
    border-radius: 50%;
}

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:

mostrar productos tienda woocommerce

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!

¿Quiéres seguir aprendiendo sobre WooCommerce y Divi? Te recomeindo apuntarte a esta Masterclass gratuita donde aprenderás a crear una tienda online desde cero 😉

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, ¿Te ha resultado útil? ¡Danos un 5!)
Cargando…

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

¡APRENDE MÁS SOBRE DIVI!

¿Quieres estar al día de todo lo que compartimos en Divesp?

Consentimiento

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.