Support » Theme: Storefront » woocommerce.css overriding child theme style.css

  • Resolved robertnick01

    (@robertnick01)


    I’ve set up a child theme with Storefront as the parent and the woocommerce plugin active, which I’m trying to learn my way around. I thought I’d start with something very simple: changing the position of the site title so that it sits to the right of the page rather than the left. Initially I tried the code `.woocommerce-active .site-branding{
    float: right;
    }`
    in the child’s style.css file but I noticed that the css file “inc\woocommerce\css\woocommerce.css” in the Storefront parent directory contained the code

    .woocommerce-active .site-branding, .woocommerce-active .site-logo-anchor {
      float: left;

    which was overriding it. I fixed it by changing the code in the child style.css to

    .woocommerce-active .col-full .site-branding{
    	float: right;
    }

    and it worked, but I was wondering why code in the woocommerce.css file took precedence over the child’s style.css file? In the child’s functions.php I’ve copied

    <?php
     add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
     function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }

    from https://codex.wordpress.org/Child_Themes and I thought that the child css file was loaded last and would therefore override parent code in this case? Sorry if this seems like a silly question!

Viewing 14 replies - 1 through 14 (of 14 total)
  • I thought that the child css file was loaded last and would therefore override parent code in this case?

    Your child theme’s style.css file will be loaded after the parent theme’s style.css file, but not necessarily (and most likely) not after any plugin’s CSS. So for any rules having the same specificity, the latter rule will have precedence. That’s why I sometimes recommend using JetPack’s custom CSS to add overriding CSS rules. JetPack will almost always put it’s stylesheet after all other plugin’s stylesheet, so that any rules added through JetPack with the same specificity as a previously defined rule will take precedence.

    Thank you, I’ll definitely have a look into the JetPack plugin. Reading my post again I realised it’s probably not apparent that the woocommerce.css file containing the overriding rule is in the Storefront theme folder, not in the woocommerce plugin folder.

    Yes, and I may not have been clear, either, when I mentioned the ordering of CSS stylesheets. It doesn’t really matter where the stylesheet is physically located that determines the precedence of a rule with identical specificity, but the order in which the stylesheet appears in the web page. That is, you would do a view source on the page to see the order in which stylesheets are loaded, and that ordering doesn’t depend on the physical location of the CSS file.

    I see, that would explain the wordpress.css stylesheet overriding my own because it’s listed last in my page’s html. I’m not sure how to change it though, even disabling the woocommerce stylesheets with
    add_filter( 'woocommerce_enqueue_styles', '__return_false' );
    doesn’t remove it.

    CrouchingBruin is correct, the woocommerce.css stylesheet is loaded after the child theme style.css file. I’d recommend leaving that file empty and enqueueing a separate stylesheet for your child theme, or, if you’re just making css edits use a custom css plugin/jetpack.

    So I should leave the child theme’s style.css file empty and enqueue another stylesheet instead. How would I ensure it is loaded after woocommerce.css? Thanks for your help so far guys.

    Just make sure that the function that enqueues your child theme stylesheet it hooked in later than the WooCommerce one.

    Take a look here:

    https://github.com/woothemes/storefront/blob/master/inc/woocommerce/hooks.php#L12

    You can see that the WooCommerce stylesheet is hooked in with a priority of 20. If you enqueue yours with a priority of 30 it will load after and your styles will over rule the WooCommerce ones.

    Cheers

    @jameskoster,

    I tried exactly what you said but woocommerce.css is stll loaded after my child theme style.css:

    function theme_enqueue_styles() {

    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array(‘parent-style’)
    );
    }

    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’, 30);

    Hey,

    I’m not sure what to say. It’s working fine for me, this is exactly what we do in our child themes. The only difference is that we set a higher priority. Maybe try that?

    Thanks James, that worked for me. I guess I ought to mark this topic as resolved. Thanks again for your help.

    James – I followed your suggestions by leaving the style.css blank, enqueueing a separate style sheet and hooking my custom.css stylesheet later than woocommerce.css. Now any changes I make using the built-in theme customizer (Appearance/Customize) are ignored. How do I re-enable the theme customizer? Thanks.

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 30);
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/custom.css',
            array('parent-style')
        );
    }

    thesloog,

    From a stock setup of Storefront and a child theme, you only have to add this line to your child theme’s functions.php file:

    add_filter( 'wp_enqueue_scripts', 'storefront_woocommerce_scripts', 1);

    The number “1” at the end of the code is the priority number, meaning it has first priority to be executed (along with other default WordPress actions).

    A theme’s stylesheet has a priority of 10 when it is loaded. This is the default setting WordPress have given themes. You can find it in the /wp-includes/default-filters.php file at around line 205.

    What you currently have is a priority setting of 30:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 30);

    Just change your “30” to 1″ to ensure that the woocommerce.css file is always executed first before any other stylesheet. You can keep the “add_action” in your code instead of “add_filter” like I have stated. I haven’t come across any problems with either.

    Thank you ericcrooks
    “add this line to your child theme’s functions.php file:

    add_filter( ‘wp_enqueue_scripts’, ‘storefront_woocommerce_scripts’, 1);”

    that worked for me.

    Hi ,,, i have a same issu but my theme is storex theme

    and my functions.php in the child theme is

    <?php
    /**
    * storex child functions and definitions.
    *
    */

    add_action(‘wp_enqueue_scripts’, ‘child_theme_enqueue_styles’,1);
    function child_theme_enqueue_styles() {
    wp_enqueue_style(‘parent-style’, get_template_directory_uri().’/style.css’);
    wp_enqueue_style(‘child-style’, get_stylesheet_directory_uri().’/style.css’, array(‘parent-style’,’plumtree-woo-styles’));
    }

    i want the styles.css to be over the woo-comerce style

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘woocommerce.css overriding child theme style.css’ is closed to new replies.