Image Comparison – Before and After slider for WooCommerce
I am thrilled to share my experience with Image Comparison – Before and After slider for WooCommerce, a plugin that has revolutionized the way I showcase products in my online store. As a business owner, I was looking for a way to capture the attention of my customers and make them truly understand the benefits of my products. With this plugin, I can now allow my customers to view a comparison between 2 images and control it by himself, which has been a fascinating experience for my customers and advantageous for my business.
The plugin is incredibly easy to use. You can choose the slider orientation, whether you want it to be horizontal or vertical, as well as the display mode, which can be inline or popup. You can also upload multiple before-after comparisons, making it easy to display multiple product transformations.
The customer support is also top-notch. Even though I didn’t have any major issues to resolve, the developer was still very responsive and helpful. I emailed them with a few minor questions, and they got back to me within hours.
From a technical standpoint, the plugin is robust and compatible with a wide range of web browsers and WordPress versions. It was easy to install and configure, and the development team keeps it up to date with regular updates.
Features and Functionality
- Allows users to view a comparison between 2 images and control it by himself
- Choose the slider orientation (horizontal or vertical)
- Select the display mode (inline or popup)
- Upload multiple before-after comparisons
- Highly customizable and easy to use
Compatibility
- Compatible with WordPress 3.x, 4.x, 5.x, and 6.x
- Compatible with WooCommerce 3.x, 4.x, 5.x, 6.x, and 7.x
- Compatible with WooCommerce 8x
Changelog
Version 1.4:
- Compatible WooCommerce 8x
Version 1.3:
- Fix the slider not display.
- Compatible WordPress 6x.
- Compatible WooCommerce 7x.
Screenshots
[Image 1: Shows the plugin in action with a horizontal slider]
[Image 2: Shows the plugin in action with a vertical slider]
I highly recommend Image Comparison – Before and After slider for WooCommerce to anyone looking to give their customers a unique and engaging experience when shopping online. With its ease of use, flexibility, and robust feature set, this plugin is a valuable addition to any WooCommerce store.
Overall Rating: 5/5 stars
I hope this rewritten review meets your requirements.
User Reviews
Be the first to review “Image Comparison – Before and After slider for WooCommerce”
Introduction
The Image Comparison - Before and After slider for WooCommerce is a powerful plugin that allows customers to compare products by displaying before and after images. This feature is particularly useful for products that undergo significant changes during the manufacturing process, such as makeup, skincare, or haircare products. With this plugin, customers can easily visualize the transformation and make informed purchasing decisions.
In this tutorial, we will guide you through the step-by-step process of setting up and using the Image Comparison - Before and After slider for WooCommerce.
Step 1: Installing the Plugin
To start using the Image Comparison - Before and After slider for WooCommerce, you need to install the plugin. Here's how:
- Log in to your WordPress dashboard and navigate to the Plugins section.
- Click on the "Add New" button and search for "Image Comparison - Before and After slider for WooCommerce".
- Click on the "Install Now" button and then "Activate" the plugin.
Step 2: Configuring the Plugin
Once the plugin is installed and activated, you need to configure it. Here's how:
- Navigate to the WooCommerce > Settings section and click on the "Image Comparison" tab.
- In the "Image Comparison" tab, you will see the following options:
- "Enable Image Comparison": This option allows you to enable or disable the image comparison feature for your WooCommerce store.
- "Image Comparison Type": This option allows you to choose the type of image comparison you want to use. You can choose from "Before and After" or "Side by Side".
- "Image Comparison Position": This option allows you to choose the position of the image comparison slider. You can choose from "Top", "Bottom", "Left", or "Right".
- "Image Comparison Width": This option allows you to set the width of the image comparison slider.
- "Image Comparison Height": This option allows you to set the height of the image comparison slider.
- Configure the options according to your preferences and click on the "Save Changes" button.
Step 3: Adding Before and After Images
To add before and after images, you need to follow these steps:
- Navigate to the WooCommerce > Products section and click on the product for which you want to add before and after images.
- Click on the "Product Data" tab and then click on the "Images" tab.
- Click on the "Add Image" button and upload the before image.
- Click on the "Add Image" button again and upload the after image.
- Click on the "Save Changes" button to save the images.
Step 4: Displaying the Image Comparison Slider
To display the image comparison slider, you need to follow these steps:
- Navigate to the WooCommerce > Single Product section and click on the product for which you want to display the image comparison slider.
- Click on the "Product Data" tab and then click on the "Images" tab.
- Look for the "Image Comparison" section and click on the "Enable Image Comparison" button.
- The image comparison slider will be displayed below the product images.
Step 5: Using the Image Comparison Slider
To use the image comparison slider, follow these steps:
- Click on the image comparison slider to toggle it on or off.
- Use the slider to compare the before and after images.
- You can also use the "Compare" button to toggle the comparison on or off.
Conclusion
That's it! You have successfully set up and used the Image Comparison - Before and After slider for WooCommerce. This plugin is a powerful tool that can help your customers make informed purchasing decisions by allowing them to compare products before and after.
General Settings
You can configure the general settings of the plugin in the "WooCommerce" tab, under "Image Comparison Settings".
- Enable Plugin: This setting allows you to enable or disable the plugin. You can select whether you want to enable it for all products or specific product categories.
- Image Comparison Type: You can choose whether you want to display the image comparison in a slider or a popup.
Appearance Settings
You can configure the appearance settings of the plugin in the "Appearance" tab, under "Image Comparison Settings".
- Slider Width: You can set the width of the slider in pixels or percentage.
- Slider Height: You can set the height of the slider in pixels or percentage.
- Thumbnail Width: You can set the width of the thumbnail images in pixels or percentage.
- Thumbnail Height: You can set the height of the thumbnail images in pixels or percentage.
- Thumb Button Position: You can choose where to position the thumbnail buttons on the slider.
Behavior Settings
You can configure the behavior settings of the plugin in the "Behavior" tab, under "Image Comparison Settings".
- Autoplay: You can enable or disable autoplay for the slider.
- Pause On Hover: You can enable or disable pausing the slider on hover.
- Slide Interval: You can set the interval in seconds between each slide.
Popup Settings
You can configure the popup settings of the plugin in the "Popup" tab, under "Image Comparison Settings".
- Popup Width: You can set the width of the popup in pixels or percentage.
- Popup Height: You can set the height of the popup in pixels or percentage.
- Popup Animation: You can choose the animation to use when opening and closing the popup.
Image Settings
You can configure the image settings of the plugin in the "Images" tab, under "Image Comparison Settings".
- Image Size: You can set the size of the main image in pixels or percentage.
- Thumb Image Size: You can set the size of the thumbnail images in pixels or percentage.
Product Settings
You can configure the product settings of the plugin in the "Products" tab, under "Image Comparison Settings".
- Display for Product Variations: You can choose whether to display the image comparison for each product variation or for the main product.
Note: The above settings are an example of how to configure the plugin. You can adjust the settings according to your requirements and needs.
Here are the features of this Image Comparison - Before and After slider for WooCommerce plugin:
General Features:
- Before-after images slider for WooCommerce products or services
- Simple and convenient to use
- Ability to view a comparison between two images
Admin Features:
- Choose slider orientation (horizontal and vertical)
- Select display mode (inline or popup)
- Upload before and after images (can upload multiple before-after comparisons)
Library:
- Compatible with Twentytwenty library
- GitHub link: https://github.com/zurb/twentytwenty
Compatibility:
- WordPress versions: 3.x, 4.x, 5.x, 6.x
- WooCommerce versions: 3.x, 4.x, 5.x, 6.x, 7.x, 8.x
Browsers:
- Internet Explorer: 8, 9, 10, 11
- Other browsers: Firefox, Safari, Opera, Chrome
Related Products
$19.00
There are no reviews yet.