How To Customize Woocommerce My Account Page with Gutenberg?

If you are using WooCommerce then you probably have noticed that the account page looks quite boring. Therefore, today I am going to show you how to customize WooCommerce my account page with Gutenberg editor in a way that it looks more professional, visual and much nicer than the default one.

It will take only 10-15 for you to accomplish all that. To get better understanding what we are going to buyild today, take a look at the fetured imaged above. So, buckle your seatbelt because we are going to start.

How To Customize WooCommerce My Account Page with Gutenberg?

First things first. We need to install one additional plugins on your site. Don’t worry – it’s a really great plugin which makes your Gutenberg editor experience much better.

Step 1: Install and activate “Gutenberg Blocks by Kadence Blocks – Page Builder Features” plugin

Kadence Blocks is a plugin which adds twelve custom blocks to your site. It helps you to create custom layouts in a way you are used to when using page builders (for example, Elementor). You can add rows, columns, nested columns, accordions, info boxes, testiominals etc.

The main reason we are using this plugin for customizing the WooCommerce my account page is that it gives us an opportunity to add columns and info boxes. Also, it gives us visibility option we are going to talk about later.

To install the plugin go to Plugins >> Add new >> Search for Kadence Blocks >> Install >> Activate

Also, this plugin can be found here.

Step 2: Open My Account page for customization and add Row Layout Block

After adding Row layout block choos four-column layout.

How To Customize WooCommerce My Account Page with Gutenberg?

Step 3: Add Info Box block into the first column

Now style the column as you wish by giving it a title (for example ORDERS). Customize the background, typography, icon etc. by using block setting on the right of the page.

Video: How To Customize WooCommerce My Account Page with Gutenberg?

Step 4: Open Woocommerce >> Settings >> Advanced and copy the needed account endpoint

For example, if you are creating Orders info box then you need to copy the orders endpoint and add it to the info box link section as /my-account/orders/

If you create another info box and name it “Edit account” then you copy the edit-account endpoint and link your info box as /my-account/edit-account/ (see the screenshot below).

How To Customize WooCommerce My Account Page with Gutenberg?

The default endpoints in Woocommerce are:

  • Orders (endpoint orders)
  • View order (endpoint view-order)
  • Downloads (endpoint downloads)
  • Edit account (endpoint edit-account)
  • Addresses (endpoint edit-address)
  • Payment methods (endpoint payment-methods)
  • Lost password (endpoint lost-password)
  • Logout (endpoint customer-logout)
How To Customize WooCommerce My Account Page with Gutenberg?
Woocommerce endpoints. You can see them under Woocommerce >> Settings >> Advanced

Step 5: Duplicate your finished Info box and move it to other columns. Customize.

Now when you finished your first dashboard box you can duplicate id three times and move one box into every empty columns.

After that just replace the icon, title and link.

Step 6: Add a banner to your Woocommerce My account page and customize it

You can use a Kadence Blocks Row layout block again but this time after adding it to your page choose a suitable header by pressing on Prebuilt library button (see the screenshot below). This allows you to choose between some nice pre-built headers and therefore you don’t have to waste your time for building those.

How To Customize WooCommerce My Account Page with Gutenberg?
Kadence Blocks Row layout >> Prebuilt Library

Step 7: Remove page title and padding (if needed)

If your theme allows you to remove page title and vertical padding then choose these settings. For example, Kadence theme allows you to disable these on the page settings like shown on the screenshot below.

Kadence theme page settings
Kadence theme page settings

Now, you may ask “But why do I have to remove page title and vertical padding?”. The answer is: you need to do it only if you are adding a custom image shown on the step 6. If you are not doing this then skip to the step 8.

Step 8: Make your Woocommerce My account page to be without sidebar

If you account page has a sidebar then it would be wise to remove it. Otherwise, it will not look good. Usually your theme has an option to set your page to be with or without sidebars.

Step 9: Deactivate dashboard for logged-out users

So far you have added four dashboard boxes and linked them to the correct endpoints. The problem is though, that those boxes are also visible for logged-out users. Therefore, we have to hide them and sho only to logged-in users.

In order to do that select your row that contains these four columns, choose Visibility settings and activate Gide from “Logged out users” selection (see the screenshot below).

Kadence blocks  visibility settings

Step 10: Remove old Woocommerce my account dashboard navigation

So, you have created a new dashboard but the old navigation links are still there? Well, in order to customize your Woocommerce my account dashboard there is one more thing you need to do. And that means removing this navigation.

Therefore, go to Appearance >> Customizer >> Additional CSS and add this bit of a CSS code.

.woocommerce-MyAccount-navigation {
display:none;
}
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

This bit of a code will remove the old navigation links and set the content to be shown in 100% width.

Video: How To Customize WooCommerce My Account Page with Gutenberg?

If all this I described above seems a bit confusing for you then take a look at the 10-minut video below. This shows in detail how to accomplish all that I described above.

Useful tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72