Join Patrick Rauland for an in-depth discussion in this video Adding order status icons, part of WordPress Ecommerce: WooCommerce Plugins.
- [Instructor] Now this looks good,…we can see the status but there is no icon,…and that's a bit of a problem.…When you're browsing hundreds of orders,…having an easy to recognize icon is immensely useful.…So we're going to add an icon.…If we go up here, open up our element inspector in Chrome,…we can see that WooCOmmerce is using an icon font.…THere's nothing here and if we scroll all the way down,…we can see the icon font.…
What's good is we can use the same technology…and copy and paste most of this.…WHat's bad is that it's going…to be hard to add our own icon.…Beause we'd have to replace the font in WooCommerce.…So what we're going to do is we're going…to use an existing icon that's already…in this set and change the color of it.…That is going to be very easy to do with icon fonts.…So before we do this we're going to go to our code editor…and add a little bit of css to this page.…I'll close this, go back to my code editor,…and I'll scroll back up.…
So right around here on line 22,…we'll scroll down to the next line…
- Creating a WooCommerce plugin
- Finding hooks within WooCommerce
- Creating settings pages
- Analyzing WooCommerce settings
- Configuring settings
- Customizing the edit product page
- Using hooks on the product page
- Customizing the WooCommerce checkout
- Adding custom order statuses
Skill Level Intermediate
Q: This course was updated on 08/07/2018. What changed?
A: The following topics were updated: adding a meta box, saving product fields, customizing product titles, and adding data to product page tabs.
1. Overview of Customizing WooCommerce
Print an admin notice4m 21s
2. Create Settings Pages
3. Customize the Edit Product Page
4. Customize the Product Page
5. Customize the WooCommerce Checkout
6. Customize the WooCommerce Admin
- 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.Cancel
Take 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.