Appearance
Compare Posts
The Compare Posts function lets visitors select multiple listings and view them side-by-side in a comparison table. Perfect for helping users make decisions between similar options like hotels, products, or services.
Overview
Visitors can add up to 4 posts to their comparison list, then view them in a detailed side-by-side table. The comparison persists across page visits using browser storage, and syncs across multiple browser tabs automatically.
Key Features
- Compare 2-4 posts of the same type
- Compare Button widget for adding posts
- Comparison Table widget for the comparison page
- Floating comparison bar
- Configure which fields to compare per post type
- Custom field labels and drag-to-reorder
- Supports all Voxel field types
- Print comparison table
- Cross-tab synchronization
Setup Instructions
Step 1: Enable the Function
- Navigate to Voxel Toolkit → Functions in your WordPress admin
- Find Compare Posts in the list
- Toggle the switch to enable the function
- Click Save Changes
Step 2: Configure Comparison Fields
- Click the settings icon next to Compare Posts
- Create and select a page for each post type.
- Feel free to change the styling of the floating bar.
- Click Save Changes
Step 3: Add Compare Button Action
- Open your single post template in Elementor
- Using the native “Actions (VX) widget, add a “Compare” action to your preview card or single post template.
- Save the template
Step 4: Create Comparison Page
- Create a new page for comparisons (e.g., “Compare”)
- Edit with Elementor
- Add the Comparison Table (VT) widget
- Configure table styling
- Publish the page
Comparison Table Widget
Displays the side-by-side comparison of selected posts.
Widget Settings
| Setting | Description |
|---|---|
| Show Print Button | Add button to print the comparison table |
| Show Remove Buttons | Allow removing posts from comparison |
| Empty Message | Text shown when no posts are selected |
| Header Style | Styling for the post title row |
Supported Field Types
The comparison table renders all Voxel field types appropriately:
- Text fields – Displayed as-is
- Number fields – Formatted with proper decimals
- Taxonomy fields – Shows term labels
- Work hours – Formatted schedule display
- Location – Address display
- Images – Thumbnail display
- Yes/No fields – Checkmark or X icons
Print Feature
The comparison table can be printed for offline reference:
- Portrait format optimized layout
- Clean styling without navigation elements
- Properly sized columns for paper
- Works with browser print dialog
Cross-Tab Sync
The comparison list automatically syncs across browser tabs:
- Add a post in one tab, it appears in all tabs
- Remove a post in one tab, it updates everywhere
- Comparison bar updates in real-time
- Uses localStorage for persistence
Use Cases
Hotel Comparison
Let guests compare rooms, amenities, prices, and ratings across properties.
Product Comparison
Help shoppers compare features, specifications, and prices of similar products.
Service Providers
Allow users to compare contractors, agencies, or professionals side-by-side.
Real Estate
Compare properties by bedrooms, square footage, price, and amenities.
Troubleshooting
Compare Button Not Working
- Check that the function is enabled
- Verify JavaScript is enabled in browser
- Clear browser cache and localStorage
- Check browser console for errors