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.
Aqui, descrevemos as etapas de uso do módulo avatar e do widget de forma clara e fácil. Aprenda o processo abaixo.
Quick Overview
This documentation will let you know how to add avatar using ShopEngine’s Avatar module, a no-code WooCommerce builder. This tool needs other free solutions such as WooCommerce and Elementor as ShopEngine is a WooCommerce and Elementor addon. Install and activate the plugins.
Now follow the steps below to add Avatar to your eCommerce site:
✅ Enable WooCommerce Avatar Module and widget.
✅ Drag-and-drop Avatar widget on My Account Dashboard widget.
✅ Configure Avatar widget.
✅ Style customize WooCommerce Avatar.
Add Avatar in My Account Page #
There are three main steps to add an avatar to my account page.
Step 1: Enabling Avatar Module #
Para ativar o módulo Avatar, navegue até WordPress Dashboard –
- ShopEngine > Add-ons
- Encontrar Módulo Avatar e clique no Settings icon
- In the next window, toggle Enable the add-on button to ON
Now you see a message, that says Successfully Saved.
Etapa 2: ativar o widget #
- Navegar para Shop Engine > Widgets
- Encontre o avatar widget and enable it by switching the toggle button to SOBRE
- Clique no SALVAR ALTERAÇÕES botão
Step 3: Open My Account Dashboard Template #
O widget Avatar funciona apenas na página Minha conta.
Se sua conta não tiver uma página de conta, você deverá criar uma.
Learn to create a Página Minha conta
Abra o Minha conta Painel page in viewer mode. Then, edit the page with Elementor option.
Depois de abrir o modelo Minha conta no modo editor, drag and drop the Avatar widget no design do modelo.
Etapa 4: configurar o widget Avatar #
Agora você pode configurar o widget na guia Conteúdo.
- Carregar ícone: Select an icon from the icon library or upload SVG that lets the user upload their avatar
- Save Button Text: Definir "Salvar texto do botão”
- Sobreposição de imagem: Habilite o Mostrar sobreposição de imagem feature if you wnat set a overlay
- Fechar ícone: Choose an icon from the icon library or upload a SVG as a Fechar ícone
NOTE: All of those features work at the front end only.
Step 5: Style Your Avatar #
A seguir, você pode personalizar os designs do Avatar na guia Estilo. No Seção de estilo, as opções de edição aqui são-
- Embrulho: Definir alinhamento e lacuna de conteúdo da imagem.
- Imagem: Defina a largura da imagem de acordo com o design.
- Estilo de conteúdo: Você pode alterar a cor, tipografia, preenchimento, etc. para nome, botão Salvar e e-mail.
- 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.
As configurações do widget são uma tarefa bastante simples. E como você viu, os recursos são úteis e encontrados nos campos da conta de hoje. Portanto, use este novo widget para criar perfis de usuário bonitos.
ShopEngine vem com recursos incríveis como Avatar Widget e muito mais. Obtenha o plugin ShopEngine para criar sites WooCommerce totalmente personalizáveis.
