How to add custom CSS to your site
CSS is responsible for the styling of elements on a web page. It controls the color and size of text, headings, background colors, spacing, and so on.
Our plugins include CSS code to style certain aspects of our plugin. For example, in our WooCommerce Product Table plugin we include CSS which controls the design of elements within the product tables. In our WooCommerce Private Store plugin, we include some CSS for hiding certain elements of the site when the store is locked.
If you need to modify or extend any of the CSS in our plugins, we recommend adding this to your Customizer or inside a child theme. We don't recommend changing the plugin files themselves, as the next time you update the plugin any changes you have made will be lost and you'll need to apply them again.
Adding CSS using the Customizer
In the WordPress Dashboard, go to: Appearance → Customize
Click the Additional CSS panel (this is usually towards the bottom-left of the screen)
Add the required CSS code inside the white box that appears. You can leave black lines between different CSS declarations if you wish. If you want to add comments to help document what each CSS block does, you can enter these between /* and */ marks.
Adding CSS using a child theme
First, check if you are already using a child theme. To do this, open the WordPress Dashboard go to Appearance → Editor (click 'I understand' if you see a warning about editing files).
It should open a file called style.css for your current theme. At the top of this file, if you see a section like this: Template: <theme name> . then you are using a child theme. If you don't see the Template: section, you need to create a child theme first.
If you need to create a child theme, please refer to this guide or use a plugin to create one.
Once you have a child theme, make sure it's activated.
Next, you need to edit the style.css file for your theme. The best way to do this is via SFTP. To do this, login to your site via SFTP or SSH, download the style.css file your child theme, make the necessary changes, then upload the file again (overwriting the original).
Alternatively, you can edit the file from the WordPress Dashboard. Go to Appearance → Editor again. If your child theme is activated, the correct style.css file should be displayed, so simply add the code to this file and click Update File at the bottom.