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

7 views

Published on

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/

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WooCommerce: Intro to CSS

  1. 1. Introduction to CSS CustomizeWoo.com
  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 CustomizeWoo.com
  3. 3. Example: woocommerce.css CustomizeWoo.com
  4. 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. 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. 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. 7. Google Chrome Dev Tools > Inspect CustomizeWoo.com
  8. 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. 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. 10. WooCommerce CSS https://docs.woocommerce.com/docu ment/css-structure/ /assets/css: 20+ CSS files! CustomizeWoo.com
  11. 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?

×