Make WooSwipe Compatible with Elementor

Share on facebook
Share on twitter
Share on linkedin
Share on email
WooSwipe / Elementor

We often use the WooSwipe WordPress plugin on our websites to make the image galleries of WooCommerce products accessible to mobile users. And we also often use Elementor to build our websites. Unfortunately, WooSwipe is not compatible with Elementor out of the box and you will need to adjust it. Fortunately, this only takes about 15 lines of code added to your theme’s functions.php file.

Understanding the compatibility problem

First, you need to understand the problem before trying to solve it. Adding WooSwipe to your Elementor website does nothing and your website will continue to use the default WooCommerce gallery. WooSwipe tries to intercept the ‘woocommerce_before_single_product_summary‘ WordPress hook (which outputs the default image gallery) and then output its own image gallery instead. The problem, according to this GitHub issue, is that Elementor does not use the hook. Instead, Elementor uses its own hooks to output the image gallery leaving WooSwipe with nothing to use for its own image gallery.

Default WooCommerce product gallery before making WooSwipe compatible with Elementor
Default WooCommerce Gallery

Making WooSwipe compatible

The basic solution is to follow WooSwipe’s original process of intercepting and replacing the default gallery with WooSwipe’s custom gallery. The first hook to intercept and remove outputs the featured image. We do this by using the ‘add_filter‘ hook and returning empty text instead of the featured image HTML. But we only want to run this hook once! So inside the ‘add_filter‘ hook we also use the ‘remove_filter‘ hook to prevent this code from being run multiple times.

// Remove the default featured image by returning empty HTML
add_filter('woocommerce_single_product_image_thumbnail_html', 'RemoveDefaultWooCommerceGallery', 10);
function RemoveDefaultWooCommerceGallery($html) {
	
	// Remove the hook after we have used it once. Otherwise we'll overwrite the WooSwipe images.
	remove_filter('woocommerce_single_product_image_thumbnail_html', 'RemoveDefaultWooCommerceGallery', 10);	
	return ('');
}	

The second hook to intercept and remove is called ‘woocommerce_product_thumbnails‘ and is used to output the default thumbnails. Please note that the action has a priority of 20 and thus we need to remove the hook with the matching function name and priority.

// Remove the default thumbnails
remove_action('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);

After removing the featured image and thumbnails we now have a blank slate for WooSwipe’s custom gallery. We can add WooSwipe’s gallery with a single line of code that uses the same hook removed earlier.

// Add the WooSwipe images. (AFTER we remove the default thumbnails)
add_action('woocommerce_product_thumbnails', 'wooswipe_woocommerce_show_product_thumbnails', 20);
WooSwipe gallery with broken stylesheet
WooSwipe gallery with CSS issues

At this point your WooSwipe image gallery is being displayed on your page just where you want it. But–the styling is wrong. This comes down to a conflict between WooSwipe and your theme. Your website’s CSS stylesheets are loaded AFTER WooSwipe’s stylesheets and overwrite them. In my case this gave the ‘Previous’ and ‘Next’ buttons a weird pink border. Fortunately this problem is very simple to fix.

WooSwipe thumbnails with broken styelsheet
Broken CSS causes odd pink borders

Fixing the stylesheet

The basic idea is to remove the WooSwipe stylesheet it before it outputs and re-queue it AFTER the theme’s stylesheet. However, to ensure our custom code doesn’t run too soon or too late we need to use the ‘wp_enqueue_scripts‘ hook. The end result looks like this.

function ResetWooSwipeStyles() {
	wp_dequeue_style('slick-theme');
	$wooswipe_wp_plugin_path =  plugins_url() . '/wooswipe' ;		
	wp_enqueue_style('slick-theme', $wooswipe_wp_plugin_path . '/slick/slick-theme.css');
}
add_action('wp_enqueue_scripts', 'ResetWooSwipeStyles');
After making WooSwipe compatible with Elementor
The final product

All together – Make WooSwipe compatible with Elementor

Now your WooSwipe gallery should appear as expected. The complete code that you can add to your theme’s functions.php file (usually found in /wp-content/themes/YOUR_THEME/functions.php) to make WooSwipe compatible with Elementor is below.

// WooSwipe fix (since Elementor doesn't use the 'woocommerce_before_single_product_summary' hook that WooSwipe depends on)

// Remove the default featured image by returning empty HTML
add_filter('woocommerce_single_product_image_thumbnail_html', 'RemoveDefaultWooCommerceGallery', 10);
function RemoveDefaultWooCommerceGallery($html) {
	
	// Remove the hook after we have used it once. Otherwise we'll overwrite the WooSwipe images.
	remove_filter('woocommerce_single_product_image_thumbnail_html', 'RemoveDefaultWooCommerceGallery', 10);	
	return ('');
}

// Remove the default thumbnails
remove_action('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);

// Add the WooSwipe images. (AFTER we remove the default thumbnails)
add_action('woocommerce_product_thumbnails', 'wooswipe_woocommerce_show_product_thumbnails', 20);	

function ResetWooSwipeStyles() {
	wp_dequeue_style('slick-theme');
	$wooswipe_wp_plugin_path =  plugins_url() . '/wooswipe' ;		
	wp_enqueue_style('slick-theme', $wooswipe_wp_plugin_path . '/slick/slick-theme.css');
}
add_action('wp_enqueue_scripts', 'ResetWooSwipeStyles');

Need more help? Check out our knowledge base for more help articles or contact us for help with your website.

Sign up to get our latest articles

Don’t worry. We won’t sell your email. We are also really busy managing our clients, so we won’t be filling your inbox with articles every day. We only write them when we have a compelling reason to do so, and some spare time too!

preloader