WooCommerce in DIVI: Round Product Images

Continuing with the series of tutorials on how to customize WooCommerce in DIVI, this time we are going to change the rectangular images of the products for round images.

As in the previous tutorial in which we change the icon for text when hovering the mouse over the product we are going to do it with code.

By default the products are displayed as follows:

And the end result will be:

To achieve it is very easy:

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:

Within the WordPress administration area, we go to Divi –> Theme Options and in the general tab, at the bottom in custom CSS, we add:

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

And that's it, it's that easy 🙂

I hope you have been useful