Override WooCommerce stylesheet

  • Author
  • #151293


    I am wanting to over-ride a few styles in your woocommerce.css stylesheet in a prosperity child theme. I see that you have already over-ridden (in fact, it looks like you have remove entirely) the default WooCommerce styles. When I look at the load order of the css files in the <head> of my pages, I can see the prosperity style.css sheet being loaded before my child themes style.css – which is exactly what I need. However, after that I can see the prosperity-wpcom woocommerce.css style being loaded – and so it is over-riding my own style.css:

    <link rel=”stylesheet” id=”parent-style-css” href=”http://solas-cpc.local/wp-content/themes/prosperity-wpcom/style.css?ver=5.3.2″ type=”text/css” media=”all”>.
    <link rel=”stylesheet” id=”prosperity-style-css” href=”http://solas-cpc.local/wp-content/themes/prosperity-wpcom-child/style.css?ver=1.0.1″ type=”text/css” media=”all”>
    <link rel=”stylesheet” id=”prosperity-woocommerce-style-css” href=”http://solas-cpc.local/wp-content/themes/prosperity-wpcom/css/woocommerce.css?ver=5.3.2″ type=”text/css” media=”all”>

    My work around is to use !important in my custom style.css file, but I’d prefer to just change the load order. How can I do that?

    I have tried to use:

    add_action( ‘wp_enqueue_scripts’, ‘prosperity_woocommerce_scripts’ );

    but a) It doesn’t actually work and b) there are probably some styles I actually want to use – I probably just want to over-ride a few of the Prosperity styles.


    charles de bueger

    The blog I need help with is hlml.blog.



    Oops – I made a small typo. I have NOT tried:

    add_action( ‘wp_enqueue_scripts’, ‘prosperity_woocommerce_scripts’ );

    In fact, I have tried

    remove_action( ‘wp_enqueue_scripts’, ‘prosperity_woocommerce_scripts’ );

    in my functions.php – and THAT doesn’t work. Commenting out the add_action(…) in prosperity-wpcom/inc/woocommerce.php (line 48) sort of works – but a) removes all the prosperity styles and b) is a direct change to the Prosperity theme rather than in the child theme, so may be destroyed when the Prosperity theme is updated. .


    Theme Author


    By default, the theme does not load default Woo styles (only styles that are needed for Woo blocks). It’s uses its own in order to avoid overriding and loading additional styles that the theme does not really need.

    “My work around is to use !important in my custom style.css file, but I’d prefer to just change the load order. How can I do that?”
    – Could you please email us @ https://themesharbor.com/contacts/ ? So, we can investigate this issue. Also, it would be great if you could send your child theme, so I can test it and see what is causing the issue.

    Looking forward to hearing from you!


The topic ‘Override WooCommerce stylesheet’ is closed to new replies.