How to override woocommerce.css?

Your code actually looks good, according to the WooCommerce Documentation. It may simply be related to usage in a child theme, but I think that would still work.


For reference, here is what I use to replace the default WooCommerce CSS files. This only disables the “general” styling (colors, buttons, etc) but keeps the structuring and responsive design. Just look at the comments if you want to remove it all.

If this doesn’t work for you, it’s not an issue with the code you posted but with how you are including it.

// Disable WooCommerce's Default Stylesheets
function disable_woocommerce_default_css( $styles ) {

  // Disable the stylesheets below via unset():
  unset( $styles['woocommerce-general'] );  // Styling of buttons, dropdowns, etc.
  // unset( $styles['woocommerce-layout'] );        // Layout for columns, positioning.
  // unset( $styles['woocommerce-smallscreen'] );   // Responsive design for mobile devices.

  return $styles;
}
add_action('woocommerce_enqueue_styles', 'disable_woocommerce_default_css');


// Add a custom stylesheet to replace woocommerce.css
function use_woocommerce_custom_css() {
  // Custom CSS file located in [Theme]/woocommerce/woocommerce.css
  wp_enqueue_style(
      'woocommerce-custom', 
      get_template_directory_uri() . '/woocommerce/woocommerce.css'
  );
}
add_action('wp_enqueue_scripts', 'use_woocommerce_custom_css', 15);