Elementor addon offering 120+ widgets and templates — Elementor Gallery, Slider, Form, Post Grid, Menu, Accord...
Free
1M+ installs 4.9★ (4,111)
Before After Image
Before After Image with a draggable handle. Works with Elementor, WooCommerce, and shortcode.
The facts
- Rating
- 5★ from 3
- Active installs
- 1k+
- Price
- Free
- Last updated
- 22 Aug 2026
- Added
- Sep 2022
- Requires WP
- 6.2
- Tested up to
- WP 7.1
- Requires PHP
- 5.6
- Downloads
- 12,414
Our analysis
AI-assistedBefore After Image is a WordPress plugin that allows visitors to compare two images side-by-side by dragging a handle. It can be used via shortcode, as an Elementor widget, or integrated with WooCommerce for product comparisons.
The plugin offers various features including customizable labels, handle styles, and orientation options. It is suitable for users looking to enhance their site with interactive image comparisons, especially in product showcases.
Best for: This plugin suits e-commerce sites and content creators wanting to showcase image comparisons.
What it does well
- ✓Supports shortcode, Elementor widget, and WooCommerce integration
- ✓Customisable before/after labels and handle styles
- ✓Offers horizontal and vertical image orientation
- ✓Includes touch and pointer-event support
Where it falls short
- •Limited information on advanced features available in the Pro version
Verdict
Before After Image provides a straightforward solution for image comparison on WordPress sites, with flexible integration options. It is particularly useful for those in e-commerce or visual storytelling.
From the developer
Scott Paterson's own description of Before After Image, lightly tidied.
Before After Image lets visitors drag a handle to compare two images side-by-side.
Works in three ways — use whichever fits your site:
- Shortcode — You can you shortcodes on any post or page. Use the built-in shortcode builder to generate shortcodes easily.
- Elementor widget — drag and drop the widget onto any page with full style controls.
- WooCommerce — attach a before/after comparison to any product directly from the product editor.
Full usage instructions, shortcode options, and WooCommerce setup steps are available inside the plugin under the Before After Image menu.
Key Features
- Works standalone via shortcode — Elementor and WooCommerce are both optional
- WooCommerce product integration with per-product settings
- Elementor widget with full style controls
- Horizontal and vertical orientation
- Handle movement by drag or mouse hover
- Customisable before/after labels (on hover, always, or never)
- Enable/disable overlay
- Default handle offset position
- Six handle styles
- Handle types: Arrows or Text
- Slider colour — white or black (line, handle, and arrows)
- Image size option
- Typography and colour options (Elementor)
- Touch and pointer-event support
Before After Image Pro
Want more features? Check out Before After Image Pro:
- Auto-Slide Animation — Grab attention with an automatically sweeping handle. Configure speed and pause-on-hover behavior.
- 3-Image Comparison — Show before, during, and after with two draggable handles.
- Full-Screen View — Let visitors zoom in with a button to expand the slider to full screen.
- Custom Colors — Fine-tune the line, circle, and arrows independently to match your brand.
- Rounded Corners — Add subtle to fully rounded corners for a polished look.
- Shortcode Manager — Save and reuse slider configurations with
[mbai_preset id="..."]shortcodes. - Premium Support — Get priority support and automatic updates.
Tagged as
quality
Support Quality
Alternatives
Other plugins for extending a page builder.
Join millions who empower their websites with ElementsKit Elementor Addons. Get templates, & 100+ widgets...
Free
1M+ installs 4.9★ (2,036)
Elementor addons with 18+ free widgets, Header & Footer Builder, WooCommerce widgets & templates. Trus...
Free
2M+ installs 4.9★ (2,525)
Elementor Carousel, Mega Menu, Posts List/Slider, WooCommerce Widgets, Display Conditions, AI Abilities, Prema...
Free
600k+ installs 4.9★ (1,677)
Elementor templates, Header footer builder, Elementor Post Grid, Woocommerce Grid builder, Slider, Forms, Gall...
Free
600k+ installs 4.8★ (611)
Disable Gutenberg Block Editor and restore the Classic Editor and original Edit Post screen (TinyMCE, meta box...
Free
500k+ installs 5★ (733)