WooCommerce Snippet: Swap gallery and main images

Recently we’ve come across a situation where surprisingly WooCommerce does not have a seemingly key piece of functionality built into the platform which is whereby the main featured image and product gallery images are unable to be swapped around. However, have no fear we have come up with a pure Javascript based solution that by adding a snippet to your website, you can easily add a basic version of this functionality.

If you use a tool such as the wonderful Fluent Snippets, you can add a snippet of Javascript for use on the backend/wp-admin side of your website only with the following code:

(function($){

    let $image_gallery_ids = $( '#product_image_gallery' );
	let $product_images = $( '#product_images_container' ).find(
		'ul.product_images'
	);

    $("<a>").text("Put into gallery").appendTo("#postimagediv").click(function(){
        let attachment_id = $("#_thumbnail_id").val();
        let attachment_image = $("#set-post-thumbnail img").attr("src");
        let attachment_ids = $image_gallery_ids.val();
        attachment_ids = attachment_ids
						? attachment_ids + ',' + attachment_id
						: attachment_id;
        $image_gallery_ids.val( attachment_ids );
        $product_images.append(
            '<li class="image" data-attachment_id="' +
                attachment_id +
                '"><img src="' +
                attachment_image +
                '" /><ul class="actions"><li><a href="#" class="delete" title="' +
                'Delete' +
                '">' +
                'X' +
                '</a></li></ul></li>'
        );
        wp.media.featuredImage.remove();
    }).css({
        'margin': '.5rem'
    });

    $(".product_images li.image").each(function(){
       let li = $("<li>").appendTo($(".actions", this));
        $("<a>")
         .text("swap")
         .appendTo(li)
         .click(function(){
            let current_id = wp.media.featuredImage.get();
            let current_src = $("#postimagediv img").attr("src");
            let attachment_id = $(this).closest(".image").attr("data-attachment_id");
            wp.media.featuredImage.set( attachment_id );
            let attachment_ids = $image_gallery_ids.val().split(",");
            let index = attachment_ids.indexOf( attachment_id );
            if (index > -1) { // only splice array when item is found
              attachment_ids.splice(index, 1); // 2nd parameter means remove one item only
            }
            attachment_ids.push(current_id);
            $image_gallery_ids.val( attachment_ids.join(",") );
            $(this).closest(".image").attr("data-attachment_id", current_id);
            $("img", $(this).closest(".image")).attr("src", current_src).removeAttr("srcset");
        }).css({
            width: '30px',
            height: '20px',
            background: '#ccc',
            'border-radius': '5px'
        });
    })
    
})(jQuery);Code language: JavaScript (javascript)

Once saved and activated, underneath the featured image is an option to move this into the gallery which also removes the item from being a featured image. And also an option on each of the gallery images to swap the current featured image with the gallery image. Note upon clicking this the featured image may take a second to update due to the way WordPress works.

We hope this small snippet is useful in improving the way you manage your WooCommerce website.

If you need additional help with your WooCommerce store, feel free to contact us.