Customization Of WooCommerce My Account Page

The WooCommerce My Account is a plugin module from Booster that allows you to customize your WooCommerce my account page. 

Also, with this plugin module, you can add custom pages, custom menu items, and custom info blocks to your WooCommerce My Account page without a fuss. 

You can do a lot of other stuff with this plugin, too. 

For example, it allows you to make it possible for your customers logged into your store to change their order status to processing, pending payment, on hold, completed, canceled, refunded, or failed. 

It makes it possible for your customers to choose their user roles manually.

Key Features of WooCommerce My Account Module

Here are the key features of the WooCommerce My Account plugin module:

• Allows you to add user role selection to your registration form 
• Makes it possible for your customers to choose their roles manually
• Allows you to customize your menu and endpoints
• Customizable menu order
• Allows you to add custom pages to your WooCommerce my account page
• Makes it possible for you to add custom content to your customized pages
• Supports dashboard customization 
• Gives you the option of hiding the “hello” message 
• You could even hide the “from your account dashboard” message if you want to. 
• Enable custom block and add custom content to them
• Custom position order for your accounts dashboard

Installation of the WooCommerce My Account Module

To install and use the WooCommerce My Account plugin module, you first need to install and activate WooCommerce on your website. When you have, download the Booster WordPress module. 

After that, upload, install and activate the plugin file in the same way you would with other plugins. 

The next thing you will want to do is to launch the Booster WooCommerce My Account module. To do so, navigate to WooCommerce >> Booster Settings >> Email and Misc >> My Account

When you have, click the Enable Module checkbox.

Why Customize My Account Page in WooCommerce?

There are many reasons you will want to customize your My Account Page in WooCommerce. First, doing so will help to improve your customers’ buying journey. 

Improving your customers’ buying journey will make them more loyal to your brand. 

Second, customizing that page will also help to give your customers a personalized buying experience.

How to Customize My Account Page

To customize the WooCommerce My Account Page, install and activate the Account Page plugin module by following the steps we highlighted earlier. Then navigate to the Account settings page. This is where you will do the customization. 

You can start by setting a title to the Dashboard, Orders, Downloads, etc. sections. You can also take things further by customizing the menu order.

General Options

Add Order Status Actions

Let your customers change order status manually. Possible values: Pending payment; Processing; On hold; Completed; Cancelled; Refunded; Failed; Custom order statuses.

Default: None

Add User Role Selection to Registration Form

Let your customers choose their user role manually.

Default: no

Add User Role Selection to Registration Form: Default user role

Possible values: Guest; Administrator; Editor; Author; Contributor; Subscriber; Customer; Shop manager; Exempt Customer; Pending Vendor; Vendor; Custom user roles.

Default: Customer

Add User Role Selection to Registration Form: User roles options

Possible values: Guest; Administrator; Editor; Author; Contributor; Subscriber; Customer; Shop manager; Exempt Customer; Pending Vendor; Vendor; Custom user roles.

Default: Customer

Custom Info Blocks

Custom Info Blocks

Enables/disables section.

Default: no

Total Blocks

Sets number of total info blocks. Press Save changes to see new options.

Default: 1

Info Block #X

Content

Info block #X content. You can use HTML and/or shortcodes here.

Default: None

Position

Info block #X position. Possible values: Account content; Account dashboard; Account navigation; After account downloads; After account navigation; After account orders; After account payment methods; After available downloads; After customer login form; After edit account address form; After edit account form; After my account; Available download end; Available download start; Available downloads; Before account downloads; Before account navigation; Before account orders; Before account orders pagination; Before account payment methods; Before Available downloads; Before customer login form; Before edit account address form; Before edit account form; Before my account; Edit account form; Edit account form end; Edit account form start; Login form; Login form end; Login form start; Lost password form; Register form; Register form end; Register form start; Reset password form; View order.

Default: Account dashboard

Position Order (i.e. Priority)

Info block #X position priority.

Default: 10

Tips & Tricks

If you need to change menu color, size, icon etc., you can use CSS for that. Here are a couple of examples of what can be done. CSS can be added to Booster’s “Custom CSS” module, or to any other custom CSS tool or plugin.

<br />
/* Menu link customization */<br />
li.woocommerce-MyAccount-navigation-link {<br />
font-size: large !important;<br />
}</p>
<p>/* Menu customization */<br />
.woocommerce-MyAccount-navigation {<br />
width: 100% !important;<br />
}</p>
<p>/* Icon customization (“Dashboard”) */<br />
.woocommerce-MyAccount-navigation-link–dashboard a::before {<br />
font-size: xx-small !important;<br />
float: left !important;<br />
margin-right: 15px !important;<br />
color: red !important;<br />
content: “\f3fa” !important;<br />
}</p>
<p>/* Icon customization – hover (“Dashboard”) */<br />
.woocommerce-MyAccount-navigation-link–dashboard a:hover::before {<br />
color: #8bc34a !important;<br />
}</p>
<p>/* Icon customization – hover (“Downloads”) */<br />
.woocommerce-MyAccount-navigation-link–downloads a:hover::before {<br />
color: #3256bf !important;<br />
}<br />

You can get codes for the icons (content: "\f3fa" !important; in the example above) here – https://fontawesome.com/cheatsheet.

FAQs

What’s My Account Page?

My Account page is a dashboard page in WooCommerce, from where customers can view their past orders, check their payment details, and edit addresses. 

How to edit WooCommerce My Account page programmatically?

To edit My Account page in WooCommerce programmatically, inject CSS codes into Booster’s Custom CSS module.

Conclusion

The WooCommerce My Account Page is an important element of your WooCommerce store. Customizing it with the Booster My Account plugin module will help to improve your customers’ buying journey, and, hence, boost your sales.