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.
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);
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.
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');
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.
