Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

WooCommerce: Intro to CSS

14 Aufrufe

Veröffentlicht am

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/

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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?