Custom WooCommerce Account Dashboard in Bricks

In the Bricks Facebook group a user asks:

I’m just wondering how you could create a dashboard like this in Bricks?! Unfortunately, the “Account Page” element is very limited.

Am I missing something? After all, Bricks shows exactly this on the website – see link

This tutorial provides the steps for building a custom My Account dashboard using the WooCommerce account builder in Bricks.

Demo (no audio):

This is a fairly long tutorial that goes in-depth.

If you are a visual learner, you may want to wait for upcoming video by Paul C to see his take on this.

For reference, the My account page looks like this by default:

Step 1

For showing WooCommerce notices at the top of right column, we need to first go to Bricks → Settings → WooCommerce and toggle Enable Bricks WooCommerce “Notice” element.

Step 2 – My account Page

Go to the Pages list and edit My account with Bricks.

This is the Page in which we build the overall structure of a fixed left column and scrollable right content column. In other words, this is our dashboard page.

When you are done, it should look like this:

If you’d like to import this Page so you can have a head start for further tweaking rather than building it from scratch, here’s a Zippy export. You’d still need to do the “Removing WooCommerce MyAccount Navigation” part detailed further below.

Manual instructions follow.

Click the Settings (gear) icon → GENERAL.

Disable header and footer.

Click the Layout icon and select 33 | 67 layout.

This adds a Container with 2 Columns.

Align cross axis: Stretch.

Width: 100%
Height: 100vh

Right click on the Container and wrap it in a Section.

You probably have padding values for all sections set via a global theme style. Unset it for this Section by setting padding on all sides to 0.

Left column

Select the 1st Column.

Padding on all sides: 3em

Max. width: 400

Color: #f5f5f5

Background color: #26272a

Add a Logo element and select/upload your desired logo image.

Margin at the bottom: 2em

Next, we shall add a series of Text Link elements, one for each account nav item.

Add a Text Link element.

Text: Dashboard

Link to: Internal → My account (Page)

Click Icon and upload a svg icon like this one (Select 18dp size and White color for this and all subsequent icons). If you are unable to upload SVGs in the Bricks editor, enable it for Administrators in Bricks’ General settings.

Add a class of say, wc-nav-link.

With this class selected, set icon Gap to 10.

Padding on top and bottom: 0.8em
Padding on left and right: 0.75em

Width: 100%

Color: #f5f5f5

Border radius: 4 on all sides

Activate the hover state and set color to #fff.

Deactivate the hover state.

Duplicate the Text Link and change it to Orders.

You could set this to be either a static value of /my-account/orders/ or dynamic.

Link: Dynamic Data

{echo:wc_get_account_endpoint_url(orders)}

Icon.

Duplicate this as Downloads (if you have any downloadable products).

If static link: /my-account/downloads/

If dynamic:

{echo:wc_get_account_endpoint_url(downloads)}

Icon.

Duplicate this as Addresses.

If static link: /my-account/edit-address/

If dynamic:

{echo:wc_get_account_endpoint_url(edit-address)}

Icon.

Duplicate this as Account Details.

If static link: /my-account/edit-account/

If dynamic:

{echo:wc_get_account_endpoint_url(edit-account)}

Icon.

Duplicate this as Support.

Link to: External → /support (or a link that’s applicable to your site).

Icon.

To push this near the bottom, select the ID and set its top margin to auto.

Duplicate this as Back to Shop.

Link to: Internal → Shop (Page).

Icon.

Remove auto top margin for this text link.

Next, let’s add the user profile part.

Add a Block.

Direction: Horizontal (row)

Column gap: 1em
Row gap: 1em

Margin at the top: 1em

Padding at the top: 2em
Padding at the bottom: 1em

1px solid #5e5e68 border at the bottom.

Add an Image element inside the Block.

Select its source to be

{wp_user_picture}

Size: WooCommerce Gallery Thumbnail (100 x 100)

Width: 50

Border radius on all sides: 50%

Add a Div below the Image.

Add a h6 Heading having:

{wp_user_display_name}

Add a Basic Text element having:

{wp_user_email}

HTML tag: p

Add another Div as a sibling to the previous Div.

HTML tag: a [link]

Link: Dynamic Data

{echo:wp_logout_url}

Set margin at the left to auto.

Add a SVG element inside.

Download this icon (18dp size and White like all other icons in this tutorial). Edit it with a text/code editor to add

<title>Log out</title>

like this:

<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><title>Log out</title><path d="M0 0h24v24H0z" fill="none"/><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>

This adds a tooltip for the icon.

Upload the icon.

Applying global link color

You may already have a specific color for links set in a global theme style.

To ensure that it applies to all links within our custom dashboard, add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

add_filter( 'bricks/link_css_selectors', function( $link_css_selectors ) {
    // Add CSS link styles to .brxe-woocommerce-account-page a
    $link_css_selectors[] = '.brxe-woocommerce-account-page a';
    
    return $link_css_selectors; // Array of selectors link styles are applied to
} );

Custom CSS

Let’s add a bit of CSS to make the current/active custom link stand out by setting it a background color and to set bottom margins for h2 and h3 headings on this page.

Click the Settings (gear) icon → CUSTOM CODE.

Add:

[aria-current="page"] {
	background-color: #3F3F48;
}

.brxe-woocommerce-account-page h2 {
	margin-bottom: 0.6em;
}

.brxe-woocommerce-account-page h3 {
	margin-bottom: 0.4em;
}

Right column

For the Column element, set a Padding of 4em on all sides, Max. width (if you want to) of 966, and Overflow to auto.

Add a Notice element.

Add a Account – Page element.

Every WooCommerce Account endpoint like Addresses, Downloads, and Orders is rendered inside this “Account – Page” element using the corresponding Bricks template (if present).

Reference:

Template type	Endpoint	Element
WooCommerce – Account – Dashboard	/	–
WooCommerce – Account – Orders	orders/	Account – Orders
WooCommerce – Account – View order	orders/view-order/{order_id}/	Account – View order
WooCommerce – Account – Downloads	downloads/	Account – Downloads
WooCommerce – Account – Addresses	edit-address/	Account – Addresses
WooCommerce – Account – Edit address	edit-address/billing/ edit-address/shipping/	Account – Edit address
WooCommerce – Account – Edit account	edit-account/	Account – Edit account

Removing WooCommerce MyAccount Navigation

By default a light gray background navigation with default WooCommerce account links appears when this element is added.

Since we are building the nav links individually for full control, let’s get rid of this unwanted default navigation.

Install and activate the Bricks child theme if you don’t already. It is safe to do at any stage of the site.

Copy

/wp-content/plugins/woocommerce/templates/myaccount/navigation.php

to

/wp-content/themes/bricks-child/woocommerce/myaccount/navigation.php

and edit the above file to delete:

<nav class="woocommerce-MyAccount-navigation">
	<ul>
		<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
			<li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
				<a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
			</li>
		<?php endforeach; ?>
	</ul>
</nav>

Step 3 – WooCommerce Account Orders template

By default, the orders table will appear at /my-account/orders/.

If you’d like to add any elements above or below, implement this step.

Go to Bricks → Templates.

Either import this template or add a new one of the type “WooCommerce – Account – Orders” with the same or a similar name.

If you have imported the template, ensure that its type is set correctly. Edit it with Bricks and disable header and footer. Right click on the “WooCommerce Account Orders” element and save it as a global element. This is needed for the next step (if you’d like to add the Orders table in the dashboard).

If you want to set this up manually:

Edit the template with Bricks.

Disable header and footer in PAGE SETTINGS.

Add a h1 Heading that reads say, “Your Orders”.

Margin at the bottom: 1.5em

Add a WooCommerce Account Orders element. Right click on it in the structure panel and save it as a global element. This is needed for the next step (if you’d like to add the Orders table in the dashboard).

Step 4 – WooCommerce Account Dashboard template

Out of the box, the dashboard shows:

If you’d like to edit that by adding say, a heading above and the Orders table below, implement this step.

Go to Bricks → Templates.

Add a new one of type “WooCommerce – Account – Dashboard” with the same or a similar name.

Edit it with Bricks.

Disable header and footer.

Add a h1 Heading with this text:

Welcome, {wp_user_display_name}!

Margin at the bottom: 1.5em

Add a Basic Text element with a HTML tag of p having:

Add another Basic Text element with a HTML tag of p having:

If you’d like the exact code that WooCommerce uses for the output, instead of the above two text elements add a Code element having:

<p>
	<?php
  $allowed_html = array(
    'a' => array(
      'href' => array(),
    ),
  );
  
  $current_user = get_user_by( 'id', get_current_user_id() );
    
	printf(
		/* translators: 1: user display name 2: logout url */
		wp_kses( __( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)', 'woocommerce' ), $allowed_html ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url() )
	);
	?>
</p>

<p>
	<?php
	/* translators: 1: Orders URL 2: Address URL 3: Account URL. */
	$dashboard_desc = __( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
	if ( wc_shipping_enabled() ) {
		/* translators: 1: Orders URL 2: Addresses URL 3: Account URL. */
		$dashboard_desc = __( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
	}
	printf(
		wp_kses( $dashboard_desc, $allowed_html ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-address' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
	?>
</p>

<?php
/**
	 * My Account dashboard.
	 *
	 * @since 2.6.0
	 */
do_action( 'woocommerce_account_dashboard' );
?>

If you’d like to add the Orders table:

Add a h3 “Orders” heading.

Add the “WooCommerce Account Orders” global element.

Template json export.

Step 5 – WooCommerce Account Downloads template

You don’t need to do this step if you aren’t using the WooCommerce downloads feature.

Go to Bricks → Templates.

Add a new one of type “WooCommerce – Account – Downloads” with the same or a similar name.

Edit it with Bricks.

Disable header and footer.

Add a h1 “Your Downloads” Heading.

Margin at the bottom: 1.5em

Add a “Account – Downloads” element.

Template json export.

Step 6 – WooCommerce Account Addresses template

Set this similar to the above step but with the template type being “WooCommerce – Account – Addresses”.

You could add a “Your Addresses” h1 heading and a “Account – Addresses” element.

Template json export.

Step 7 – WooCommerce Account Details template

Set this similar to the above step but with the template type being “WooCommerce – Account – Edit account”.

You could add a “Account Details” h1 heading and a “Account – Edit account” element.

Template json export.

Note: If you are comfortable with hooks and want to make simple changes like adding a heading above the default output, you could alternatively simply do without creating a Bricks template:

add_action( 'woocommerce_edit_account_form_start', function () {
	echo '<h1>Account Details</h1>';
});

See WooCommerce account page hook reference.

References

https://www.businessbloomer.com/woocommerce-get-cart-checkout-account-urls/

https://www.elegantthemes.com/blog/wordpress/woocommerce-endpoints#account-endpoints

https://forum.bricksbuilder.io/t/svg-links-link-element/803/5?u=sridhar

https://stackoverflow.com/a/10643523/778809

https://developer.wordpress.org/reference/functions/wp_logout_url/

https://academy.bricksbuilder.io/article/filter-bricks-link_css_selectors/