Appearance
Users Purchased Widget
The Users Purchased widget displays users who have purchased a specific product or listing. Show social proof with buyer avatars and optional purchase details.
Overview
Display a grid of user avatars or a detailed list showing who has purchased a product. This widget queries Voxel’s orders system and shows completed purchases, providing social proof that encourages conversions.
Key Features
- Avatar grid or detailed list view
- Overlapping avatar display
- Total purchase count display
- Purchase date display (list view)
- Email display with truncation (list view)
- Configurable stacking order
- Caching for performance
Setup Instructions
Step 1: Enable the Widget
- Navigate to Voxel Toolkit → Widgets in your WordPress admin
- Find Users Purchased in the list
- Toggle the switch to enable the widget
- Click Save Changes
Step 2: Add to Template
- Edit your single product/listing template in Elementor
- Search for Users Purchased (VT)
- Drag the widget to your desired location
- Choose avatar grid or list view
- Save the template
Widget Settings
Display Settings
| Setting | Description | Default |
|---|---|---|
| View Type | Avatar Grid or User List | Avatar Grid |
| Post Source | Current Post or Custom Post ID | Current Post |
| Custom Post ID | Specific post ID (if custom source) | Empty |
| Number of Users | How many users to display | 10 |
| Show Total Count | Display total purchase count | Yes |
| Count Text | Text after the count number | “people purchased this” |
Avatar Grid Settings
| Setting | Description | Default |
|---|---|---|
| Avatar Size | Size of each avatar in pixels | 50px |
| Avatar Overlap | How much avatars overlap horizontally | -10px |
| Row Spacing | Vertical gap between avatar rows | 10px |
| Stacking Order | Which avatars appear on top | Right on Top |
| Border | Border around each avatar | Configurable |
| Border Radius | Roundness of avatars | 50% (circle) |
| Box Shadow | Shadow effect on avatars | Optional |
List View Settings
| Setting | Description | Default |
|---|---|---|
| Show Avatar | Display user avatar in list | Yes |
| Show Display Name | Show user’s display name | Yes |
| Show Email | Show user’s email address | No |
| Email Max Length | Truncate email after X characters | 20 |
| Show Purchase Date | Display when purchase was made | Yes |
| List Avatar Size | Avatar size in list view | 40px |
Styling Options
Container Style
- Background color/gradient
- Border
- Border radius
- Padding
Typography
- Count text typography and color
- Name text typography and color (list view)
- Meta text typography and color (list view)
How It Works
- Widget queries the
vx_orderstable for completed orders - Parses order details JSON to find matching post IDs
- Fetches user data including Voxel avatars
- Results are cached for 5 minutes to improve performance
- Displays unique users (no duplicates)
Use Cases
Product Pages
Show buyer avatars to create social proof and urgency.
Course/Membership Sales
Display enrolled students or members to encourage sign-ups.
Event Tickets
Show attendees who have purchased tickets.
Service Bookings
Display customers who have booked the service.
Troubleshooting
No Users Showing
- Verify completed orders exist for the product
- Check that the vx_orders table exists
- Ensure order status is “completed”
- Clear transient cache if data seems stale
Missing Avatars
- Widget falls back to Gravatar if no Voxel avatar
- Check user’s voxel:avatar meta field
- Ensure avatar attachment exists
Editor Preview Empty
- Widget displays placeholder in editor when no data
- Preview on the actual product page to see real data