Trying to Override WC css – Not Working

The best way in my opinion is to disable the WC styles. And then copy all the styles into your theme styles so that only one copy is loaded and it will be update friendly.

I will try that.

Just so I don’t mess everything up:

Am I just going to copy all of the code in the woocommerce.css file and then paste it into my theme style.css file?

And is there a specific place I need to paste it?

Thanks so much!

Every theme is different so you have to first determine what styles file you can use which won’t be erased on the theme update. Good themes will have a way for you to do that.

Then you would paste the WC styles into that file.

Great!

And would I just paste that code at the very bottom of the filo below all the other code?

Yes. Also note that you should use a “less” compiler and generate a non-minified version of the WC styles less file so that way you can read the CSS and change as needed. Because if you copy the file with CSS extension, that file is already minified and is not easily readable.

So those are your two options. Copy the minified css into your theme’s styles and then write CSS below that to override the style you want. OR the better way is what I have mentioned about compiling the less as non-minified version.

Awesome! It worked! Thank you so much I have been at this for hours!!!!!

I ended up going with your suggestion of copying the minified and non-minified code to my theme style sheet because I don’t know anything about using a less compiler and I needed to fix it quick so maybe I will look into that in the future if it will make things easier/ better for my site.

I really appreciate your help!

Hi – I am having the same problem and the only way I seem to be able to make style changes to the Woo Commerce end of the site is to copy and paste all the woocommerce.css style into the Twenty Thirteen Style sheet of the website. Then at the bottom of the woocommerce.css within that style sheet I make the changes to the necessary elements so that they come after their initial styling and so override. But as is stated in this debate “what happens when the Twenty Thirteen Theme is updated”

So here is what I have tried:

Copied and pasted the woocommerce.css from the plugin/assets/woocommerce.css styling code and pasted it into my Twenty Thirteen Theme/style.css

Then I tried to implement changes using my Twenty Thirteen Child Theme/style.css. When I tried this no changes were implemented.

Then I tried pasting the woocommerce.css code into the Twenty Thirteen Child/Style.css as well as leaving the code in the Twenty Thirteen/Style.css file

Again nothing happened when I implemented some style changes.

Then I went directly into the TwentyThirteenTheme/style.css and directly under the block of minified, (if that is a word) css code for woocommerce (which I pasted earlier) I effected some changes to the style and they seem to be working.

So my big issue is this. Do I keep going and maybe make a back-up copy of my main style.css file and store it in the TwentyThirteenChild Theme folder so that when updates to the Twenty Thirteen Theme are effected I just need to copy and the necessary code back into the Twenty Thirteen/Style.css file.

I understand that this is not the simplest way of doing things, but I have tried lots of other suggestions I seen on forums and none of them worked.

Also: SplashingPixels made this statement earlier:

“Every theme is different so you have to first determine what styles file you can use which won’t be erased on the theme update. Good themes will have a way for you to do that.

Then you would paste the WC styles into that file.”

Does anybody know how to determine which files will not be erased on theme updates?

Thanks for any help that might be forthcoming.

Hi!

Im having the same problem… There is some WC Shop Meta/ Login Widget on the top right of my header banner which displays (when logged out) ”Customer Login” and ”Basket Items”.

However, when logged in it displays:
”Howdy, User” and ”Basket Items”

When im logged into wordpress I can edit the widget font by using a Font editing plugin (Font by Pawe? Misiurski). But, I want to also be able to edit the ”Customer Login” font which is only displayed when Im logged out of wordpress, therefore I cant use the font editor as you have to be logged in to use this.

I figured I will have to edit the woocommerce.css. After not having much luck by editing and overwriting via ftp, I have tried to use your methods above. Ive disabled woocommerce styles and copy pasted the woocommerce.css code (not minified) into the style.css of my child theme. It has had no effect.

This is driving me crazy, I need customers to be able to see the ”Customer Login” font clearly.

This is hard to explain, you can see what im on about here:
https://www.tiqueabouclothing.com
The top right, in a light grey is the customer login, next to the basket items.

Can anyone help? Im at a loss!
Many, many thanks in advance if you can offer a suggestion!

Oh, and ive been using Firefox web developer css editor to make real-time changes, so Ive edited the css correctly to achieve what I want (its only a colour and font size change)…
It just doesnt seem to have an effect when copying the code into the style sheet.

Declan

Similar problem
I have created a child theme for twenty fourteen and an additional stylesheet for full-width pages called fullwidth.css

I call fullwidth.css from the header.php when the page template is fullwidth-page or it is a woocommerce page.

That removes the black strip for the left hand sidebar fine, so I know the css is being read and is working.

My problem is that I would also like to over write the “width: 100%;” with “width: auto;” on the following tags so that my small icons display properly.

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img

This is not working at https://new.rachelarthur.com.au/product-category/downloads-audio/, for example

but is working fine at https://rachelarthur.com.au/product-category/downloads-audio/

When I inspect the elements the fullwidth stylesheet has not been applied to these elemetns, but I know it has been loaded and is working (it is present in the source, and the black for the left sidebar has been removed)

Can anyone point out to me what I have missed?

Whoops, complete idiot. Had not completed comment properly and had commented out my own CSS code!

@geoffebbs Just clicked onto your website… your a nutritionist?… so am I, graduated a couple of years ago, coincidence… there arent that many of us :)!

Anyway, I think im even more of an idiot then you as I havent commented in anything… how do you do that? Ive just pasted the woocommerce css onto the bottom of the style.css. Do I have to add additional code? If so, what is it?