Let´s start our Divi Woocommerce specific tutorials and integration with a simple one.

By default, when you create a Divi shop module you are able to choose only an icon available on settings as the hover overlay. With a simple css customization, you can substitute that icon with a more meaningful call-to-action as for example “BUY NOW”.

divi-ecommerce-product-shop-overlay-text

Insert the following code in Divi > Theme Options > General > Custom CSS or in your child theme stylesheet and change content: ‘buy now’; with your desired text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Product Overlay Text */
.woocommerce .et_overlay:before {
left: 0;
margin-left: 0;
content: 'buy now';
font-family: 'Open Sans', Arial !important;
text-transform: uppercase;
font-size: 22px;
color: #fff;
font-weight: bold;
text-align: center;
padding: 5px 0;
background-color:#D20C0C;
width:60%;
margin-left:20%;
}