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

1

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?

css wordpress woocommerce

shareedit

asked Oct 18 '16 at 15:51

Saurabh Jindal

75

add a comment

2 Answers

activeoldestvotes

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.

shareedit

answered Oct 18 '16 at 15:55

Castiblanco

1,07641129

• Hi, Thanks for the reply. – Saurabh Jindal Oct 18 '16 at 21:39
• But unfortunately this approach is not working. I replicated the directory structure, but the changes done in the child theme css are not being reflected. – Saurabh Jindal Oct 18 '16 at 21:40
• @SaurabhJindal look at how you can disable the originals: docs.woocommerce.com/document/disable-the-default-stylesheet – Castiblanco Oct 18 '16 at 23:03
• this talks about overriding the woocommerce plugin's css. My theme is using a woocommerce css in its own folder structure - and I need to override that. I can;t find the name for this css so that I could try the unsetting of the enqueuing of this css and then enqueue the same css in my child theme. Hope I could make myself clear here. I appreciate your help. – Saurabh Jindal Oct 18 '16 at 23:12
• Could you please show me your site – Castiblanco Oct 18 '16 at 23:27

show 8 more comments

0

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 );

shareedit