BWD WooCommerce Product Compare Addon For Elementor

Introduction

The BWD WooCommerce Product Compare addon for Elementor is a powerful plugin that allows users to compare products side by side, making it an essential tool for online store owners who want to provide an exceptional customer experience. The plugin integrates seamlessly with WooCommerce and Elementor, ensuring that your product comparison function is fully customizable and fits your store's unique theme.

In this tutorial, we will walk you through step-by-step instructions on how to use the BWD WooCommerce Product Compare addon For Elementor. By the end of this tutorial, you will be able to easily set up and use the product comparison feature to improve your customers' experience and drive sales.

Getting Started

Before you start, make sure that you have the following prerequisites installed:

1. Elementor page builder
2. WooCommerce plugin
3. BWD WooCommerce Product Compare addon

Adding the Product Comparison Button to Your Elementor Page

1. Log in to your WordPress dashboard and access the Elementor page editor for the page where you want to add the product comparison button.
2. Drag and drop the Product Comparison widget to your page.
3. In the widget settings, you will see a notice to install the BWD WooCommerce Product Compare addon plugin. If you haven't already, install and activate the plugin.
4. Configure the widget settings:
   • Product Attribute: Choose the attribute by which you want to allow product comparison (e.g., price, rating, brand, etc.).
   • Button Text: Set the text that appears on the product comparison button.
   • Button Icon: Choose an icon to appear next to the button text.
   • Position: Select the position of the button (e.g., top-left, bottom-right, etc.).
5. Once you've configured the settings, click Save.

Configuring the Comparison Layout

1. Inside the Elementor page builder, go to the page settings by clicking on the three horizontal lines () located in the top-right corner of the page.
2. Click on Styles and then Comparison Layout.
3. From the comparison layout settings:
   • Layout Direction: Choose the direction for your comparison layout (i.e., horizontal or vertical).
   • Rows: Set the number of rows you want to have in your comparison layout.
   • Columns: Set the number of columns you want to have in each row.
   • Margin: Adjust the margin between the comparison product rows.
4. When you're satisfied with your comparison layout settings, click Save.

How to Use the Product Comparison Function

1. As you're browsing your shop, find two or more products you want to compare.
2. Click the product comparison button on both products to add them to the comparison list.
3. Once you've selected all the products you want to compare, click View Comparison at the top right corner of the page. This will open the product comparison panel.
4. Inside the comparison panel:
   • Product names: Each product's name appears with a checkbox alongside.
   • Filtering options: You have options to filter products based on attribute values (if available).
   • Attribute comparison: Each comparison attribute is displayed with value indicators for each product.

Additional Features and Customizations

The BWD WooCommerce Product Compare addon offers many more features and customization options, such as:

* Customizing the style of the comparison panel: font sizes, colors, spacing, and more
* Adding custom button styles: icons, padding, margin, and more
* Creating custom tables and templates for the product comparison layout

To explore more, navigate to the widget settings or the Elementor page settings and adjust accordingly.

Conclusion

Setting up and using the BWD WooCommerce Product Compare addon For Elementor is now complete. With this product comparison feature, you have enhanced the shopping experience of your customers, making it easier for them to quickly compare products and make an informed purchase decision. We hope this tutorial has walked you through the process without any hassle.