Generally, people need to use an avatar widget to edit any image like profile image or related things. A quality widget performs tasks that include, placing a user’s image, editing, and designing login or register details. Our new customizable WooCommerce avatar widget has all these priority functions. You can present a better look website with the help of this module and widget.

Here, we have outlined the using steps of the avatar module and widget clearly and easily. Learn the process below.

Add Avatar in My Account Page #

There are three main steps to add an avatar to my account page.

Step 1: Enabling Avatar Module #

To enable the Avatar module, navigate to WordPress Dashboard –

1. ShopEngine > Add-ons
2. Find Avatar module and click on the Settings icon
3. In the next window, toggle Enable the add-on button to ON

Now you see a message, that says Successfully Saved.

Step 2: Enabling Widget #

• Navigate to ShopEngine > Widgets
• Find the Avatar widget and enable it by switching the toggle button to ON
• Click on the SAVE CHANGES button

Step 3: Open My Account Dashboard Template #

The Avatar widget only works on My Account page.

If your account doesn’t have an account page, you have to create one.

Learn to create a My Account Page

Open the My Account Dashboard page in viewer mode. Then, edit the page with Elementor option.

After you have opened the My Account template in editor mode, drag and drop the Avatar widget into the template design.

Step 4: Configure Avatar widget #

 Now you can configure the widget under the Content tab.

• Upload Icon: Select an icon from the icon library or upload SVG that lets the user upload their avatar
• Save Button Text: Set “Save Button Text”
• Image Overlay: Enable the Show Image Overlay feature if you wnat set a overlay
• Close Icon: Choose an icon from the icon library or upload a SVG as a Close Icon

NOTE: All of those features work at the front end only.

Step 5: Style Your Avatar #

Next, you can customize the Avatar designs under the Style tab. In the Style section, the editing options here are-

• Wrapper: Set alignment and Content gap from the image.
• Image: Set image width according to the design.
• Content Style: You can change color, typography, padding, etc. for name, save button, and email.
• Upload Button: Customize the button’s appearance by changing color, position, padding, and border radius etc. from here.
• Close Button: Adjust the close button’ here’s color, size, padding, border radius, etc.

After publishing or updating the page, it will look and work like this according to your details in the front end.

The widget settings are a pretty straightforward task. And as you saw, the features are helpful and found in today’s account fields. So, use this new widget to make nice-looking user profiles.

ShopEngine comes with amazing features like Avatar Widget and more. Get the ShopEngine plugin to design fully customizable WooCommerce websites.