Create WooCommerce My Account Tabs

Getting Started Viewed: 1345
[vc_row][vc_column][vc_column_text]We show you how to create custom WooCommerce My Account tabs and how to setup our plugin.[/vc_column_text][vc_separator css=”.vc_custom_1543501103336{margin-top: 20px !important;margin-bottom: 20px !important;}”][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_column_text]

Settings Panel

You can find the everything inside your Admin Panel below WooCommerce -> My Account.  If you can not see the settings panel, make sure you have installed the Redux Framework Plugin.

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_single_image image=”432″][/vc_column][/vc_row][vc_row][vc_column][vc_separator css=”.vc_custom_1543501103336{margin-top: 20px !important;margin-bottom: 20px !important;}”][vc_column_text]

General Settings

In the general settings you can enable / disable our plugin. Moreover you are able to set a tab amount to increase performance & load time, you can reorder or disable tabs and you are able to rename the general WooCommerce tabs. For example you could disable the logout tab and rename the orders tab to “My orders”.

[/vc_column_text][vc_single_image image=”435″ img_size=”large” add_caption=”yes” style=”vc_box_outline” onclick=”link_image” css=”.vc_custom_1572001279526{margin-top: 30px !important;}”][vc_separator css=”.vc_custom_1543501103336{margin-top: 20px !important;margin-bottom: 20px !important;}”][vc_column_text]

My Account Tab Styles

In the styles section you are able to choose a layout (left / right sidebar or full width tabs). Furthermore you can set tab background & text styles, also for hover and active tabs.

[/vc_column_text][vc_single_image image=”437″ img_size=”large” add_caption=”yes” style=”vc_box_outline” onclick=”link_image” css=”.vc_custom_1572002780099{margin-top: 30px !important;}”][vc_separator css=”.vc_custom_1543501103336{margin-top: 20px !important;margin-bottom: 20px !important;}”][vc_column_text]

Create a custom My Account Tab

To create your first custom my account tab simply go into one of the settings. There you have the possibility to set the title, menu title and the endpoint URL. Then you need to specify a callback what the tab will show in the frontend. You can choose from different callbacks:

  • Editor (Custom WYSIWIG Text where you can use shortcodes or even customer meta data)
  • Link (simply links the tab to another page)
  • Contact 7 Form
  • Function (custom function that will be called. Create this in your functions.php of your child theme)
  • Products by category
  • Product Categories
  • Show Cart
  • Order Tracking
  • My Account
  • Recent Products
  • Featured Products
  • Sale Products
  • Best Selling Products
  • Top Rated Products
  • Related Products

Each of the callbacks have own settings, e.g. the editor will show a wysiwig editor then. At the bottom you can also limit a tab to a specific user role.[/vc_column_text][vc_single_image image=”438″ img_size=”large” add_caption=”yes” style=”vc_box_outline” onclick=”link_image” css=”.vc_custom_1572003363327{margin-top: 30px !important;}”][vc_message message_box_style=”solid” message_box_color=”warning”]After you creat a tab, reload the admin panel and make sure you add the tab in the reorder section in general settings![/vc_message][vc_separator css=”.vc_custom_1543501103336{margin-top: 20px !important;margin-bottom: 20px !important;}”][vc_column_text]

Example output

Below you can see an example output of the editor settings we used below. It shows first name “d” and then also the shortcode of current year.[/vc_column_text][vc_single_image image=”439″ img_size=”large” add_caption=”yes” style=”vc_box_outline” onclick=”link_image” css=”.vc_custom_1572016553249{margin-top: 30px !important;}”][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row]

Leave a Reply

Your email address will not be published. Required fields are marked *