0

I would like to override woocommerce.css in my child theme. This is what I tried in my child theme's functions.php but it does not seem to work:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );
function wp_enqueue_woocommerce_style(){
  wp_register_style( 'woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
  if ( class_exists( 'woocommerce' ) ) {
    wp_enqueue_style( 'woocommerce' );
  }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );
  • 2
    please be explicit in what exactly doesn't work – Mark Kaplun Oct 21 '14 at 16:04
2

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);
  • Thanks. In your code, I had to replace get_template_directory_uri() with get_stylesheet_directory_uri() and /woocommerce/woocommerce.css with /css/woocommerce.css. Then it started working. However this never worked with the code that I pasted in the question. Not sure why! I also did not include disable_woocommerce_default_css() function in my child theme's functions.php. Is this function really necessary to replace the original woocommerce.css? – user1448031 Oct 25 '14 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.