Can’t Edit Woocommerce Css vis Plug In Or Theme css Files

[Emily]

I’m new here so not sure if this question should be here or over in css as my question is not about the css itself.

Anyhow, when I first installed the Woocommerce plug-in I edited the woocommerce.css file directly, I know that is not the correct way to do it but it was easiest at the time. If I updated the plug-in I would just re-upload my edited woocommerce.css file.

Well after the most recent update, the edits I make to the direct woocommercec.css file don’t work – they don’t change anything at all.

So, I tried adding the css to my theme: mytheme/woocommerce/style.css

Which, as I understand is suppose to override the wc.css file BUT it’s not. Changes I make here also don’t work.

If I use Firebug and make the edits, they show up. When I make the same edits in either css file (plug-in or theme) nothing changes!

I am using Genesis, a child theme, and genesis woocommerce connect plug-in if that makes a difference.

I have also tried editing my theme style.css to make the changes but this only works if I disable the wc.css and that’s not what I am after.

Any help would be greatly appreciated.

[Emily]

Well, I asked on the plug-in support page and am waiting for a reply but I need to fix it ASAP.

I just updated it yesterday so all code should be up to date and that’s exactly what is happening when I use Firebug my changes work but when I apply the same changes to the files nothing changes.

[Emily]

I guess that would be helpful, sorry about that:

http://blogaholicdesigns.com/shop/blogger-blog-templates/

As you can see the images are all messed us, they use to be bigger and fit the page (with the edited css) and new images are even worse (the big blurred images).

So for example, when I click on an image on that page Firbug shows:

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img (from the woocommerce.css file)

When I change width to auto instaed of 100% if changes but when I change it in the file – nothing.

[Emily]

That is the link to the specific page. It has rows of 3 images some are big and square and blurry and some are rectangular. Also they are just smaller than they use to be, smaller than I want them to be. I know how to fix the issue, my problem is just that when I fix it how I use to through the css it’s not changing anything. I’m just not sure why my store is not reflecting my css changes.

[Emily]

The image size sometimes doesnt work when set in Woocommerce setting, it gets blurry so it has to be changed via css. Also css has it set to a % where I need it at auto – the images are different sizes because some were added before the update some after.

BUT someone on plug-in support suggested a fix so I ended up just copying and pasting the entire woocommerce.css code inside my theme style.css and disabling the woocommerce.css file and it wordked!

Thanks so much for taking the time to help me – I really appreciate it!

[asiek]

I am no professional but I ran into a similar issue with my custom made theme…
So here are a few solutions that worked for my theme:

**1** Did you try changing:
_themename/woocommerce/style.css_
to
_themename/woocommerce/woocommerce.css_?

**2** In your header file is there a <?php wp_head(); ?> tag anywhere near </head>?

**3** Have you tried using this code to include your own woocommerce.css file?

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'woocommerce', get_template_directory_uri() . '/path/to/woocommerce.css' );
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'woocommerce' );
	}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

[will_wallace85]

Two things to try:

1. There is a setting in woodcomerce to enable woocommerce css, try disabling that and loading the css manually on the woocommerce template pages or throw it into the main style.css of the site if you’re not concerned about performance.

2. Try pre-pending your class calls with #content to make sure you have precedence. It’s basically the same as throwing !important everywhere, but is much friendlier.

[Paulie_D]

This issue is SOLVED guys.

[asiek]

I posted my solution just in case, sorry @paulie_d ..

[eggaweb]

I found that I couldn’t edit the woocommerce.css as it was somehow write protected. I couldn’t even change the access permissions. None of the other advice that I read about worked either. Here is what to do:
1. Create child theme (do a search for “wordpress child theme”).
2. Downanload and edit the woocommerce.css file (found in wp-content/plugins/woocommerce/assets/css).
3. If you like, http://procssor.com/ will help clean up the CSS code.
4. Look for img and keep going until the search places you near where it says width:100%, change the 100% to auto.
5. Keep looking for img until you see it again and do the same thing (the second one changes the related products).
6. Save the file and copy it to your theme directory.
7. In your style.css on the child theme, add the following line:
@import url(“woocommerce.css”);

[Author]

Posts