You can change the CSS loading order.
Find the place where WooCommerce enqueues it’s CSS and keep in mind it’s $handle
(name). Search for wp_enqueue_style
.
Then go to theme’s functions.php
and find the place where your theme enqueues it’s CSS.
Now change your theme’s wp_enqueue_style
by adding WooCommerce’s $handle
to $deps
(dependencies) parameter of theme’s wp_enqueue_style
.
After these manipulations WordPress will load theme CSS after WooCommerce CSS, which will become overridable.
For example:
<?php
wp_register_style(
'your-theme-css', // theme CSS handle (name)
get_template_directory_uri() . '/your-theme.css', // theme CSS path
array('woocommerce-css-handle') // dependencies
);