woocommerce defaults to my account:
The interface generated by such a theme is relatively beautiful.
But there are some themes, like Astra or The7. Such a theme will have a very poor effect on such a user center.
In addition, sometimes, we need to add customized links to a page like My Account. At this time, we need to use some plug-ins to optimize the interface because the code of this interface is more troublesome to modify, so it is normal. In most cases, we will use plug-ins and then complete visual customization. Here, we have prepared a plugin to make customized modifications to our page directly.
Yith Woocommerce Customize My account-Page plugin installation:
Now we enter our independent station backend, then find plugins and click add new, then upload our plug-in, find the current highest version, and click to open. After installing the plug-in, we will activate it directly after the installation is successful. After activation, we need Let’s fill in its key. We don’t need to worry about it here because we are a GPL version, so we can use it even if it is not activated. We just click below to return to the dashboard.
After the installation is successful, we click on the settings of the plug-in, and there is an additional button like this in the WordPress function button on the left. A company like YITH developed it, so we click directly to enter the settings, and then we go first Take a look at our version number. Now we see that it is automatically activated, so you don’t have to worry about it, and you can also upgrade this plug-in online.
Yith-Woocommerce-Customize-My account-Page plugin dashboard:
The second is its system, which is mainly used to monitor our current PHP version, including the current plug-in version. Then, we see that the first one only has one content setting. When you put this plug-in After activation, you can refresh the interface of a member center such as my account. It has been customized, but because there may be some matching problems with the current theme, sometimes the display effect is not very beautiful. , we need to modify its style later. Of course, different themes have different setting methods. We directly enter the background and see that the functions here are very simple.
The first one is a page like this in our Kawen. It will generate some menus, such as our dashboard. Users can see my orders and my downloads. If you are making some virtual sites, Then it can see my downloaded content, edit its address, and then set its payment method. If you click the function button on the left, the panel on the right will change accordingly, but we don’t have it now. For orders, now we see the content in the background and all the default information that can be displayed on the cover page. It mainly includes our dashboard, orders, address modification, etc.
My Account Page module settings:
Of course, if there are some of these contents that you don’t want to display, such as attachments that I have not downloaded, you can close them. After closing them, save them. Now, you can return to the front desk to refresh them. Then, the downloaded ones will be displayed. The module has disappeared. Of course, you can delete each module or drag and move its position. These are all possible.
In addition, you can click this arrow to enter the modification interface. You can modify the text displayed on the account page, and of course, you can also add icons to it. For example, we can add an icon here, and then this interface generally works by default for all users.
The next step is to add a banner. The banner is the effect we see now. For example, if we enter the dashboard, each module like this is called a banner. We will add the banner here later because it needs to be created in the second step.
The next one is its location, which is where it is displayed by default. You can also add some classes to it. Okay, just save it after adding it. These are some modification methods for the function buttons in the account interface.
My Account Page add button:
Of course, you can also add another button above. For example, if we click on the first one, you can write your text alias in it, and then you can add a link to it, but by default, these include We have all the default function buttons. If there are other buttons, you may have installed some plug-ins.
The second is to add some customized links. For example, we will add a home here so that users can return to our home page or consumption page and then add a link. We will use the home page for the links here. Link, and then whether the next one displays a small icon, we let it display a small icon by default here. In addition, you can see who this link is for and then add some class styles or open it in a new window. After adding Click Add later, we save it, but we see now that it’s at the very bottom of ours.
After modification, save it. Now go back to our account, refresh the page, and there will be a link to the home page at the bottom. The home page still does not display the normal name so that we will modify the name again. However, we see that we need to fill in the link URL here, so we filled in these two backward. The link should be added to the top, and the home should be added to the bottom. Then save it. Now refresh it, and it will display normally. Just click on it. It will return to your homepage with some custom buttons.
The last one is to add a group. The so-called main means adding a submenu and a name. You can separate the modules in it. We will not demonstrate it to you here.
My Account Page button sorting:
Then, we look at the second greeting banner. Some content will be added to it by default. Of course, these contents are similar to the modification methods of the function buttons above.
You can also add links to it and add some modules. Here, you can also see some other modules that you can choose from. For example, we can add an editing address or a payment method. Wait, of course, we can also add a new one above.
Then, give the same name to whether to display the small icon and then its width. The following is whether its color displays the quantity. If it has the quantity, you can display it. If not, you don’t need to worry about it. So, how do we add this banner to the present?
My Account Page home page display module:
Let’s go back to the button. For example, we are now in the home, but now that it is opened, it jumps to another link. Now, we select my orders and add them here because there may be no orders in many cases. We also want him to see some modules, so we find my orders and add our banner to the content.
Here you can check. For example, we add a download, then add user information, an address, and a payment method to it, add it directly, and save it. After saving, we Save it again, and then we refresh our orders.
You can see that there are some more modules here. Of course, you can also add some icons to these modules. You can find the content you added and add icons in the banner. The first one is the function. button, the second one is to add some banners to our function buttons.
Plugin Settings:
Then, we look at the third setting, which is very simple. First of all, when we switch these buttons, we find that it refreshes our page. We can add Ajax effects to it here. Then, we can set a dashboard or something else for the default button, and it will be displayed. When the user enters the My Account page, the button you set as the default is displayed first.
The next one is the avatar for our users. We see that after adding it, there will be a photo album function on the left. After clicking, the user can upload his own avatar, so here, we can set a default avatar, which we see now as the default effect. Of course, the small icon is not displayed. Of course, you can also upload your own logo.
My Account Page style layout:
The other is the size of our avatar, whether it has rounded corners, and whether it allows users to customize it. The default is fine. Now, users can upload an avatar themselves. Okay, so this is the first setup. Let’s take a look at it.
Second, its style is our current button. Its default style is a sidebar on the left, but we can also put the sidebar on the right or on top. Here are some styles. A small bid is also loaded by default for its font size, background color, etc. Then we save it and then refresh our My Account page.
Now we see that it is aligned to the right, but it does not display normally in our current template. So, for such a situation, we need to modify its CSS style. Then, try it yourself with your theme. If you feel that the effect of the My Account page is not what you want, you can use this plug-in to try it. For a moment, if an effect like Woodmart’s is already very beautiful, we don’t need to modify it now.
My Account Page security verification:
The last one is security verification; when the user submits content, such as uploading an avatar, we can add a robot-like verification. Here, we need to apply for a Google key. There is also a document here, that is, Google’s document, explaining how to apply for a verification code. Generally, we just don’t add it by default because the user has already logged in to the My Account page, so if he submits some information at this time, there is no need to set up obstacles for him.
The next one is some other plug-ins provided by the plug-in family. We will discuss it later, but we can’t install it directly here because they are all commercial versions. There is also a help, which is the Help Center. This is how to use the yith-woocommerce-customize-myaccount-page plugin to customize the user page.