WooCommerce doesn’t include built-in product comparison functionality. Without comparison tables, customers struggle to evaluate similar products, leading to abandoned carts and lost sales. Adding product comparison features helps customers make informed decisions by displaying product attributes, prices, and specifications side-by-side. This guide covers three proven methods to implement comparison tables in your WooCommerce store using free plugins, and custom code.
How to Add Product Comparison Tables in WooCommerce
Using plugins
There are several plugins that can help you add the table to your shop.
YITH WooCommerce Compare
Step 1: Go to YITH plugin → Compare in your admin menu
Step 2: Configure basic settings:
- Set comparison display type (popup or dedicated page)
- Choose button text and positioning
- Select which product fields to compare
Step 3: Go to WooCommerce → Products → Attributes
Step 4: Create or select attributes you want to compare (e.g., size, color, material)
Step 5: For each product, go to Products → All Products → Edit product
Step 6: In the Attributes tab, add values for your comparison fields
Step 7: Save changes and test the compare functionality on your store
WPC Smart Compare
Step 1: Navigate to WPC Smart Compare in admin menu
Step 2: Configure comparison settings:
- Set maximum products for comparison (recommended: 4)
- Choose button positions (shop page, product page)
- Enable/disable specific comparison fields
Step 3: Customize appearance:
- Select table layout (horizontal/vertical)
- Set popup vs page display
- Configure AJAX loading options
Step 4: Go to WooCommerce → Products → Attributes
Step 5: Set up product attributes for comparison
Step 6: Test functionality by adding products to compare list
BeRocket Products Compare
Step 1: Go to WooCommerce → Products Compare
Step 2: Configure comparison page settings:
- Set custom URL for comparison page
- Choose widget display options
- Select popup vs page view
Step 3: Configure comparison fields:
- Select which attributes to display
- Set field ordering priority
- Enable/disable specific product data
Step 4: Customize styling:
- Choose button styles
- Set table colors and layout
- Configure widget appearance
Step 5: Add comparison widget to desired page locations
Step 6: Test functionality across different devices
Using custom code
Custom Code Implementation (Using Code Snippets Plugin)
In the Code Snippets plugin, create a new snippet. You can name it like “Product Comparison Table”.
Then paste this complete comparison code:
// Add compare button to products
add_action('woocommerce_after_single_product_summary', 'add_product_compare_button', 25);
function add_product_compare_button() {
global $product;
echo '<a href="#" class="compare-btn" data-product-id="' . $product->get_id() . '" style="background:#007cba;color:white;padding:10px 15px;text-decoration:none;border-radius:4px;">Add to Compare</a>';
}
// Enqueue JavaScript and CSS
add_action('wp_enqueue_scripts', 'enqueue_compare_scripts');
function enqueue_compare_scripts() {
wp_add_inline_script('jquery', '
jQuery(document).ready(function($) {
var compareList = JSON.parse(localStorage.getItem("compareList") || "[]");
// Add compare button functionality
$(document).on("click", ".compare-btn", function(e) {
e.preventDefault();
var productId = $(this).data("product-id");
if (compareList.indexOf(productId) === -1) {
if (compareList.length >= 4) {
alert("Maximum 4 products can be compared");
return;
}
compareList.push(productId);
localStorage.setItem("compareList", JSON.stringify(compareList));
$(this).text("Added to Compare").css("background", "#28a745");
updateCompareWidget();
}
});
// Create comparison widget
function updateCompareWidget() {
if (compareList.length > 0) {
if ($("#compare-widget").length === 0) {
$("body").append("<div id=\"compare-widget\" style=\"position:fixed;bottom:20px;right:20px;background:#333;color:white;padding:15px;border-radius:5px;z-index:9999;\"><span>Compare (" + compareList.length + ")</span><button id=\"view-comparison\" style=\"margin-left:10px;background:#007cba;color:white;border:none;padding:5px 10px;border-radius:3px;\">View</button><button id=\"clear-compare\" style=\"margin-left:5px;background:#dc3545;color:white;border:none;padding:5px 10px;border-radius:3px;\">Clear</button></div>");
} else {
$("#compare-widget span").text("Compare (" + compareList.length + ")");
}
} else {
$("#compare-widget").remove();
}
}
// View comparison functionality
$(document).on("click", "#view-comparison", function() {
if (compareList.length === 0) return;
$.post("' . admin_url('admin-ajax.php') . '", {
action: "get_comparison_data",
product_ids: compareList,
nonce: "' . wp_create_nonce('compare_nonce') . '"
}, function(response) {
if (response.success) {
showComparisonModal(response.data);
}
});
});
// Clear comparison
$(document).on("click", "#clear-compare", function() {
compareList = [];
localStorage.removeItem("compareList");
updateCompareWidget();
$(".compare-btn").text("Add to Compare").css("background", "#007cba");
});
// Show comparison modal
function showComparisonModal(products) {
var modalHtml = "<div id=\"compare-modal\" style=\"position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;overflow:auto;\"><div style=\"background:white;margin:50px auto;padding:20px;width:90%;max-width:1000px;border-radius:5px;\"><button id=\"close-modal\" style=\"float:right;background:#dc3545;color:white;border:none;padding:5px 10px;border-radius:3px;\">Close</button><h2>Product Comparison</h2><table style=\"width:100%;border-collapse:collapse;margin-top:20px;\"><tr>";
products.forEach(function(product) {
modalHtml += "<th style=\"border:1px solid #ddd;padding:10px;text-align:center;\"><img src=\"" + product.image + "\" style=\"width:100px;height:100px;object-fit:cover;\"><br>" + product.name + "</th>";
});
modalHtml += "</tr><tr><td style=\"border:1px solid #ddd;padding:10px;font-weight:bold;\">Price</td>";
products.forEach(function(product) {
modalHtml += "<td style=\"border:1px solid #ddd;padding:10px;text-align:center;\">" + product.price + "</td>";
});
modalHtml += "</tr></table></div></div>";
$("body").append(modalHtml);
}
// Close modal
$(document).on("click", "#close-modal, #compare-modal", function(e) {
if (e.target.id === "compare-modal" || e.target.id === "close-modal") {
$("#compare-modal").remove();
}
});
updateCompareWidget();
});
');
}
// AJAX handler for comparison data
add_action('wp_ajax_get_comparison_data', 'get_comparison_data');
add_action('wp_ajax_nopriv_get_comparison_data', 'get_comparison_data');
function get_comparison_data() {
check_ajax_referer('compare_nonce', 'nonce');
$product_ids = $_POST['product_ids'];
$comparison_data = array();
foreach ($product_ids as $id) {
$product = wc_get_product(intval($id));
if ($product) {
$image_url = wp_get_attachment_image_src($product->get_image_id(), 'medium');
$comparison_data[] = array(
'id' => $id,
'name' => $product->get_name(),
'price' => $product->get_price_html(),
'image' => $image_url ? $image_url[0] : wc_placeholder_img_src()
);
}
}
wp_send_json_success($comparison_data);
}Step 7: Set scope to “Run everywhere”
Step 8: Click “Save Changes and Activate”
Step 9: Test the functionality by visiting a product page
Step 10: Click “Add to Compare” button and verify the comparison widget appears
FAQs
Q: Can I limit the number of products customers can compare? A: Yes, most plugins allow you to set a maximum limit. YITH Compare and WPC Smart Compare both offer this feature in their settings. For custom code, implement a JavaScript check before adding products to the comparison list.
Q: Will comparison tables work with variable products? A: Premium plugins like YITH Compare Pro and A3Rev Compare Products support product variations. Free plugins typically compare parent products only, not individual variations.
Q: How do I style the comparison table to match my theme? A: Use CSS customization through your theme’s style.css file or the WordPress Customizer. Most plugins provide CSS classes for targeting specific elements. Look for classes like .yith-woocompare-table or .wpc-compare-table.
Q: Can customers save comparison lists for later? A: This depends on the plugin. YITH Compare Pro saves comparisons to user accounts, while free versions typically use browser sessions. Custom implementations can save to user meta or use cookies.
Q: Do comparison plugins affect site performance? A: Well-coded plugins have minimal impact. WPC Smart Compare uses AJAX to reduce page reloads. Avoid plugins that load unnecessary scripts on all pages. Always test site speed after installation.
Q: Can I display comparison tables using shortcodes? A: Yes, most plugins provide shortcodes. YITH Compare uses [yith_compare_button], while BeRocket offers [br_compare_table]. Check each plugin’s documentation for specific shortcode syntax.
Q: Is it possible to compare products from different categories? A: Most plugins allow cross-category comparison, but some can be configured to restrict comparisons within specific categories. This setting is usually found in the plugin’s comparison criteria options.
Q: How do I handle missing product attributes in comparison tables? A: Configure your comparison settings to show “N/A” or empty cells for missing attributes. Ensure consistent attribute naming across products to avoid display issues.
Conclusion
Adding product comparison tables to WooCommerce significantly improves customer experience and can increase conversion rates by helping shoppers make informed decisions. For stores with specific requirements, custom code implementation offers complete control but requires development expertise. Choose the method that best fits your technical skill level and store requirements.
