WordPress: Customizing WooCommerce Themes

Course details

WooCommerce is one of the most popular and trusted ecommerce solutions around. Not just for WordPress but also for anyone who wants to set up a store. Making your theme match the rest of your WooCommerce website can help you create a more professional and trustworthy shopping experience and extend your brand online.

This course covers the fundamentals of building custom WooCommerce themes. Learn about using WooCommerce hooks, template overrides, PHP, and CSS to style the different store pages, and add custom imagery and icons to fit your branding. Author Patrick Rauland also introduces UX design techniques that encourage customers to buy, such as highlighting savings and adding social media icons for sharing.

Learning objectives
Selecting a base theme
Matching theme colors
Overriding and updating WooCommerce templates
Using hooks
Modifying your product page: images, tabs, icons, and more
Modifying the shop page, including customer savings
Modifying the checkout page
A/B testing your changes

Concepts

0. Introduction

01 - Welcome
02 - What you should know

1. Select a Base Theme

03 - What to look for in a theme
04 - Starter themes
05 - WooCommerce specific themes
06 - Declare WooCommerce support

2. Modify WooCommerce Styles

07 - Match theme colors
08 - Match email template and theme colors
09 - Match email and theme colors with CSS

3. Modify WooCommerce Layouts

10 - Hooks and templates
11 - Override WooCommerce templates
12 - Update WooCommerce templates
13 - Use WooCommerce hooks

4. Modify the Product Page

14 - Change image sizes
15 - Resize image column width
16 - Customize product data tabs
17 - Add social media icons
18 - Change the breadcrumb separator
19 - Update the currency symbol

5. Modify the Shop Page

20 - Filter products
21 - Display accepted credit cards
22 - Change product display
23 - Display customer savings
24 - Customize the sorting menu

6. Modify the Checkout Page

25 - Streamline the checkout template
26 - Skip the cart
27 - Add an Empty Cart button
28 - Hide the coupon field
29 - Remove checkout fields
30 - Add checkout fields

7. A B Testing

31 - When to A B test

Conclusion

32 - Next steps