TP Woocommerce Product Gallery PRO

Installation

1. Unzip the downloaded zip file.
2. Upload the plugin folder into the wp-content/plugins/ directory of your WordPress site.
3. Activate TP Woocommerce Product Gallery PRO through the ‘Plugins’ menu in WordPress.
4. TP Woocommerce Product Gallery will add a new menu item called “TP Woocommerce Product Gallery” in wordpress menu. Here you are able to configure all the plugin settings.
5. Go to TP Woocommerce Product Gallery Settings
6. Go to License Tab and insert your License Key (a license key is e-mailed to you) and press Activate.
Your done!
Now go to Settings tab / Style tab and customize as you want.

Elementor

If you build your site with Elementor you can use the plugin shortcode in your template.

1. in Elementor select the shortcode widget and drag it to your templet.
2. use this shortcode [tp_gallery]
3. you can change the gallery width like this [tp_gallery width=”100%”]

Settings Tab

1. Display Thumbnail - select if you want to show / hide thumbnails.
2. Hide thumbnail if have 1 image - you can select if you want to hide image thumbnail if you have only one image in your product page.
3. SlidesToShow - this option let you choose the number of thumbnail you want to show.
4. Display Dots - this option will show Dots, you can hide Thumbnail (mentioned above) and show Dots instead.
5. Draggable - Enable mouse dragging.
6. Fade - Fade animation.
7. FocusOnSelect - Enable focus on selected element (click).
8. Accessibility - Enables tabbing and arrow key navigation.
9. Speed - Slide/Fade animation speed.
10. AdaptiveHeight - Enables adaptive height for single slide horizontal carousels.
11. Autoplay and AutoplaySpeed - this option let your product gallery Autoplay, the images will change after AutoplaySpeed milliseconds.
12. Arrows - this option let you choose to show arrows (next/prev) or hide them.
13. CenterMode - enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
14. Infinite - Infinite loop sliding, disable this option if you want to stop slider after last image.
15. Vertical - will display your thumbnails in Vertical mode.
16. Image size - will let you select from all your images sizes you have in your site.

Style Tab

1. Button arrow background - let you change your arrow background.
2. Button arrow color - let you change your arrow color.
3. Icons background - let you change your zoom and fullscreen icons background.
4. Icons color - let you change your zoom and fullscreen icons color.

Video Tab

1. Video Open Type - you can select 2 options for display your video, 1 - open video in nice popup, 2 - display video instead of big image.
2. Button Play background - let you change your Play Button background.
3. Icons background - let you change your zoom and fullscreen icons background.
4. LoadYoutubeThumbnail (on Lightbox) - You can automatically load thumbnails for youtube videos from youtube by setting loadYoutubeThumbnail true.

How to add video to your product?

1. Go to your product edit page.
2. Click “Product image”.
3. At the image meta fields you will see new filed “Video URL”, past your Youtube / Vimeo URL.
4. Select the correct source (Youtube / Vimeo) and close the window.
Your done! your video is saved now and you can see it on your site.

Zoom Tab

* With 4 type of zoom you can choose whatever you want.
1. Hover - active when client over the image with his mouse.
2. Grab - active when client grab the image with his mouse.
3. Click to activate - active when client click the image with his mouse.
4. Click to toggle - active when client click to toggle the image with his mouse.

Lightbox Tab

1. Active Lightbox - disable this option if you don't want lightbox.
2. Display Thumbnials - Enable thumbnails for the gallery.
3. Mode - Type of transition between images.
4. Speed - Transition duration (in milliseconds).
5. HideBarsDelay - Delay for hiding gallery controls in milliseconds.
6. Closable - Allows clicks on dimmer to close lightbox.
7. Loop - If false, will disabled the ability to loop back to the beginning of the gallery when on the last element.
8. Mousewheel - Change slide on mousewheel.
9. Display image attachment title - If false, will disabled the image attachment title on image.