Join Patrick Rauland for an in-depth discussion in this video Change the breadcrumb separator, part of WordPress: Customizing WooCommerce Themes.
- [Instructor] You may have seen these little links in…the top left that lead back to…the home page or category page.…They're especially helpful to get…a user back to our previous page,…hence why they're called breadcrumbs.…Breadcrumbs are really common in eCommerce,…and with WooCommerce, if you want to…change the way they look, you can do that.…The first thing we need to do is filter that default value.…But, before I do that,…I need to add yet more comments to my functions files,…so I can actually read this.…Changing the breadcrumb.…
So, the first thing you need to do is add a filter.…We're gonna use, add_filter, followed by the filter name,…woocommerce_breadcrumb_defaults.…And then, we're gonna put in the function name…that we're going to use to customize the breadcrumb,…hplussports_breadcrumb, followed by a semicolon.…Now, we're gonna write that function,…I'm gonna copy this first,…function and then V to paste,…and we do have defaults,…so I'm going to call this breadcrumb.…
Breadcrumb is an array with a lot of values inside.…
Author
Patrick Rauland
Released
9/15/2016This 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.
- 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
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome53s
-
-
1. Select a Base Theme
-
What to look for in a theme3m 10s
-
Starter themes55s
-
Declare WooCommerce support1m 44s
-
-
2. Modify WooCommerce Styles
-
Match theme colors3m 24s
-
-
3. Modify WooCommerce Layouts
-
Hooks and templates1m 36s
-
Update WooCommerce templates2m 55s
-
Use WooCommerce hooks2m 32s
-
-
4. Modify the Product Page
-
Change image sizes2m 15s
-
Resize image column width1m 50s
-
Add social media icons1m 23s
-
Update the currency symbol2m 32s
-
-
5. Modify the Shop Page
-
Filter products3m 35s
-
Change product display4m 50s
-
Display customer savings4m 33s
-
Customize the sorting menu6m 36s
-
-
6. Modify the Checkout Page
-
Skip the cart1m 26s
-
Add an Empty Cart button3m 54s
-
Hide the coupon field3m 19s
-
Remove checkout fields3m 29s
-
Add checkout fields4m 5s
-
7. A/B Testing
-
When to A/B test1m 15s
-
-
Conclusion
-
Next steps1m 11s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Change the breadcrumb separator