These slides belong to https://CustomizeWoo.com, a technical video course that shows you how to override WooCommerce pages and elements without using plugins. You can watch me code and learn by example. A series of videos, screencasts, examples and exercises will help you feel more confident about WooCommerce customization, child themes, hooks and CSS/PHP snippets. Watch and re-watch each video how many times you like, get lifetime access to me via the comment section, exercise as much as possible and keep learning. Access your free videos or buy the course via https://businessbloomer.com/customizewoo-master-woocommerce-online-course/

1. Introduction to CSS
CustomizeWoo.com

2. "CSS"
"Cascading Style Sheets": assign styles
(e.g. colors, font, width) to HTML
"Cascading": which rule applies if more
than one HTML element style
CustomizeWoo.com

3. Example: woocommerce.css
CustomizeWoo.com

4. CSS Requirements / 1
CustomizeWoo.com
● HTML (w3schools.com/html)
○ "tag" e.g. <p>, <h1>, <a>, <img>
○ "element" e.g. <p>Hello!</p>
○ formatting e.g. <b>This is bold</b>
○ "class" e.g. <p class="style-all-p-tags">
○ "ID" e.g. <a id="style-this-a-tag">
○ "inline style" e.g. <p style="color:red">

5. CSS Requirements / 2
CustomizeWoo.com
● CSS (w3schools.com/css)
○ "syntax"
■ selector { property: value; }
■ h2 { color: red; font-weight: 600; }
○ colors, backgrounds, borders, margin
vs padding, "display" (none), "@media"
○ comments: /* comment */

6. CSS Requirements / 3
CustomizeWoo.com
● Google Chrome (or Firefox) browser
○ right click > "inspect" to see / live-edit
CSS of current page
○ edit a property or value and press Enter
to see the change
○ by default, CSS modifications are lost
when you reload the page

7. Google Chrome Dev Tools > Inspect
CustomizeWoo.com

8. CSS "Specificity" Hierarchy
CustomizeWoo.com
1. !important: a { color: red !important; }
2. Inline: <a style="color: red;"></a>
3. ID: #page-id-661 a { color: red; }
4. Class: a.red { color: red; }
5. Element: a { color: red; }
6. Element (latest): a { color: red; }

9. WordPress CSS
Instructions for styling are in the
style.css file of your current theme
(plus: other theme's CSS files - plus:
plugins' CSS - plus: custom CSS)
CustomizeWoo.com

10. WooCommerce CSS
https://docs.woocommerce.com/docu
ment/css-structure/
/assets/css: 20+ CSS files!
CustomizeWoo.com

11. CSS Customization Workflow
CustomizeWoo.com
1. Task specifications e.g. "ALL <p> to have
padding bottom = 10px 20px"
2. Inspect to see CSS call which is giving
padding style
3. Change value to 20px @ Chrome Inspector
4. Copy/paste CSS @ Child theme's style.css
5. (Disable cache) Save / Test / +Specificity?