Posted  by  admin

Woocommerce My Account Page

If you have WooCommerce registration enabled on the My Account page, WooCommerce will normally display a login and basic register form under My Account dashboard page. In case you want to add more custom fields to the basic WooCommerce register form you can easily integrate any Profile Builder Register form under My Account page in WooCommerce. Essential Resources. WooCommerce (Free); Elementor (Free); Woo Shortcodes Kit (Free); Custom Blocks and Redirections (Premium addon for Woo Shortcodes Kit); On this video you can learn how to customize the WooCommerce my account page with Elementor, in a WooCommerce enviroment and using Woo Shortcodes Kit to enhance the WooCommerce possibilities and the addon Custom Blocks and Redirection for. Woo Custom My Account Page lets admin control perfectly the WooCommerce My Account page. You will be free to add and manage the most suitable information, sorting them with tabs or menus. Aug 13, 2020 As you can see on the screenshot, the default WooCommerce my account page has only the basic options. But your customers may need more options on their account page. For example, they may want to add other important information like payment methods, links, addresses, etc.

Woocommerce My Account Page

Woocommerce My Account Page Plugin

In this article, we’ll show you how to create a WooCommerce customer login shortcode. There are some technical aspects that are covered, as well as how it can be applied in your site. In addition, we’ll look into error handling, to make sure it doesn’t break your site in case WooCommerce is disabled.

Easy login forms are great to improve your site usability. If you have many login options, you make sure your users won’t be lost in your site. This allows them to quickly place new orders, as well as track old ones.

Page

WooCommerce’s original solution for this is using a login form in the user profile and some other pages. But this still doesn’t have the flexibility aspect that we need. That’s why we are going to create our own login form shortcode.

Thus, this shortcode can be used in any of your pages. Additionally, it can be used in widget areas or even in your template files. Hence, one of the main aspects of our shortcode is to gracefully handle errors. Then we need to check for WooCommerce disabling and error messages.

This guide is an overview of the functionality available to customers who are logged in to your store via the My Account page. My Account is the central customer dashboard in a WooCommerce store. Customers can view past orders, edit addresses, and payment details.

Let’s get started!

Default WooCommerce customer login options

WooCommerce has some out of the box options for user login. Usually the login form is presented whenever you visit a WooCommerce page for registered users.

The first instance is the “My Account” page, which is usually under /my-account. In this page, you can see the login form and the registration form.

The checkout page may contain the login form as well, depending on your setup. The main difference there is the inline opening form. Therefore, once you click “log in”, the form opens up as an accordion. That’s a great solution to save space, but also keep users on the checkout workflow.

If you want the login form by itself, though, WooCommerce has no option for it. Now let’s build our own shortcode to change this.

How to create a WooCommerce login shortcode

The first step in our shortcode, is to register the shortcode the WordPress add_shortcode() function. This is its main structure, along with the main points in our code:

Woocommerce My Account Page
2
4
//TODO: 1. Check if the user is logged in
//TODO: 2. Use WooCommerce login form if present, if not - use WordPress login form
add_shortcode('my_wc_login_form','my_render_wc_login_form');

The name is what you use in your square brackets – in this case the code registers a shortcode that can be used as [my_wc_login_form]. And the function name is what WordPress calls to render the shortcode content.

By this point the code will not do anything. Now let’s start implementing the above-listed steps one by one.

1. Check if the user is logged in

We want to check if users are logged in, and if they are – we’ll display a welcome message. If users aren’t logged in, then we do our magic to display the form.

2
4
//login form code to be placed here
return'Hello there! Welcome back.';

2. Display login form

For the non-logged in users, we can display our login form. But we need to know if the WooCommerce functions that render the form are available. We can do this by using the function_exists() function.

This code renders the login form:

2
4
6
8
10
function_exists( 'woocommerce_output_all_notices' ) ) {
ob_start();
woocommerce_login_form();
}else{
returnwp_login_form(array('echo'=>false));
  • the woocommerce_login_form() function prints the form markup. The woocommerce_output_all_notices() function will print any login errors, such as invalid username/password errors.
  • we use ob_start() and ob_get_clean() since the WooCommerce functions echo the markup, and the shortcode is supposed to return the markup instead of printing it.
  • if the WooCommerce login functions are not present, we render the default WordPress login with the wp_login_form() function

Edit Woocommerce My Account Page

Important: please keep in mind that the WooCommerce functions that we used here might change in the future. Therefore it is always highly recommended to always test your code after updating your WooCommerce plugin.

And this is the final version of our code:

Woocommerce My Account Page

2
4
6
8
10
12
14
16
18
if(!is_user_logged_in()){
function_exists( 'woocommerce_output_all_notices' ) ) {
ob_start();
woocommerce_login_form();
}else{
returnwp_login_form(array('echo'=>false));
}else{
}
add_shortcode('my_wc_login_form','my_render_wc_login_form');

At this point you might be asking yourself – why using the WooCommerce login form functions, instead of directly using the WordPress login form function. There are a few advantages of using the WooCommerce form, such as:

  • consistent input element style – since the form uses the defaul WooCommerce classes for its elements, it will look in the same way as the other WooCommerce login forms on your site
  • better error handling – if the authentication fails, the WooCommerce form will display a message on the same page, while the WordPress form will redirect your users to the default WordPress login page

Now let’s use the login shortcode in your site.

How to use the WooCommerce login shortcode

You can apply this shortcode in almost any place you want. But let’s add it in one of our pages. For example if you have a login page, you can create it this way:

And this is the result:

On the other hand, you can use this shortcode in your sidebars. This is my personal favorite, as it fits quite nicely in the sidebar area. This is how you create it in your widget areas:

And this is the result we have:

Furthermore, you can use your WooCommerce login shortcode in your template files or inside of other shortcodes. For other shortcodes, this depends on your current plugins. Usually sliders, columns, accordions and other elements allow shortcodes in them. For a template edit, you can apply it with this code:

Conclusion

Today we looked into how to create your own WooCommerce login shortcode. You can use his shortcode anywhere you want. This makes it powerful for a solution in a page, widget, slider or even in other shortcodes.

We hope you enjoyed this article and see you again next time!

If you are using WooCommerce then you probably have noticed that the account page looks quite boring. Therefore, today I am going to show you how to customize WooCommerce my account page with Gutenberg editor in a way that it looks more professional, visual and much nicer than the default one.

It will take only 10-15 for you to accomplish all that. To get better understanding what we are going to buyild today, take a look at the fetured imaged above. So, buckle your seatbelt because we are going to start.

How To Customize WooCommerce My Account Page with Gutenberg?

First things first. We need to install one additional plugins on your site. Don’t worry – it’s a really great plugin which makes your Gutenberg editor experience much better.

Step 1: Install and activate “Gutenberg Blocks by Kadence Blocks – Page Builder Features” plugin

Kadence Blocks is a plugin which adds twelve custom blocks to your site. It helps you to create custom layouts in a way you are used to when using page builders (for example, Elementor). You can add rows, columns, nested columns, accordions, info boxes, testiominals etc.

The main reason we are using this plugin for customizing the WooCommerce my account page is that it gives us an opportunity to add columns and info boxes. Also, it gives us visibility option we are going to talk about later.

To install the plugin go to Plugins >> Add new >> Search for Kadence Blocks >> Install >> Activate

Also, this plugin can be found here.

Step 2: Open My Account page for customization and add Row Layout Block

After adding Row layout block choos four-column layout.

Step 3: Add Info Box block into the first column

Now style the column as you wish by giving it a title (for example ORDERS). Customize the background, typography, icon etc. by using block setting on the right of the page.

Step 4: Open Woocommerce >> Settings >> Advanced and copy the needed account endpoint

For example, if you are creating Orders info box then you need to copy the orders endpoint and add it to the info box link section as /my-account/orders/

If you create another info box and name it “Edit account” then you copy the edit-account endpoint and link your info box as /my-account/edit-account/ (see the screenshot below).

The default endpoints in Woocommerce are:

Page
  • Orders (endpoint orders)
  • View order (endpoint view-order)
  • Downloads (endpoint downloads)
  • Edit account (endpoint edit-account)
  • Addresses (endpoint edit-address)
  • Payment methods (endpoint payment-methods)
  • Lost password (endpoint lost-password)
  • Logout (endpoint customer-logout)

Step 5: Duplicate your finished Info box and move it to other columns. Customize.

Now when you finished your first dashboard box you can duplicate id three times and move one box into every empty columns.

After that just replace the icon, title and link.

Mcafee

Step 6: Add a banner to your Woocommerce My account page and customize it

You can use a Kadence Blocks Row layout block again but this time after adding it to your page choose a suitable header by pressing on Prebuilt library button (see the screenshot below). This allows you to choose between some nice pre-built headers and therefore you don’t have to waste your time for building those.

Step 7: Remove page title and padding (if needed)

If your theme allows you to remove page title and vertical padding then choose these settings. For example, Kadence theme allows you to disable these on the page settings like shown on the screenshot below.

Now, you may ask “But why do I have to remove page title and vertical padding?”. The answer is: you need to do it only if you are adding a custom image shown on the step 6. If you are not doing this then skip to the step 8.

Step 8: Make your Woocommerce My account page to be without sidebar

If you account page has a sidebar then it would be wise to remove it. Otherwise, it will not look good. Usually your theme has an option to set your page to be with or without sidebars.

Step 9: Deactivate dashboard for logged-out users

So far you have added four dashboard boxes and linked them to the correct endpoints. The problem is though, that those boxes are also visible for logged-out users. Therefore, we have to hide them and sho only to logged-in users.

In order to do that select your row that contains these four columns, choose Visibility settings and activate Gide from “Logged out users” selection (see the screenshot below).

Step 10: Remove old Woocommerce my account dashboard navigation

So, you have created a new dashboard but the old navigation links are still there? Well, in order to customize your Woocommerce my account dashboard there is one more thing you need to do. And that means removing this navigation.

Therefore, go to Appearance >> Customizer >> Additional CSS and add this bit of a CSS code.

This bit of a code will remove the old navigation links and set the content to be shown in 100% width.

Video: How To Customize WooCommerce My Account Page with Gutenberg?

If all this I described above seems a bit confusing for you then take a look at the 10-minut video below. This shows in detail how to accomplish all that I described above.

Useful tips

How to Add Free Shipping Notifications (with amount left) to Woocommerce Product and Cart PagesKadence theme tips: How to add Custom Author Info Box?
How to Add Woocommerce Product Enquiry form For Free?