WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

closed as off-topic by toscho 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:

<?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

you could try being more specific:

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

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