Display 3 WooCommerce products instead of 4 with DIVI

I have changed the columns of the WooCommerce product page from 4 to 3 with this code:

@media only screen and ( min-width: 981px ){
.woocommerce-page ul.products li.product {
margin-right: 3.8% !important;
width: 30.8% !important;
}
.woocommerce-page ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
.woocommerce-page ul.products li.product:nth-child(3n) {
margin-right: 0 !important;
}
}


@media only screen and (min-width: 800px)
{
.woocommerce-page ul.products li.product {
min-height: 600px;
}
}