Adding icons to the tabs on the WooCommerce My Account page enhances the visual appeal of your website and provides a more user-friendly experience. This tutorial will guide you through the process of how to add icons to tabbed lists, both multi-tab and single-tab lists on your My Account page, so you’ll completely learn how to add icons to WooCommerce My Account Tabs.
Before you begin, ensure that you have the necessary access and permissions to modify your WordPress theme files.
Adding Icons to Multi-Tabbed Lists #
If you have multiple tabbed lists on your My Account page and wish to add an icon to it, follow these steps:
1. Access Theme Customizer:
Go to your WordPress dashboard.
Navigate to “Appearance” and select “Customize.”
2. Locate the class used for these tabs (you can locate it by using inspect feature on your browser).
It is typically:
.woocommerce-MyAccount-navigation-link--all-lists a::after
- To place an icon before the tab title, use a::before.
- To place an icon after the tab title, use a::after
Note: “all-lists” is the slug you set in the Global settings as the WooCommerce My Account Wishlist Page Slug.
3. Insert your desired icon using the provided class.
- Within the Theme Customizer, navigate to the “Additional CSS” section.
- Insert your desired icon using the provided class. For example:
.woocommerce-MyAccount-navigation-link--all-lists a::after {
content: '\f123'; /* Replace '\f123' with the Unicode of your desired icon */
}
Adding Icons to Single-Tab Lists #
If you have single-tab for each of your lists and want to add icons based on the slug you set for each list, follow these steps:
1. Access Theme Customizer:
Go to your WordPress dashboard.
Navigate to “Appearance” and select “Customize.”
2. Determine the slug for the specific list. For example, if your list is wishlist and the slug is “custom-wishlist-slug,” the class would be:
.woocommerce-MyAccount-navigation-link--custom-wishlist-slug a::after
3. Insert your desired icon using the identified class.
- Within the Theme Customizer, navigate to the “Additional CSS” section.
- Insert your desired icon using the provided class. For example:
.woocommerce-MyAccount-navigation-link--custom-wishlist-slug a::after {
content: '\f123'; /* Replace '\f123' with the Unicode of your desired icon */
}
Repeat these steps for each single-tab list you want to customize.
Experiment with different icons and placements to achieve the desired look for your online store.
