Custom link in the Customer Dashboard menu (Ticket 1526307)

Adding a custom link to the SureCart Customer Dashboard menu

Demo built for support ticket #1526307. This site runs SureCart 4.6.6, the same version you are on.

1. The short answer

SureCart has no built in setting for this. The Template Options panel you found lets you switch the six built in items (Orders, Invoices, Plans, Downloads, WordPress Account, Billing Details) on and off, and that is all it does. There is no “add item” control, and there is no PHP filter for it either: the menu is a hard coded array inside the plugin.

Our own documentation says the same thing. On Overview of the Customer Dashboard, under the FAQ: “Can I edit the menus like Dashboard, Orders, Plans, Back home, and others?” the answer is “Not at the moment. Currently, we only allow you to edit the content on the Dashboard page, not the links in the menu.”

So the only way to get a Discord entry into that menu today is a small snippet. The one below is written for exactly that, and it is running live on this page’s site right now.

2. See it working

Open the customer dashboard on this demo site and look at the left menu. There is now a Discord item sitting under Downloads, styled exactly like the built in ones.

Things worth checking while you are in there:

  • The Discord item stays put when you click Orders, Invoices, Plans, Downloads or Account. It is not just on the first screen.
  • Clicking it opens Discord in a new tab and leaves the dashboard where it was.
  • Shrink the browser to phone width. The item is in the hamburger menu too, in the same group as the other links, above the Account / Billing divider.
  • It does not appear anywhere else on the site. Only on the dashboard.

3. The snippet

Add this with WPCode, Code Snippets, or your child theme’s functions.php. Change the three lines at the top and nothing else.

<?php
/**
 * Add custom link(s) to the SureCart Customer Dashboard navigation menu.
 * Tested on SureCart 4.6.6.
 */
add_action( 'wp_footer', function () {

	/* ------------------------------------------------------------------
	 * EDIT THIS LIST. Add as many links as you like.
	 * 'icon' is any Feather icon name: message-circle, hash, headphones,
	 * users, help-circle, external-link, globe, book-open, life-buoy ...
	 * ------------------------------------------------------------------ */
	$links = array(
		array(
			'label'    => 'Discord',
			'url'      => 'https://discord.com/invite/your-invite-code',
			'icon'     => 'message-circle',
			'new_tab'  => true,
		),
	);
	/* ---------------------- nothing to edit below --------------------- */

	// Only run on the SureCart Customer Dashboard page.
	$template = get_post_meta( get_the_ID(), '_wp_page_template', true );
	if ( ! is_user_logged_in() || false === strpos( (string) $template, 'template-surecart-dashboard' ) ) {
		return;
	}
	?>
	<script id="sc-dashboard-custom-nav">
	( function () {
		var LINKS = <?php echo wp_json_encode( array_values( $links ) ); ?>;
		var FLAG  = 'data-sc-custom-nav';

		function makeIcon( name ) {
			var i = document.createElement( 'sc-icon' );
			i.setAttribute( 'name', name || 'external-link' );
			i.setAttribute( 'slot', 'prefix' );
			i.setAttribute( 'aria-hidden', 'true' );
			i.style.opacity  = '0.65';
			i.style.fontSize = '18px';
			return i;
		}

		// Desktop: the left sidebar list of <sc-tab> items.
		function addDesktop( link, index ) {
			var nav = document.querySelector( '.sc-dashboard__header sc-spacing' );
			if ( ! nav || nav.querySelector( '[' + FLAG + '="' + index + '"]' ) ) { return; }

			var tab = document.createElement( 'sc-tab' );
			tab.setAttribute( FLAG, index );
			tab.setAttribute( 'href', link.url );
			tab.setAttribute( 'aria-label', link.label );
			tab.appendChild( makeIcon( link.icon ) );
			tab.appendChild( document.createTextNode( link.label ) );

			// sc-tab has no target attribute, so open a new tab ourselves.
			if ( link.new_tab ) {
				tab.addEventListener( 'click', function ( e ) {
					e.preventDefault();
					window.open( link.url, '_blank', 'noopener,noreferrer' );
				} );
			}
			nav.appendChild( tab );
		}

		// Mobile: the hamburger dropdown list of <sc-menu-item> items.
		function addMobile( link, index ) {
			var menu = document.querySelector( '.sc-dashboard__mobile-menu sc-menu' );
			if ( ! menu || menu.querySelector( '[' + FLAG + '="' + index + '"]' ) ) { return; }

			var item = document.createElement( 'sc-menu-item' );
			item.setAttribute( FLAG, index );
			item.setAttribute( 'href', link.url );
			item.setAttribute( 'role', 'option' );
			if ( link.new_tab ) { item.setAttribute( 'target', '_blank' ); }
			item.appendChild( makeIcon( link.icon ) );
			item.appendChild( document.createTextNode( link.label ) );

			var divider = menu.querySelector( 'sc-menu-divider' );
			if ( divider ) { menu.insertBefore( item, divider ); } else { menu.appendChild( item ); }
		}

		function run() {
			LINKS.forEach( function ( link, index ) {
				if ( ! link || ! link.url ) { return; }
				addDesktop( link, index );
				addMobile( link, index );
			} );
		}

		if ( document.readyState === 'loading' ) {
			document.addEventListener( 'DOMContentLoaded', run );
		} else {
			run();
		}
	} )();
	</script>
	<?php
}, 100 );

Install steps

  1. Install a snippet plugin such as WPCode (Plugins > Add New > search “WPCode”).
  2. Go to Code Snippets > Add Snippet > Add Your Custom Code.
  3. Set the code type to PHP Snippet and paste the block above.
  4. Replace https://discord.com/invite/your-invite-code with your real Discord invite link, and change the label if you want something other than “Discord”.
  5. Set Insertion to Auto Insert / Run Everywhere, then Save and Activate.
  6. Open your customer dashboard and hard refresh.

Adding more than one link

Copy the inner array( ... ) block and paste it again inside $links. Each entry becomes its own menu item, in the order you list them.

Icons

SureCart’s dashboard uses the Feather icon set, so icon accepts any Feather name. Ones that suit a community link: message-circle, message-square, hash, headphones, users, life-buoy, help-circle, globe, external-link.

4. Honest limitations

  • This is a customisation, not a supported feature. If SureCart ever rebuilds the dashboard menu markup, the snippet may need adjusting. It fails quietly if that happens: you get the normal menu back, no errors, nothing broken.
  • It only runs on pages using the SureCart Customer Dashboard page template, and only for logged in users.
  • Making the Customer Dashboard fully customisable is on the roadmap, but there is no date for it yet.

If you would rather not use a snippet

Two code free options exist, though neither puts the link in the menu itself:

  • Put it in the dashboard content. Go to SureCart > Customer Area and add a Buttons block or a paragraph with your Discord link. Be aware it only shows on the dashboard landing screen. It disappears as soon as the customer clicks Orders, Plans, Downloads and so on, because those views replace the page content entirely.
  • Reuse the “Back Home” button. The link at the bottom of the sidebar can be repointed with the sc_customer_dashboard_back_home_url and sc_customer_dashboard_back_home_text filters. That is still a snippet, just a one liner, and you lose the Back Home link in exchange.
Scroll to Top