WooSwipe should work out of the box with your WooCommerce gallery settings. Simply adjust your image sizes in WooCommerce > Settings > Products > Display. You may need to rebuild your thumbnails.
Plugin settings are located WooCommerce > WooSwipe
WooSwipe Features:
- Responsive
- Very Mobile Friendly
- Keyboard control
- Full image size
- 2 colour options
View a working demo here
download the plugin
Want to contribute? See the GitHub repo github.com/thriveweb/wooswipe
—
Shortcode:
The gallery will load when you use a product page shortcode such as – [product_page id=”703″]
—
Add this code to 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.
You can try:
- To disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
- Switch to the Twenty Fifteen theme to rule out any theme-specific problems
- [advanced] Use a browser debugger to find the error. This may help you track down the conflict. Chrome is the best.
- [advanced] If it’s a theme issue you may have some scripts embedded in your theme. To disable these look inside the header.php, footer.php or functions.php
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
Hi Alexis. It seems to be working ok for me. What browser do you see this issue in?
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?
Hi Darren. It might be a gallery built into your theme. I have disabled the built in gallery. What theme are you using?
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!
I have disabled the gallery built into WooCommerce with my plugin. The gallery you are seeing might be part of your theme not WooCommerce.
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. :(
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!
You could contact the theme developer or you may need a developer to remove the code from the theme.
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.
Scratch that. I figured it out. :)
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.
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?
Please post a link so I can see the problem.
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.
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?
Hi Jasper. Hmm, do you have a plugin that changes images on variations? Can you post a link?
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.
Hi Jasper. Ah, I wasn’t aware of this new feature! I will check it out.
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
Sorry I haven’t used VC before. Maybe try this plugin http://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927 it also has Photoswipe.
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]
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?
Hi Ignas. This would be a nice feature. We will try to add it in future versions.
Potential bug: https://search.google.com/structured-data/testing-tool# cannot find the image when Wooswipe is active.
Thank you for great plugin.
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
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 :)
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 :)
Hi Stoyko. See https://thriveweb.com.au/the-lab/wooswipe/#comment-114215
The plugin works fine but it is adding two versions of fetured image in the beginning of the product gallery. What can I do?
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.
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.
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.
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
Hi Chris. I’ve replied to your email.
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.
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
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.
Sorry I’m not sure what you mean. Can you post a link to demo the problem?
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.
Hi. No sorry. I’d be interested to have a look if you can post a link?
Hi,
I don’t have it running because it doesn’t work.
Only tested on local machine.
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
Hi. Firstly have you rebuilt your thumbnails? You theme might have some issues. I haven’t seen two lots of images displayed before.
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.
Hi Zoe. I’m glad your liking it. We will try to add this as a feature in future updates.
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!
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?
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
Can you please post a link to demo the problem. Let me know what device and browser you are seeing this on please.
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.
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?
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.
Hi Val. Sorry I haven’t tested this with short codes. I’ll that to our todo list.
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.
Hello!
Marvellous plugin, I love it. I just have one question: how can I make the lightbox float above the header/menu?
Thanks!
Thanks :) This fix should have come through with the last update. I’m pushing this through now!
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!
Hi Roman,
This should be fixed in the latest version. Do you a link to demo the issue?
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!
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.
Dean, could you please show me which div you’re referring? Thanks so much!
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.
I got it. Thanks so much for your help!
is there any setting for making the pop-up responsive?
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.
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.
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!
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 !
see product page I am referring to here http://staging.classycovers.net/product/poly-linens/
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.
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 :)
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.
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
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
Hi. Hmmm looks like there might be a bug with firefox. I’ll look into it.
I have use the shortcode to show the product in a page, but the gallery doesnt work. Could you help m? Thanks
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
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.
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
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.
Hi Dean,
Many thanks for this plugin.
Would it be possible to add hover zoom functionality?
Hi Matt. No as this is not really a mobile-friendly feature.
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.
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.
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 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
Sorry, I’m sure exactly what you want here. Have you changed to another plugin?
Hi Dean,
many thanks for this plugin, but it doesn’t work in my website. would you please help me?
http://beequeenhair.com
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/
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!
Many thanks plugins
This plugins is verry wonderfull
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.
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).
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?
change out the ’ for ‘ – Sorry can you clarify?
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?
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?