The Lab WooSwipe

WooSwipe

WooSwipe is a clean product gallery for WooCommerce that uses PhotoSwipe and Slick Carousel.

09.12.15
WooSwipe

WooSwipe is a product gallery and should work out of the box with your WooCommerce gallery settings. This gallery is built using PhotoSwipe from Dmitry Semenov and Slick Carousel.

Simply adjust your image sizes in WooCommerce > Settings > Products > Display. You may need to rebuild your thumbnails with a plugin like Regenerate Thumbnails.

 

Features

  • Responsive
  • Keyboard control
  • Full image size
  • 2 colour options
  • Settings located in WooCommerce > WooSwipe

 

Using Shortcodes

Want to easily load the gallery using a product page shortcode? Use the below shortcode (making sure you enter the correct product ID)

[product_page id="1"]

Additionally, put the below code in your functions.php to avoid the first product image to be the same as the featured image.

function remove_featured_image($html, $attachment_id ) {
global $post, $product;
$featured_image = get_post_thumbnail_id( $post->ID );
if ( $attachment_id == $featured_image )
$html = ”;
return $html;
}
add_filter(‘woocommerce_single_product_image_thumbnail_html’, ‘remove_featured_image’, 10, 2);

 

Help! The gallery doesn’t work!

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts. Try the following:

  • Disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  • Switch to the most recent WordPress base theme to rule out any theme-specific problems.
  • Use a browser debugger to find the error (Chrome is the best). This may help you track down the conflict.
  • ADVANCED! If it’s a theme issue you may have some scripts embedded in your theme that are causing a conflict. To disable these look inside the header.php, footer.php or functions.php files.

 

Wanna try it? View the demo or download.

Dean Oakley

Written by Dean Oakley

Dean founded Thrive Digital in 2006 and has worked in the design and development space ever since. He received 1st Class Honours in a Bachelor of IT and oversees all technical aspects of our projects.

Join the conversation

Alexis Noel says:

Hello!

First off, thank you for developing this product gallery slider. I have been searching high and low for a slider, and yours is perfect.
I am having an issue where if I click on one of the images in the slider, it will create a duplicate of the main image, and I will have to refresh the page for it to revert back to its original feature. I do not have any other slider programs installed, I have all the updates for my theme (Kadence Virtue theme).
You can see the issue on this page:
http://www.3dthrift.com/product/mingda-glitar-4c-copy-new-5c/

Thanks,
Alexis

Dean says:

Hi Alexis. It seems to be working ok for me. What browser do you see this issue in?

Darren says:

Nice plug-in…what I was looking for. However, if we can nail the issue of the original Woocommerce gallery showing up at the same time as your gallery, I’d be completely set! essentially, I have two galleries going on at the same time. Yours up top…Woo’s right below it. See link above.

Thoughts on this?

Dean says:

Hi Darren. It might be a gallery built into your theme. I have disabled the built in gallery. What theme are you using?

Darren says:

Hey Dean. It’s Classico theme…but what do you mean you “disabled the built-in gallery”? I don’t see any changes on the page.

Thanks for the promptness!

Dean says:

I have disabled the gallery built into WooCommerce with my plugin. The gallery you are seeing might be part of your theme not WooCommerce.

Darren says:

I see. it very well could be. How can we fix it? Any ideas? For yucks, I disabled lightbox and gallery images with my themes options…it did nothing. :(

Darren says:

Figured out it was Masterslider that is causing the conflict. Any thoughts on this? I can’t just “deactivate” Masterslider as a large portion of the site uses it. Thanks Dean!

Dean says:

You could contact the theme developer or you may need a developer to remove the code from the theme.

Darren says:

I don’t quite follow you. This isn’t a theme related issue,. At first I thought it was, but it wasn’t. I have contacted the theme developer and they concur with me on this. If we can’t get the problem rectified, then I guess i won’t be able to use the plugin…which would be sad. I like it. Thanks Dean.

Darren says:

Scratch that. I figured it out. :)

Dean says:

Your theme has it’s own a built in image gallery. So there is no way my plugin could be setup to override this as it’s unique to that theme. My plugin overrides the standard gallery built into the plugin.

Darren says:

Yes Dean…I realize that. And that isn’t what my point was. But right now, it’s a moot point. My theme’s gallery has been disabled and trust me, there has been plenty of bouncing support emails since I had written you to figure out this issue. All works well together now except one thing…when I add a fourth image to your gallery…the site becomes un-responsive.

Ideas?

Dean says:

Please post a link so I can see the problem.

Darren says:

Hey Dean,. I apologize for being so vague. I realized that after I had sent the message. Let me be a tad more clear on what happens.

First link:
http://ffwdconnection.com/woocommerce/product/vader-aluminum-racing-rods/

This link to the first page works fine…but with only three images total uploaded for that product. One featured…and two in gallery.

Second link:
http://ffwdconnection.com/woocommerce/product/cylon-aluminum-racing-rods-2/

Now this one is basically the same layout page as the first…but with 3 images total uploaded. One featured and three in gallery. Notice how there are horizontal scroll bars evident when re-sizing the browser (FF in this case) to roughly tablet and mobile device size.

First link never shows those horizontal scroll bars.

And while we’re on the subject, try refreshing the page on those links when you get the chance…you’ll find that the thumbnails go “Large” before “adjusting” to thumbnails when loading. Makes for some wacky loading of those pages.

FYI…all files related to my themes gallery have been removed…as instructed to do by my theme developer, to revert back to the original Woocommerce’s gallery…which that it does when de-activating your plugin.

Thanks a bunch Dean for your support and patience! Need any more info, please ask.

Jasper says:

Geat plugin, exactly what i am looking for. Except for one thing. It does not work with variable product. After choosing a product variation and the main image is updated. The gallery shows the wrong image when the lightbox is opened. Is there a way to fix this?

Dean says:

Hi Jasper. Hmm, do you have a plugin that changes images on variations? Can you post a link?

Jasper says:

Hi Dean,

Sorry i cannot send you a link because my webshop is still under development. The main image is replaced with the variation image by default. This functionality comes with the latest Woocommerce. When this happens the data-ind is not send to the main-image and so when the lightbox is opened, you will get the wrong image.

I have found a workaround with Javascript and i think this minor change could really improve your plugin. If you wish, you can send me an e-mail, so i can contact you via skype / e-mail, and i will show you the exact problem.

Dean says:

Hi Jasper. Ah, I wasn’t aware of this new feature! I will check it out.

Phivos says:

Hello Dean,

Thank you for developing WooSwipe.

I am using Visual Composer as a template for my e-commerce shop. I would like to use WooSwipe for my product gallery but it doesn’t work with Visual Composer. Is there a hack/trick to make it work?

Thank you,
Phivos

Dean says:

Sorry I haven’t used VC before. Maybe try this plugin http://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927 it also has Photoswipe.

James Kemp says:

Hey, thanks for mentioning WooThumbs. The latest version is available here: https://iconicwp.com/products/woothumbs/

I can confirm that it works with Visual Composer via a shortcode [woothumbs-gallery]

Ignas says:

Hello Dean,

Great plugin. I was wondering, though. Is there a way to display an image’s title or preferably caption when opening an image in the light box?

Dean says:

Hi Ignas. This would be a nice feature. We will try to add it in future versions.

Philip says:

Potential bug: https://search.google.com/structured-data/testing-tool# cannot find the image when Wooswipe is active.

Thank you for great plugin.

Dean says:

Thanks for finding this issue. It would be great if you could look into what needs to be done to fix this. Also see the GitHub page https://github.com/thriveweb/wooswipe

Jan says:

Hi there,
I just installed WooSwipe on one of my sites and overall I’m really happy with it, but there is just one thing that nags my customer: he’d like to deactivate the lightbox. He just wants the pictures loaded into the frame. So I’ve been wondering if there is an easy way of deactivating just the Lightbox functionality of WooSwipe?

Thanks in advance :)

Dean says:

Hi Jan. Sorry not at this stage. Have you tried that default gallery? You can turn off the lightbox with that in the settings.

I like to deactivate the lightbox. Just wants the pictures loaded into the frame. So I’ve been wondering if there is an easy way of deactivating just the Lightbox functionality of WooSwipe?

Thanks in advance :)

Zen says:

The plugin works fine but it is adding two versions of fetured image in the beginning of the product gallery. What can I do?

Dean says:

Hi. Sorry for the delay. It automatically ads the featured image into the gallery. Do you have it in your gallery also?

Please post a link if you can.

Sander says:

Hi, I love the simplicity of the plugin. However, when I activate the plugin all goes well but the sale badge disappears.

globalfurniture-elst.nl/nieuw/product/bowl-salontafel-metaal-hout/

I think it’s theme related, but a push in the tight direction would help allot.

Dean says:

Hi. Sorry for the slow reply. The Sale badge would be a custom addition to your theme. It’s not a standard feature of WooCommerce sorry.

Chris says:

Hi,
very light and good plugin.
but it is not working with my website(worldpress)
https://drive.google.com/open?id=0B6L9QZ3Td5YjUEh2TlM3RS1qbFE
https://drive.google.com/open?id=0B6L9QZ3Td5YjWnhwakJPdmN2QU0

by the way, is it possible to make it same to the amazon one? (I like to responsive , you can switch the photo directly and single tap to bigger size, double tap to zoom, or pinch to zoom). I think your are very close to them, just a few more step..
https://www.amazon.com/gp/product/B01CEFE54A/ref=s9_acsd_nps_hd_bw_bHWp0cV_c_x_w?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=merchandised-search-4&pf_rd_r=GNSBGAQA2C6VPT6DVR8B&pf_rd_t=101&pf_rd_p=e5664ea1-0bf4-58a5-bebb-a2144367b359&pf_rd_i=16059258011

Dean says:

Hi Chris. I’ve replied to your email.

Marcin says:

Hi, I’ve put your plugin into my website.
Keyboard control works well but I have 1 option more.

I need to have images keyboard control on single page ( not only in pop-up image view )
I would like to have possibility to keyboard images scroll when customer is on single_product_page too
Like this one:
http://ciuchuj.pl/produkt/olowkowa-czarna-spodnica-z-falbanka/

Please help me how to customise your plugin.

Dean says:

Hi Marcin. You can contribute here https://github.com/thriveweb/wooswipe – You could also make a feature request here https://github.com/thriveweb/wooswipe/issues

lalit pendhare says:

Hi, I have required thumbnail also in zoom image(when popup). Do you know, how can I possible this feature. I tried but getting no success.Also great if possible next and previous button on product gallery page.

Dean says:

Sorry I’m not sure what you mean. Can you post a link to demo the problem?

balvan says:

Is there anyway to cancel the slick-slider part of this plugin?
The arrows don’t work on my website,m probably because it’s RTL.

Dean says:

Hi. No sorry. I’d be interested to have a look if you can post a link?

balvan says:

Hi,
I don’t have it running because it doesn’t work.
Only tested on local machine.

Valerie says:

Hi,
I installed the plugin to have a slider of what my product can do below the product image. I sell moulding products and I want to give ideas to my clients of what my moulding kit can do. I put all the images that I want into the slider into the product gallery image of my product page and a slider is created like I wanted. There’s a problem though: each photos that i put in my gallery (to be in the slider) are big and the slider is only below all the photo. I don’t want that. I only want the photo of my product to be big and the others (the ones from the product gallery image) will be little in the slider. Is it possible to do so with your plugin? If so, how do I fix the problem? Can you help me?

Here is my page to help you understand my problem. http://laissezvousmouler.com/en/shop/evolution-kit/
Thanks

Dean says:

Hi. Firstly have you rebuilt your thumbnails? You theme might have some issues. I haven’t seen two lots of images displayed before.

Zoe says:

Excellent Plugin! Thank you very much. It’s light and fast and works straight out of the box.

The only thing that could make this even better (and I’d be first in line to purchase if this plugin evolved to a PRO version as a result…) is to have the Variation selector menu automagically update to the Product Variation Title when the thumbnail it is associated with is selected in the gallery.

Dean says:

Hi Zoe. I’m glad your liking it. We will try to add this as a feature in future updates.

Daniel says:

Hello there!
I’m not a coder or anything of that sort so WordPress and plug-ins have been great for me. Your plug-in was exactly what I’ve been looking for. I just seem to have one issue of after installing the plug-in it works great but it seems to have created two images of the main image. So now there are duplicates of the main image. Any help resolving this would be greatly appreciated! Thanks so much!

Dean says:

Hi Daniel. The plugin doesn’t create any new images. It may be that your old gallery worked differently and didn’t include the featured image. Can you check if your image is duplicated in the featured image and gallery?

Daniel says:

Thanks for replying Dean, I went through and checked and the image was not duplicated in the featured image or gallery. I’m using the plugin for products images and besides the double main image it’s working great

Dean says:

Can you please post a link to demo the problem. Let me know what device and browser you are seeing this on please.

Ben says:

Hi, great plugin, thank you. Just wanted to check how I can change the width of the main product image? Any changes I make in Woocommerce settings make no difference. I need to reduce the width as currently the image is just too large and goes off screen. Any advice would be appreciated.

Dean says:

Hi Ben, could you post a link? It might be an issue with your theme. Also did you rebuild your thumbnails after you changed the settings?

Val says:

Hi, I want to thank you first to realize this nice plugin.
then i need to ask you help, I use the plugin and it works perffect in the product page itself in woocommerce (so if I open a page its super, from desktop and mobile).
problem come when I use shortcodes to show product in a article: [product_page id=”703″]
when i use this then the lightbox it doesnt work properly anymore.

do you have any tipp for me? or as you wrote i should try to deactivate scripts?

thanks a lot for your help, i really need to solve it because i didnt found a plugin cool like yours =)

ciao
Val.

Dean says:

Hi Val. Sorry I haven’t tested this with short codes. I’ll that to our todo list.

love spells says:

Hello,I check your new stuff named “WooSwipe – A free WooCommerce Product Gallery Plugin” on a regular basis.Your story-telling style is awesome, keep it up! And you can look our website about love spells.

lineagatuna says:

Hello!

Marvellous plugin, I love it. I just have one question: how can I make the lightbox float above the header/menu?

Thanks!

Dean says:

Thanks :) This fix should have come through with the last update. I’m pushing this through now!

Roman says:

Thank you for your work! I have the same problem:
“how can I make the lightbox float above the header/menu?”
Is there a fix? may I fix it in code?
Thank you!

Dean says:

Hi Roman,

This should be fixed in the latest version. Do you a link to demo the issue?

Nicole says:

Hi! Great plugin! Unfortunately the plugin isn’t working on screens smaller than 765 px. On mobile, the image doesn’t pop up. Here is the link:

http://negorporation.com/sandbox/ofinta-tech/sparkles-household/product/happy-ninja-2/

I would appreciate if you can help me as soon as possible. Thanks!

Dean says:

Thanks Nicole. If you inspect the element when smaller than 765 px – you will see you have a div covering the image. It’s not an issue with the plugin but an issues with your layout and css.

Nicole says:

Dean, could you please show me which div you’re referring? Thanks so much!

Dean says:

In Chrome shrink your browser down to smaller than 765 px then right click on the gallery image and inspect. It will take you to the div. I hope that helps.

Nicole says:

I got it. Thanks so much for your help!

Nicole says:

is there any setting for making the pop-up responsive?

Dean says:

It looks like you have another popup showing with the zoomLens. You might be able to disable it in your theme settings. See the source http://photoswipe.com/ it is very responsive and mobile friendly.

Nada says:

Hello there, thank you for the plugin its working great with me.. stylistically speaking is there a way I can change the size of the images (not the main one, the smaller ones inside the slider) and reduce the space between them? please see here: http://zia-online.com/wp/product/arabesque-harem-pants/

the only resize options i can find are for the big main image but none for the others. Thanks for your help.

Dean says:

Hi Nada. The image size options are in the WooCommerce settings. https://github.com/woocommerce/woocommerce/wiki/Customizing-image-sizes-in-3.3

But it looks like your theme has two galleries running. When I click a thumbnail I got a different popup that is not part of our plugin!

Tiff says:

GREAT plugin worked perfectly on install, just having one issue. Wondering why the slider feature is not showing an arrow on any browser but and empty box. Please advise. Thanks !

Tiff says:

see product page I am referring to here http://staging.classycovers.net/product/poly-linens/

Dean says:

Hi Tiff. It looks like your theme styles are overriding the plugin styles for these arrows. You might need a developer to fix this or using another theme, sorry.

Keegan says:

Hey there on my website at http://gvdplanhub.com.au/product/annan-skillion/ the plugin won’t open a lightbox for my second image. Any ideas?. Email me for the password for site :)

Dean says:

Hi Keegan. It looks like your theme has a built-in gallery that is still running. The pop up shown is not our plugin. We can only disable the built-in gallery that is part of WooCommerce.

Switch to the Twenty Eighteen theme to rule out any theme-specific problems. If it is a conflict with the theme please contact the theme developer for support.

Sam says:

Hi:

I have installed your plug in. It works like a charm on mobile version. However on the desktop version in all produc galleries the right arrow does not display. I am only getting the left arrow to display. Can you please help with this? Why do you think this is?

Regards

Dean says:

Hi Sam. It sounds like a CSS conflict with your theme. Can you post a link to demo the issue?

WooSwipe is installed on a Beaver Builder template but it appears that it only works on Chrome and Internet Explorer / Edge but not on Firefox.

I’ve worked with Beaver Builder tech support and they assure me that the problem is with the plugin.

Can you please check into why I can’t scroll through the product gallery images.

Here’s a good sample page with a lot of gallery photos:

https://diyindustries.staging.wpengine.com/product/solid-floor-mark/

Thanks,
Trevor

Dean says:

Hi. Hmmm looks like there might be a bug with firefox. I’ll look into it.

José says:

I have use the shortcode to show the product in a page, but the gallery doesnt work. Could you help m? Thanks

Dean says:

Hi. Sorry I don’t think it will work with a shortcode. I haven’t tested for this. It’s on our todo list https://github.com/thriveweb/wooswipe/issues/20

José says:

I finally found a solution, is add the javascript in the page. Changing the line 154: if ( is_woocommerce() && is_product() || is_page( 7376 ) || is_page( 6764 ) ) {

is_page (id of the page)

I hope is usefull.

Sam says:

Hi:

Your plug in work great. However, I wonder if the right and left (or next and previous image) arrows could be placed over the image and not at the edge of the screen on either side. Do you have some css that can create this effect nicely?

See example here where you can see what the arrows look like on my website when you click an email https://www.samuelsotiega.com/product/snowfall/#&gid=1&pid=4

I hope to hear back from you soon. Thanks in advance

Ilias says:

Hello Dean,

Great plugin. I was wondering, though. Is there a way to display the image’s caption when opening an image in the light box?
You have as a to be, planned, feature. Is it going to be realized?

Thank you in advance.

Matt says:

Hi Dean,

Many thanks for this plugin.

Would it be possible to add hover zoom functionality?

Dean says:

Hi Matt. No as this is not really a mobile-friendly feature.

Matt says:

Ok, many thanks for your reply dean. My only other suggestion would be to add some opacity to the image that is not selected. Removing the opacity on hover.

vietnam hair says:

If your site pleases the visitor then Google and the search engines are also satisfied with your site. And they will increase the ranking for your site.

Choose a theme that meets your requirements, but do not overdo it. The speed of the site will be improved if you choose a lightweight and consistent interface. Since then, the ranking of the site has also improved.

Joey says:

Hi Dean,

many thanks for this plugin, but it doesn’t work in my website. would you please help me? the gallery thumbnails get problem, i used the plugin AJAX thumbnail rebuild to rebuild the gallery thumbnail size with 100*100, it still couldn’t show the full image. and the pre/next arrows have problem too, it is not like your demo at the edge of right/left…i don’t know what’s wrong.

Joey says:

Hi Dean,

many thanks for this plugin, but it doesn’t work in my website. would you please help me? the gallery thumbnails get problem, i used the plugin AJAX thumbnail rebuild to rebuild the gallery thumbnail size with 100*100, it still couldn’t show the full image. and the pre/next arrows have problem too, it is not like your demo at the edge of right/left…i don’t know what’s wrong.

Hi, I’m using your plugin on this site:

https://www.socome.com/prodotto/mono-k/

how can I change the thumbnail display settings under the main photo so you can see less preview products and leave more air to display the scroll arrows.
Thank you

Dean says:

Sorry, I’m sure exactly what you want here. Have you changed to another plugin?

ashley says:

Hi Dean,
many thanks for this plugin, but it doesn’t work in my website. would you please help me?
http://beequeenhair.com

Dean says:

Hi Ashley,

Is this one of your products? It looks unusual for a WooCommerce product. Your theme might be already customised and our plugin is not able to find the standard gallery.
http://beequeenhair.com/products/24-inches-weave-hair-extensions/

A says:

Hi Dean,

What’s the minimum image dimension compatible with this plugin? I noticed that only on desktops, when I click on any 1024×730 px images, they get resized to a slightly bigger size and thereby blurring them. Is there a way to stop it from resizing images on desktops? This doesn’t seem to happen on our larger images (2048x1460px). Thanks in advance for any ideas!

Tony says:

Hi Dean,
I’ve been using your plugin, but I’m not certain it’s working properly on my woocommerce site. The pictures don’t scale up from clicking on the thumbnails, and only the main picture can be clicked to enter the viewing gallery. Do I need to disable lightbox, or what do you think might be causing this?
Thanks in advance,
Tony.

Dean says:

Hi Tony,

Hmm that is odd, I haven’t seen that issue before. There is nothing over the thumbnails blocking the click… Can you try to find the source of the conflict by trying the below.

Switch to the Twenty Nineteen theme to rule out any theme-specific problems. If it is a conflict with the theme please contact the theme developer for support. Our plugin can only disable the built-in Woo gallery.

Failing that please try to disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).

Paul Swafford says:

just quietly the fix code for woo swipe hide the featured image is good but you’ll need to change out the ’ for ‘ .. caught me out! Cheers for this fix .. maybe build it into a future release?

Dean says:

change out the ’ for ‘ – Sorry can you clarify?

Nick Pitts says:

Trying to get WooSwipe to work alongside my Divi theme. They have asked if WooSwipe includes a shortcode so that we can easily embed it in a code module in a 2 column setup?

TJ says:

Hello, I’ve been using wooswipe successfully for several years, thanks. I’ve just discovered there’s no navigation or scrolling happening on mobile now, and only the first image in the gallery is viewable. Any tips on how to rectify this, please?

Leave a Reply