WooCommerce in DIVI: Show a text instead of an icon when hovering over a product

by

Many of you have asked me for more tutorials to customize WooCommerce in DIVI.

In this tutorial I explain how to take the first steps with the WooCommerce Module in DIVI

I am preparing a series of tutorials to be able to customize our store with WooCommerce, stay tuned 😉

In this tutorial I'm going to show you how to display a text instead of an icon when hovering over a product.

By default in DIVI when hovering the mouse over a product it shows an icon:

hover icon woocommerce divi

In this tutorial you will learn how to change it to a text and background color that looks like this:

text hover woocommerce divi

To follow the tutorial you need the DIVI template, you can buy it from here or if you are a premium member You have it available for free in the members area.

Here is the video tutorial:

Subscribe to my channel:  

The first thing we are going to do is edit the WooCommerce module from the DIVI builder, go to the Design tab and change the color in the “Overlay layer color on mouseover” option.

With one slider you choose the specific color tone you want and with the other the transparency:

divi store module

With this setting we change the background color on hover:

divi store color hover

To change the icon to a text we have to add the following code in Divi–> Theme Options –> Custom CSS.

.woocommerce .et_overlay:before {
    left: 0;
    margin-left: 0;
    content: 'ver';
    /*** TEXTO ***/
    font-family: 'Source Sans Pro', Arial !important;
    /*** ELEGIR FUENTA DE TEXTO ***/
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    /*** COLOR DE TU TEXTO ***/
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}

In the code you can see that the text that appears in the content option is the one that will appear.

Leave a comment