Woocommerce css editing…one long line of code

You should not be editing the pluigns CSS files in the plugin. That’s going to end up with you loosing any changes that you have made the next time an update is released.

You should be making any changes that you need in your theme’s style.css file. If that is also a theme that has a chance of being updated you should use a child theme to ensure that any changes are not over-written.

Thanks Catacsustic. I have 2 questions if you have time:

1. I assume i need to put the woocommerce css I want to edit into the theme css/child theme css.True?
2. How the heck do I highlight and copy that long line of code in the woocommerce css file?

Paul

Never mind I figured out the copying part. Seems normal highlighting is not obvious. Is there any other way to access thewoocommerce.css in a normal state with line numbers etc. other than LESS.

Is it a good idea to convert the woocommerce.less.css to regular css and use that?

Paul

The “less” file is just the standard file with the line breaks and indenting removed to make it as small as possible for browsers downloading it. If you use something like Firebug or Chrome’s developer tools then you’ll easily be able to find the style definitions and copy those into a new style sheet without needing to find where it is in the original file.

Got it. Thanks a million.

Paul

Hi catacaustic / paultolejko

Having a few errors on this. I’ve copied the woocommerce css (from the less file) into my child theme. But using Firebug, the element still show as coming from the plugin file (i.e. the 1 long line of text code).

I tried deleting the woocommerce.css and .less files from the plugin folder also – that only removed all woocommerce formatting. What needs editing so that the style for woocommerce pages now pulls from the normal child theme style.css ??

thks

If you’re using a child theme, then you should be able to set up the stylesheet in that to over-ride any of the WooCommerce style rules. If not, then you can always set up another stylesheet and load that after everything else in the head area. The latest styles “win” with CSS, so the later it gets in there, the more chance its got of being used.

The “less” file is just the standard file with the line breaks and indenting removed to make it as small as possible for browsers downloading it.

Less is not a “standard css file with line breaks and indenting removed.” Less is a dynamic stylesheet language. It extends CSS with dynamic behavior such as variables, mixins, operations and functions.” ??
https://www.lesscss.org/

Also to un “minimize” your css (that single long line of css), visit a site such as: https://mrcoles.com/blog/css-unminify/

Copy your long line into the dialog box and click the unminify button.