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:

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:

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.

      • 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.

        • 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?

  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.

    • 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.

  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



Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.