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

2 Answers 2


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, 2013 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.