How to Make WooSwipe v3 Compatible With Elementor

The WooSwipe WooCommerce Gallery plugin is a useful tool for improving the default WordPress image galleries and Elementor Website Builder is a great plugin for designing your website. Unfortunately the two plugins are incompatible without a little help. Even after making sure both plugins are properly installed and activated it can be frustrating to see that your gallery hasn’t changed. Don’t get discouraged! Follow these instructions and your website’s gallery should be working properly in no time. First we’ll spend some time figuring out the problem and then we will fix the problem to make WooSwipe v3 compatible with Elementor.

Note: this fix is for WooSwipe version 3.0. If you are still using a previous version of WooSwipe earlier than v3.0 then please see this other article on how to Make WooSwipe Compatible with Elementor for help.

Why Isn’t WooSwipe Compatible with Elementor?

WooSwipe works by intercepting and inserting its own custom gallery in place of the default WooCommerce gallery. This strategy works well because it is the recommended way of changing default WordPress behavior. But in this case it doesn’t work because Elementor does the same thing first. This Github issue discusses the technical reasons behind it. The basic problem is that Elementor removes the default gallery output hook and outputs its own gallery with its own hooks leaving WooSwipe nothing to work with. And thus the improved WooSwipe gallery never displays on your website.

WooSwipe Gallery Before We Make WooSwipe v3 compatible with Elementor
WooSwipe Gallery Before Fix

Fixing the Problem – Making WooSwipe Compatible with Elementor

You are going to need to add some PHP code to your theme’s functions.php file (usually found in /wp-content/themes/YOUR_THEME/functions.php). We will follow the steps WooSwipe originally took with WooCommerce but change them to be compatible with Elementor.

// -----------------------------------------------------------------------------
// WooSwipe fix (since Elementor doesn't use the 'woocommerce_before_single_product_summary' hook that WooSwipe depends on)
// -----------------------------------------------------------------------------
add_action('wp_loaded', function() {
    if (class_exists('Wooswipe')) {
        // Remove the default featured image by returning empty HTML
        add_filter('woocommerce_single_product_image_thumbnail_html', 'RemoveDefaultWooCommerceGallery', 10);
        // 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', 'AddWooSwipeImages', 20);
    }
});
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 ('');
}
function AddWooSwipeImages() {
    $wooswipe = new Wooswipe();
    $plugin_admin = new Wooswipe_Public($wooswipe->get_plugin_name(), $wooswipe->get_version());
    $plugin_admin->wooswipe_woocommerce_show_product_thumbnails();
}

Overview

We hook into the “wp_loaded” action and use an anonymous function to only execute our code after all the plugins and the theme are instantiated. This ensures that both Elementor and WooSwipe are loaded and ready. Inside this anonymous function is a check to ensure that the “Wooswipe” class exists. We only run our code if the class exists in order to prevent causing PHP errors if WooSwipe is deactivated. And now that we know everything will load properly we are ready to write our code. The first two steps will remove the default featured image and default thumbnails. And the last step will output the images using WooSwipe.

WooSwipe Gallery After We Make WooSwipe v3 compatible with Elementor
WooSwipe Gallery After Fix

Clearing the Default Images

First, we will remove the default featured image by hooking our custom function “RemoveDefaultWooCommerceGallery()” into the “woocommerce_single_product_image_thumbnail_html” filter to return an empty HTML string instead of the main image HTML. However, we only want to return empty text once when Elementor tries displaying a featured image. Otherwise WooSwipe will also output an empty image and the gallery will break. That is why we use the WordPress “remove_filter” function inside our “RemoveDefaultWooCommerceGallery()” function to prevent this code from being run more than once.

Second, we need to remove the default thumbnail images. WooCommerce uses the “woocommerce_product_thumbnails” action to output its thumbnails and we need to stop that. We do so by using the “remove_action” function to prevent WooCommerce from calling its “woocommerce_show_product_thumbnails()” function. Please note that the “remove_action” function requires the hook name, callback function, and priority to exactly match the arguments sent to the “add_action” function.

Adding the WooSwipe Images

Finally, now that we have removed the default featured image and thumbnails we can output the WooSwipe images. We will use the same “woocommerce_product_thumbnails” hook from the previous step and call our “AddWooSwipeImages()” function. Inside this function we instantiate a new “Wooswipe” class and use that to instantiate a “Wooswipe_Public” class. We are then able to output the WooSwipe image gallery!

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