Help with resizing of featured images on WooCommerce homepage

WooCommerces css is pretty specific so it can be quite tricky to override it sometimes. To override their css you need to be MORE specific with your css. So an example would be:

@media only screen and (min-width: 768px) {
    div.home-intro ul.featured-products li:nth-child(4n), div.home-intro ul.featured-products li.fourth { 
        width: 20%; 
        margin-top: 0; 
    }
}

In the above example I have added a parent element to the css rule (div.main-wrapper). This rule is now more specific and should override Woo’s css.
And you can just put this in the Custom css box, that should be fine.

Note:
Ideally you should be making a custom image size and editing your template to use that image size.