Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WooCommerce: Intro to CSS


Published on

These slides belong to, 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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WooCommerce: Intro to CSS

  1. 1. Introduction to CSS
  2. 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
  3. 3. Example: woocommerce.css
  4. 4. CSS Requirements / 1 ● 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. 5. CSS Requirements / 2 ● CSS ( ○ "syntax" ■ selector { property: value; } ■ h2 { color: red; font-weight: 600; } ○ colors, backgrounds, borders, margin vs padding, "display" (none), "@media" ○ comments: /* comment */
  6. 6. CSS Requirements / 3 ● 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. 7. Google Chrome Dev Tools > Inspect
  8. 8. CSS "Specificity" Hierarchy 1. !important: a { color: red !important; } 2. Inline: <a style="color: red;"></a> 3. ID: #page-id-661 a { color: red; } 4. Class: { color: red; } 5. Element: a { color: red; } 6. Element (latest): a { color: red; }
  9. 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)
  10. 10. WooCommerce CSS ment/css-structure/ /assets/css: 20+ CSS files!
  11. 11. CSS Customization Workflow 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?