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.
Aquí, hemos descrito los pasos de uso del módulo de avatar y el widget de forma clara y sencilla. Conozca el proceso a continuación.
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 habilitar el módulo Avatar, navegue hasta WordPress Dashboard –
- ShopEngine > Add-ons
- Encontrar Módulo de avatar y haga clic en el Settings icon
- In the next window, toggle Enable the add-on button to ON
Now you see a message, that says Successfully Saved.
Paso 2: habilitar el widget #
- Navegar a ShopEngine > Widgets
- Encuentra el Avatar widget and enable it by switching the toggle button to EN
- Clickea en el GUARDAR CAMBIOS botón
Step 3: Open My Account Dashboard Template #
El widget Avatar solo funciona en la página Mi cuenta.
Si su cuenta no tiene una página de cuenta, debe crear una.
Learn to create a Mi página de cuenta
Abre el Mi cuenta Panel page in viewer mode. Then, edit the page with Elementor option.
Después de haber abierto la plantilla Mi cuenta en modo editor, drag and drop the Avatar widget en el diseño de la plantilla.
Paso 4: configurar el widget de Avatar #
Ahora puede configurar el widget en la pestaña Contenido.
- Icono de carga: Select an icon from the icon library or upload SVG that lets the user upload their avatar
- Save Button Text: Colocar "Guardar texto del botón"
- Superposición de imágenes: Habilitar el Mostrar superposición de imágenes feature if you wnat set a overlay
- Icono Cerrar: Choose an icon from the icon library or upload a SVG as a Cerrar icono
NOTE: All of those features work at the front end only.
Step 5: Style Your Avatar #
A continuación, puede personalizar los diseños de Avatar en la pestaña Estilo. En el Sección de estilo, las opciones de edición aquí son-
- Envoltura: Colocar alineación y brecha de contenido de la imagen.
- Imagen: Establezca el ancho de la imagen según el diseño.
- Estilo de contenido: Puede cambiar el color, la tipografía, el relleno, etc. del nombre, el botón de guardar y el correo electrónico.
- 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.
La configuración del widget es una tarea bastante sencilla. Y como vio, las funciones son útiles y se encuentran en los campos de la cuenta de hoy. Entonces, use este nuevo widget para crear perfiles de usuario atractivos.
ShopEngine viene con funciones sorprendentes como Avatar Widget y más. Obtenga el complemento ShopEngine para diseñar sitios web WooCommerce totalmente personalizables.
