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: Where to Place Customization

13 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: Where to Place Customization

  1. 1. WooCommerce Customization: Do I Need a Child Theme? CustomizeWoo.com
  2. 2. Do I Need a Child Theme? No you don’t. But 5 minutes of extra work can give you lots of benefits. CustomizeWoo.com
  3. 3. First of all: CSS or PHP? ● CSS = style (STYLE.CSS) ○ border, color, margin, … ○ responsive ● PHP = functions (FUNCTIONS.PHP) ○ remove, add, move WC element ○ edit WC element CustomizeWoo.com
  4. 4. “Child theme” CustomizeWoo.com
  5. 5. “Child theme” 1. Inherits style (CSS) and functions (PHP, ...) of its parent theme 2. Updating parent won’t overwrite child CustomizeWoo.com
  6. 6. “Child theme” 3. Ideally only style.css & functions.php files 4. All customization in one place 5. Easy to backup, manage, clone, deactivate CustomizeWoo.com
  7. 7. Where to place custom CSS? 1. Edit Theme / WC Core CSS files 2. Use Theme Options 3. Use Custom CSS Plugin 4. Use “Customizer” > Additional CSS 5. Edit style.css @ Child theme CustomizeWoo.com
  8. 8. “Customizer” > Additional CSS CustomizeWoo.com
  9. 9. WP Editor > style.css CustomizeWoo.com
  10. 10. FTP > style.css CustomizeWoo.com
  11. 11. style.css Customization Rules ● Leave /* Theme Name … */ there ● Always place CSS below it ● Comment CSS changes with: /* Typography */, /* Footer */, ... ● Disable cache CustomizeWoo.com
  12. 12. Where to place custom PHP? ● Edit Theme / WC Core files ● Use /woocommerce folder ● Use “Code Snippets” plugin ● Edit functions.php @ Child theme CustomizeWoo
  13. 13. /woocommerce Folder CustomizeWoo.com
  14. 14. “Code Snippets” Plugin CustomizeWoo.com
  15. 15. FTP > functions.php CustomizeWoo.com
  16. 16. FTP > functions.php CustomizeWoo.com
  17. 17. functions.php Customization Rules ● Leave <?php there on line 1 ● Always place PHP below it ● Comment PHP changes e.g.: /* Move Add to Cart @ Shop */ ● If file ends with ?>, remove it CustomizeWoo.com
  18. 18. Recap 1. Child theme has several benefits 2. style.css vs functions.php 3. Can be created in 5 minutes 4. FTP is your best friend CustomizeWoo.com

×