Appearance
Profile Progress
The Profile Progress widget displays how complete a user’s profile is. Show a progress bar or circular indicator based on which profile fields have been filled out, encouraging users to complete their profiles.
Overview
Track profile completion by checking which fields users have filled out. Display progress as a horizontal bar or circular indicator with an optional percentage and field checklist. Available as an Elementor widget, shortcode, and dynamic tag.
Note: This feature is always enabled and requires no configuration to activate.
Key Features
- Horizontal or circular progress display
- Configurable field selection from your profile post type
- Percentage display with customizable text
- Optional field checklist with icons
- Edit profile button option
- Works with all Voxel profile fields
- Elementor widget, shortcode, and dynamic tag support
Setup Instructions
Using the Elementor Widget
- Edit your profile or dashboard template in Elementor
- Search for Profile Progress (VT) in the widget panel
- Drag the widget to your desired location
- Select which profile fields to track (e.g., voxel:name, voxel:avatar, description, location)
- Configure display options and styling
- Save the template
Widget Settings
Content Options
| Setting | Description | Options |
|---|---|---|
| Progress Type | Visual style of progress indicator | Horizontal Bar, Circular |
| Profile Fields | Which profile fields to track (repeater) | Select field, custom label, icon |
| Show Percentage | Display the completion percentage | Yes/No + before/after text |
| Show Field List | Display checklist of completed/incomplete fields | Yes/No |
| Show Edit Profile Link | Display button to edit profile | Yes/No + custom URL |
Style Options
The widget includes comprehensive styling options for:
- Progress Bar: Height, colors, border radius
- Circular Progress: Size, stroke width, colors
- Percentage Text: Typography, colors, spacing
- Field List: Columns, gaps, typography
- Completed/Incomplete Fields: Separate color schemes
- Edit Profile Button: Full button styling with hover states
Dynamic Tag
Use the profile_completion dynamic tag to display the completion percentage anywhere dynamic tags are supported:
@user(id).profile_completion(voxel:name\,voxel:avatar\,location\,description)This returns a number (0-100) representing the percentage of specified fields that are completed.
Dynamic Tag Usage
| Context | Syntax |
|---|---|
| Current user | @user(id).profile_completion(field1\,field2) |
| Post author | @author(id).profile_completion(field1\,field2) |
Note: Use \, (backslash comma) to separate field keys within the dynamic tag.
Supported Profile Fields
The widget automatically detects fields from your Voxel profile post type configuration. Common fields include:
| Field Key | Description | Storage Location |
|---|---|---|
| voxel:name | Profile display name | wp_users.display_name |
| voxel:avatar | Profile avatar image | wp_usermeta |
| description | Profile bio/description | wp_posts.post_content |
| location | Location field | wp_postmeta |
| _thumbnail_id | Featured image | wp_postmeta |
| custom fields | Any custom profile fields | wp_postmeta |
Note: UI fields (ui-step, ui-image, ui-html, ui-heading) are automatically excluded from the field selection as they are display-only elements.
How Progress is Calculated
The widget checks each selected field to determine completion:
- Text fields: Complete if not empty or whitespace-only
- Arrays/Objects: Complete if they contain any items
- Numbers: Complete if set (including 0)
- Images: Complete if an image is uploaded
Formula: Percentage = (completed fields / total fields) x 100
Use Cases
User Dashboard
Show users their profile completion status to encourage them to fill in all details.
Onboarding Flow
Display progress during new user onboarding to guide them through profile setup.
Profile Page
Show completion status on the user’s own profile page with an edit button.
Conditional Content
Use the dynamic tag with Voxel conditions to show/hide content based on profile completion:
@if(@user(id).profile_completion(voxel:name\,voxel:avatar\,description) < 100)
Complete your profile to unlock all features!
@endifTroubleshooting
Progress Shows 0%
- Verify user has a Voxel profile created
- Check that selected field keys match your profile configuration
- Ensure user is logged in (if checking current user)
- For dynamic tag: verify proper syntax with escaped commas
“No profile fields found”
- Verify Voxel’s profile post type is configured
- Check that profile fields exist in Voxel → Post Types → Profile → Fields
Widget Not Appearing
- Widget only renders for logged-in users (returns empty for guests)
- In Elementor editor, sample data is shown for preview
Field Not Counting Correctly
- Use exact field keys from your profile configuration
- Special fields require exact keys:
voxel:name,voxel:avatar,description - Custom fields use the key defined in Voxel post type settings