How to customize your user account dashboard?

About this:

You can create more freedom when designing your account dashboard page by using the UX Builder. But to use the UX Builder for this you will need to give the template the ability to use blocks and remove the default dashboard. In this guide we’ll take you through the steps of how to unlock the UX Builder for this page.

Requirements

There are multiple ways to make these edits. Most of them are good too but these requirements are free and will be a great help to make changes to templates and more.

• FileZilla for transferring files. Download FileZilla
  You will need FTP details  from your hosting to connect. If you don’t want to use FileZilla/FTP, your file manager in hosting panel will do just fine.
• Visual Studio Code* for editing files. Download Visual Studio Code
  Any other file editor will work, or even notepad. A code editor is only there to make it more readable for us.
  _{* = Not to be confused with Visual Studio}
• Flatsome Child Theme*
  _{* = Don’t have a child theme installed? Read this}

Explaining the child theme

Why a Child Theme?

A Child Theme is a fundamental part of editing templates which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template every time there is an update.

Declaring paths

As files are an addition on the main theme, most functionalities are looking in specific folders. The path must be the same as the main file or it will not be found. Example:

plugins/woocommerce/templates/myaccount/dashboard.php   <- for this to be found we need:
flatsome-child/woocommerce/myaccount/dashboard.php

We will go over this in step 4.

Good to know; you don’t need everything from these folders. In this case an empty woocommerce folder is viable.

Step 1: Copying the template

1. Find and download the file dashboard.php (do not remove it). Usually found here:
   public_html(or www)/wp-content/plugins/woocommerce/templates/myaccount/dashboard.php
2. Open the file dashboard.php with your file editor. (do not rename it)

Step 2: Create the block

Go to your website dashboard/wp-admin and create a UX Block. In this case we’ll name it “My Account”. When published you’ll see a shortcode above the “Update” button. Keep this shortcode close

Step 3: Editing the template

Open the dashboard.php file with your code or text editor. On line 65 you will replace the “do_action”. It needs to be commented out and a shortcode will need to be added.
You can copy and paste the below to replace this. Don’t forget to change the block id if you’re not using the name from the example in step 2.

//do_action( 'woocommerce_account_dashboard' );
echo do_shortcode( ' block id="my-account"]' );

Step 4: Upload the template

1. If not existing: create a folder ‘woocommerce’ in the child theme. Usually named flatsome-child:
   public_html(or www)/wp-content/themes/flatsome-child/
2. If not existing: create a folder ‘myaccount’ in the woocommerce folder:
   public_html(or www)/wp-content/themes/flatsome-child/woocommerce
3. Upload the dashboard.php to this folder:
   public_html(or www)/wp-content/themes/flatsome-child/woocommerce/myaccount

Your dashboard page will now be using the UX Block you created. Happy Editing!