The Profile Progress Widget helps you display how complete a user’s profile is by tracking specific fields and showing the completion percentage as a visual progress bar or circle.
Getting Started
Step 1: Add the “Profile Progress (VT)” widget to your page from the Elementor widget panel.
Step 2: Configure which profile fields you want to track by adding them to the “Profile Fields” section.
Finding Field Keys
To track profile fields, you need to know their “field keys”. Here’s how to find them:
- Go to your WordPress admin dashboard
- Navigate to Your Post Type > Edit Post Type
- Click on the Fields tab
- Look for the field you want to track
- The field key is shown in small text under each field name (example: “first_name”, “bio”, “phone_number”)
Common Profile Field Keys:
voxel:avatar – Profile Avatar (special case)
Widget Settings
Content Tab
Progress Type:
- Horizontal Bar – Shows progress as a horizontal bar
- Circular Progress – Shows progress as a circular ring
Profile Fields: Click “Add Item” to add each field you want to track:
- Field Key – Enter the field key (like “first_name”)
- Field Label – Enter a friendly name to display (like “First Name”)
- Icon – Choose an icon to display next to the field (optional)
Show Percentage: Toggle to show/hide the completion percentage
Before Text: Text to show before the percentage (like “Profile: “)
After Text: Text to show after the percentage (like ” complete”)
Show Field List: Toggle to show/hide the list of tracked fields below the progress bar
Show Edit Profile Link: Toggle to show/hide a button that links to the profile edit page
- Button Text – Text for the button (like “Edit Profile”)
- Button URL – Link to your profile edit page
Style Tab
The Style tab contains extensive styling options organized into sections:
- Progress Bar – Colors, height, and border radius for horizontal bars
- Circular Progress – Size, stroke width, and colors for circular progress
- Percentage Text – Typography and colors for the percentage display
- Field List Layout – Column settings and spacing for the field list
- Completed Fields – Styling for fields that are filled out
- Incomplete Fields – Styling for fields that are empty
- Edit Profile Button – Button styling with hover effects
Examples
Basic Setup:
Track three essential fields with a horizontal progress bar:
- Field 1: Key = “first_name”, Label = “First Name”
- Field 2: Key = “last_name”, Label = “Last Name”
- Field 3: Key = “bio”, Label = “About Me”
Advanced Setup:
Comprehensive profile tracking with circular progress and field list:
- Progress Type: Circular Progress
- Show Field List: Enabled
- Multiple fields including avatar, contact info, and description fields
- Edit Profile button linking to profile edit page
Tips
- Avatar Field: Use the special key “voxel:avatar” to track profile pictures
- Field Order: Arrange fields in order of importance – the widget calculates percentage based on how many are completed
- User Context: The widget automatically shows progress for the currently logged-in user
- Responsive Design: The widget automatically adapts to different screen sizes
- Icons: Use icons to make the field list more visual and engaging
Troubleshooting
Fields not showing as complete:
- Double-check the field key spelling
- Make sure the field actually has content (not just spaces)
- For avatar fields, use “voxel:avatar” exactly
Progress showing 0%:
- Verify the user is logged in
- Check that the field keys match exactly with your post type fields
- Ensure the user has actually filled out some profile information
