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.
