Nicola Mustone

Some days ago, I wrote an article about how to edit the tabs on 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 on the page My Account using Contact Form 7.

Add The New Tab

Before you make any code changes, have a backup of your site. This will help you restore things in case of unforeseen errors. I recommend using Jetpack Backup for real-time backups and one-click restores.

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 the 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 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, and 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 for; click on Install Now.

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 new form’s default settings are usually enough for a basic inquiry form. When you are happy with the form, click on Save on the right.

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.

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 on your site, and you should see the tab Contact Us in the list, 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:

Add Some Style

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

As you can see, the default icon is a document, which I think does not 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";
}