Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have Woocommerce installed on a site I am prototyping. I have some Woocommerce CSS I want to change, but when I try to change it via the style.css in my Twenty Eleven child theme, nothing happens. I can make the change in Firebug no problem.

I assume it's because the plugin CSS is being loaded after the theme CSS. I tried marking the CSS changes with !important but that yielded no results.

the CSS:

ul.products li.product{
    width: 48% !important;
}

the purpose: to make the 2 column layout full width

share|improve this question
add comment

2 Answers

You can change the CSS loading order.

Find the place where WooCommerce enqueues it's CSS and keep in mind it's $handle (name). Search for wp_enqueue_style.

Then go to theme's functions.php and find the place where your theme enqueues it's CSS.

Now change your theme's wp_enqueue_style by adding WooCommerce's $handle to $deps (dependencies) parameter of theme's wp_enqueue_style.

After these manipulations WordPress will load theme CSS after WooCommerce CSS, which will become overridable.

For example:

<?php
wp_register_style(
    'your-theme-css', // theme CSS handle (name)
    get_template_directory_uri() . '/your-theme.css', // theme CSS path
    array('woocommerce-css-handle') // dependencies
);
share|improve this answer
1  
where 'woocommerce-css-handle' is probably 'woocommerce_frontend_styles' (looking at page source on a site with WooCommerce). –  webaware Feb 11 '13 at 9:23
add comment

you could try being more specific:

#content .products .product{
    width: 48% !important;
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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