my account Archives - Silva Web Designs

How to Add New Menu Items in the My Account Page in WooCommerce

Posted on 7th October 20207th October 2020

If you are looking for a simple way to add new menu items within your My Account page in WooCommerce, here we will explain the straight forward way of adding this. In this method, we will be using two WooCommerce hooks that will take care of adding the menu item and then adding the redirect for the new page added with the respective URL.

In the example below, you will see we have added a few extra options and renamed a few of the links as well. We added a way to get back to the homepage, an additional link to add more courses and we renamed the logout button as shown below:

How to Remove Tabs from My Account Menu

Let’s go over everything, we’ll start with removing certain items that you don’t want to appear within the default WooCommerce links. So, let’s say we don’t use the Downloads option within your store, to remove this, we just need to unset the $menu_links and add the below code to our functions.php file:


add_filter ( 'woocommerce_account_menu_items', 'silva_remove_my_account_links' );
function silva_remove_my_account_links( $menu_links ){
 
    unset( $menu_links['downloads'] ); // Disable Downloads

    // If you want to remove any of the other default links, just uncomment out the items below:

    //unset( $menu_links['edit-address'] ); // Addresses
	//unset( $menu_links['dashboard'] ); // Remove Dashboard
	//unset( $menu_links['payment-methods'] ); // Remove Payment Methods
	//unset( $menu_links['orders'] ); // Remove Orders

	//unset( $menu_links['edit-account'] ); // Remove Account details tab
	//unset( $menu_links['customer-logout'] ); // Remove Logout link
 
	return $menu_links;
 
}

But that’s not all, even though the menu link is removed, it is still accessible by going to the direct URL.

To achieve this, you can find all the default My Account subpages in WooCommerce > Settings > Account. All you need to do is just set a specific endpoint as an empty one.

How to Rename Tabs in My Account

This can be done with woocommerce_account_menu_items as well. All you need to know is the ID of the tab you would like to rename (we mentioned these above).

So let’s change the name of ‘Dashboard’ to Portal for example, we would add the following code in our functions.php file:


add_filter ( 'woocommerce_account_menu_items', 'silva_rename_downloads' );
 
function silva_rename_downloads( $menu_links ){
 
	// $menu_links['TAB ID HERE'] = 'NEW TAB NAME HERE';
	$menu_links['dashboard'] = 'Portal';
 
	return $menu_links;
}

How to Add My Account Menu Links with Custom URLs

Okay, so the part you’ve been waiting for right? There isn’t a filter as such but in the first part of the code, we will add a new element to the menu items array.

In the second part of the code, we’ll just hook its URL.


add_filter ( 'woocommerce_account_menu_items', 'silva_one_more_link' );
function silva_one_more_link( $menu_links ){
 
	// We will hook "sometext" later
	$new = array( 'sometext' => 'My New Item' );
 
	// Or in case you need 2 links
	// $new = array( 'link1' => 'Link 1', 'link2' => 'Link 2' );
 
	// array_slice() is good when you want to add an element between the other ones
	$menu_links = array_slice( $menu_links, 0, 1, true ) 
	+ $new 
	+ array_slice( $menu_links, 1, NULL, true );
 
	return $menu_links;
}
 
add_filter( 'woocommerce_get_endpoint_url', 'silva_hook_endpoint', 10, 4 );
function silva_hook_endpoint( $url, $endpoint, $value, $permalink ){
	if( $endpoint === 'sometext' ) {
		// Here is the place for your custom URL, it could be external
		$url = site_url();
	}
	return $url;
}

How to Add Custom My Account Menu Tabs with their Own Pages

This part consists of three parts, and this is how you add menu items with custom pages:


/*
 * Part 1. Add Link (Tab) to My Account menu
 */
add_filter ( 'woocommerce_account_menu_items', 'silva_log_history_link', 40 );
function silva_log_history_link( $menu_links ){
 
	$menu_links = array_slice( $menu_links, 0, 5, true ) 
	+ array( 'log-history' => 'Log history' )
	+ array_slice( $menu_links, 5, NULL, true );
 
	return $menu_links;
 
}
/*
 * Part 2. Register Permalink Endpoint
 */
add_action( 'init', 'silva_add_endpoint' );
function silva_add_endpoint() {
 
	// WP_Rewrite is my Achilles' heel, so please do not ask me for detailed explanation
	add_rewrite_endpoint( 'log-history', EP_PAGES );
 
}
/*
 * Part 3. Content for the new page in My Account, woocommerce_account_{ENDPOINT NAME}_endpoint
 */
add_action( 'woocommerce_account_log-history_endpoint', 'silva_my_account_endpoint_content' );
function silva_my_account_endpoint_content() {
 
	// Of course, you can print dynamic content here, one of the most useful functions here is get_current_user_id()
	echo 'Last time you logged in: yesterday from Safari.';
 
}

Note: Once you make this change, you will need to go to Settings > Permalinks and just click the Save Changes button.

And that’s all there is to it really! If you have found this useful, let us know! If you are struggling, drop a comment below and we’d love to assist you!

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

How to Separate Login and Registration Pages with WooCommerce

Posted on 16th September 20205th October 2020

With WooCommerce, there are times when you would like to send logged out customers directly to a ‘Login Page’ and unregisters customs to its own ‘Register’ page.

If you’re here, you’re probably already aware that the shortcode [woocommerce_my_account] has both login and registrations combined. But this may not be the way you want this to work. Let’s say for example that we want to create a popup that shows just the registration form for a specific page. Using just the shortcode alone, we are not able to do this as it will also contain the login form. Today, we are going to show you two solutions to overcome this problem, one for just the login form then a separate one for just the registration form.

Before you start…

As you may already know, the [woocommerce_my_account] shortcode is a very important one and must be kept on the WooCommerce My Account page at all costs.

What this means is that if you want to keep the login form and the ‘My Account’ dashboard while logged in on the same page, you can just keep using [woocommerce_my_account] for that, together with example one.

If you want to have ‘Login’ + ‘My Account’, with a separate ‘Registration’ page, then you will need to use both the shortcodes shown below:

[wc_reg_form_silva] on the Register Page
[woocommerce_my_account] on the Login / My Account Page

If you want to have a separate Login, Registration and My Account pages then you need the following three shortcodes:

[wc_reg_form_silva] on the Register Page
[wc_login_form_silva] on the Login Page
[woocommerce_my_account] on the My Account Page

In both cases, you need to disable “Allow customers to create an account on the ‘My Account’ page” as shown below:

Step 1. Separate WooCommerce Customer Registration (Shortcode)

Place this shortcode [wc_reg_form_silva] in a brand new ‘Register’ WordPress page and the register form will appear.


/**
 * @snippet       WooCommerce User Registration Shortcode
 */
   
add_shortcode( 'wc_reg_form_silva', 'silva_separate_registration_form' );
    
function silva_separate_registration_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return;
   ob_start();
 
   // NOTE: The following <FORM></FORM> is taken from: woocommerce\templates\myaccount\form-login.php
   // When you update the WooCommerce plugin, you may need to adjust the below accordingly
 
   do_action( 'woocommerce_before_customer_login_form' );
 
   ?>
      <form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >
 
         <?php do_action( 'woocommerce_register_form_start' ); ?>
 
         <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
 
            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
               <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
               <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
            </p>
 
         <?php endif; ?>
 
         <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="reg_email"><?php esc_html_e( 'Email address', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
         </p>
 
         <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
 
            <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
               <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
               <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" />
            </p>
 
         <?php else : ?>
 
            <p><?php esc_html_e( 'A password will be sent to your email address.', 'woocommerce' ); ?></p>
 
         <?php endif; ?>
 
         <?php do_action( 'woocommerce_register_form' ); ?>
 
         <p class="woocommerce-FormRow form-row">
            <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
            <button type="submit" class="woocommerce-Button woocommerce-button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
         </p>
 
         <?php do_action( 'woocommerce_register_form_end' ); ?>
 
      </form>
 
   <?php
     
   return ob_get_clean();
}

Step 2. Separate WooCommerce Login (Shortcode)

Before implementing this, please check the information above as it might be you don't need this shortcode. [woocommerce_my_account] may be sufficient to show the login form.

Otherwise, please add this shortcode [wc_login_form_silva] to a brand new Login page.


/**
 * @snippet       WooCommerce User Login Shortcode
 */
  
add_shortcode( 'wc_login_form_silva', 'silva_separate_login_form' );
  
function silva_separate_login_form() {
   if ( is_admin() ) return;
   if ( is_user_logged_in() ) return; 
   ob_start();
   woocommerce_login_form( array( 'redirect' => '#' ) );
   return ob_get_clean();
}

Furthermore, if instead, you want to add the shortcode within your page template, you would add this using .

Other than that, this should be everything you need to separate the WooCommere Login and Registration pages. We hope this has helped, should you require any assistance, feel free to drop us an email or leave a comment below.

Posted by: Nathan da Silva