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

closed as off-topic by fuxia May 11 '14 at 8:56

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


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:

    'your-theme-css', // theme CSS handle (name)
    get_template_directory_uri() . '/your-theme.css', // theme CSS path
    array('woocommerce-css-handle') // dependencies
  • 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

you could try being more specific:

#content .products .product{
    width: 48% !important;

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