Some days ago I wrote an article about how to edit the tabs in the page My Account in WooCommerce.

This article instead shows an example of how to use that tutorial in the real world, by adding a Contact Us tab in the page My Account using Contact Form 7.

Add The New Tab

Open your functions.php file in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:

class WC_Custom_My_Account_Tabs extends WC_Query {
/**
* Adds main filters and actions and inits the endpoints.
*/
public function __construct() {
add_action( 'init', array( $this, 'add_endpoints' ) );
if ( ! is_admin() ) {
add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 );
add_filter( 'woocommerce_account_menu_items', array( $this, 'edit_navigation' ) );
add_action( 'woocommerce_account_contact-us_endpoint', array( $this, 'add_custom_tab_content' ) );
}
$this->init_query_vars();
}
/**
* Inits the query vars for WooCommerce
*/
public function init_query_vars() {
$this->query_vars = array(
'contact-us' => 'contact-us',
);
}
/**
* Edits the navigation in the page My Account adding a new Contact Us tab.
*
* @param array $items The existing tab items.
* @return array
*/
public function edit_navigation( $items ) {
if ( ! isset( $items['contact-us'] ) ) {
$last_item = array_splice( $items, -1, 1 );
$contact = array(
'contact-us' => esc_html( 'Contact Us' ),
);
$items = array_merge( $items, $contact, $last_item );
}
return $items;
}
/**
* Prints the contact tab content from a template in theme-name/woocommerce/myaccount/
*/
public function add_custom_tab_content() {
wc_get_template( 'myaccount/contact.php', array(), '', get_stylesheet() . 'woocommerce/' );
}
}
new WC_Custom_My_Account_Tabs();

view raw
functions.php
hosted with ❤ by GitHub

It is similar to the one in my first tutorial, but with some changes, so let’s have a look at them!

The method that changed most is edit_navigation:

/**
 * Edits the navigation in the page My Account adding a new Contact Us tab.
 *
 * @param  array $items The existing tab items.
 * @return array
 */
public function edit_navigation( $items ) {
    if ( ! isset( $items['contact-us'] ) ) {
        $last_item = array_splice( $items, -1, 1 );
        $contact   = array(
            'contact-us' => esc_html( 'Contact Us' ),
        );

        $items = array_merge( $items, $contact, $last_item );
    }

    return $items;
}

This method now checks if the item with index contact-us already exists in the items (you never know if that is already added by another plugin or by the theme. It’s always better to check to prevent future errors).

After that, we remove the last item from the array, the Logout link, since we don’t want the Contact Us to appear after that, then we define the new item, and merge it with the existing items, adding back the Logout at the end.

Create the Content For The New Tab

Once you have your class in the file functions.php you need to define the content for that tab, so download and install Contact Form 7 from Plugins > Add New. In the search field at the top right of the screen write Contact Form 7 and click Enter.

The first result will be the plugin that we are searching, click on Install Now.

Contact Form 7 in the WordPress plugins installation screen.

Contact Form 7 in the WordPress plugins installation screen.

Once the installation is complete, click on the blue button Activate. Now Contact Form 7 is ready to be used.

Go to Contact > Add New to create a new form, and edit it as needed. The default settings for the new form usually are enough for a basic enquiry form. When you are happy with the form, click on Save on the right.

A screenshot of the creation of a new enquiry form with Contact Form 7.

Usually the default settings are enough for an enquiry form with Contact Form 7.

After saving it, the page will refresh and you will see a blue box after the form title. It is the form shortcode, copy it.

The Contact Form 7 form's shortcode.

This is the form shortcode that we will use to show the Enquiry Form on the page My Account.

Our form is ready to be used. Create a new file in wp-content/themes/your-child-theme-name/woocommerce/myaccount named contact.php.

Note: The path woocommerce/myaccount may not exist in your active theme. If it does not exist, create it.

Open the file contact.php that you just created and write this code inside of it:

<h2><?php echo esc_html( 'Contact Us!' ); ?></h2>
<p><?php echo esc_html( 'Do you need any help? Please feel free to contact us from here!' ); ?></p>
<?php echo do_shortcode( 'WRITE HERE YOUR CONTACT FORM 7 SHORTCODE' ); ?>

view raw
contact.php
hosted with ❤ by GitHub

As you probably noticed, on line 4 you can find the do_shortcode function with some dummy content WRITE HERE YOUR CONTACT FORM 7 SHORTCODE. Replace that content with your Contact Form 7 form’s shortcode that you previously copied, in my example it would be [contact-form-7 id="143" title="Enquiry Form"], so the code on line 4 will become similar to:

<?php echo do_shortcode( '[contact-form-7 id="143" title="Enquiry Form"]' ); ?>

Save the file contact.php and go to Settings > Permalinks, click on Save. This will refresh your permalinks and make the new tab work.

Now go to the page My Account in your site and you should see the tab Contact Us in the list, and when you click on it you should be able to see the form and use it!

Here is an example of how it looks on Storefront:

A screeenshot of the Contac Us tab with the new form in Storefront.

This is how the new tab Contact Us and the new Contact Form 7 form look on Storefront.

Add Some Style

We are almost ready, the only thing left to change is the icon used for the Contact Us tab on the page My Account.

As you can see, the default icon is a document, which I think does not really give the idea of a contact form. Let’s change it to a pencil instead, or an envelope.

The icons used in the tabs are from FontAwesome, so you can just pick your favourite icon from their site and use it. Open the Customizer from Appearance > Customize and click on the section Additional CSS.

At the end of the existing content (if any), add this code:

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--contact-us a:before {
    content: "\f040";
}
12 replies
  1. Mike
    Mike says:

    This is exactly what I’m looking for, but it doesn’t seem to work for me. Perhaps there’s an issue with Genesis Connect or something else? I don’t see the new tab in My Account.

    Reply
      • Mike
        Mike says:

        I tried that and it’s still not functioning. Does this code take the custom theme into consideration? You’re stating to add this code into the functions.php file then add a new .php file in the custom woo/myaccount folder.

        Reply
        • Nicola Mustone
          Nicola Mustone says:

          Save the permalinks in Settings > Permalinks.

          Does this code take the custom theme into consideration?

          What do you mean? I didn’t test it on themes that are not Storefront or the official WordPress themes (i.e. TwentySeventeen).

          But if the custom theme properly handles WooCommerce this code will work. If it does not work on a custom theme it’s because the theme is changing something of the default behaviour of the My Account page in WooCommerce.

  2. Nico
    Nico says:

    Hi Nicola

    Great code, works as expected!

    One question how would you go about adding the page title to the above code, so that instead of showing My Account it can say Contact Us?

    Reply
  3. lucas
    lucas says:

    Great work Nicola!

    Is it possible that the fields “You Name” and “Your Email” will be filled with user´s data, I am trying to but I can´t.

    When customer is at “Contact Us” is already logged, because of that I want to auto-fill these fields.

    Thank you very much, and feel proud of your blog, it is very useful.

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hello Lucas,
      I’m indeed proud of my blog, thanks!

      Regarding your question, I’m not sure about it. I’d suggest to contact the support for Contact Form 7 and ask them how to do that.

      Reply
  4. omahr
    omahr says:

    do you know why it’s giving me this error:
    Fatal error: Class ‘WC_Query’ not found in …./wp-content/themes/divi-child/functions.php on line 25

    Thanks

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply