How to override the woocommerce.css in the parent theme?

Question

I am using an ecommerce enabled wordpress theme! for my website along with woocommerce. Have created a childtheme, copied woocommerce.css(from the woocommerce plugin) to the child theme css and disabled the enqueuing of this woocommerce.css.

There is a woocommerce.css in my parent theme's folder structure also ( ~/wp-content/themes/shop-isle/inc/woocommerce/css/woocommerce.css).How do i override this so as to be agnostic to any theme updates?

Also - what is the difference between the woocommerce.css in the parent theme folder structure and in the woocommerce plugin folder?

Answer 1

You should create the same file in your child theme, so you will have something like this:

~/wp-content/themes/shop-isle-child/inc/woocommerce/css/woocommerce.css

This way the woocommerce.css of the parent theme will not matter.

Answer 2

So I tried various things, including using the get_stylesheet_directory() function - but nothing worked. I contacted the theme guys, and they gave me this code to override the woocommerce.css in the inc folder after replicating the folder structure in the child-theme, and it seems to work.

function ti_dequeue_script() {
  wp_dequeue_script( 'shop-isle-woocommerce-style1' );
    }
add_action( 'wp_print_scripts', 'ti_dequeue_script', 100 );

function ti_enqueue_script() {
  wp_enqueue_style( 'shop-isle-woocommerce-style2', get_stylesheet_directory_uri() . '/inc/woocommerce/css/woocommerce.css',array(), 'v3' );
   }
add_action( 'wp_enqueue_scripts', 'ti_enqueue_script', 100 );