What i do is, disable Woocommerce default styles depending on what i want to customize, instead of overwriting the css.
Woocommerce loads 3 styles by default:
woocommerce-general.css
woocommerce-layout.css
woocommerce-smallscreen.css
If you want to fully customize you can disable all styles or, just the ones that you dont want by adding:
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Check the Woocommerce documentation for more detail Disable the default stylesheet