TP Woocommerce Product Gallery PRO
Installation
After purchasing the plugin you will receive an email with the plugin files and License Key.
* If for any reason you have not received an email with the details above please contact us with your order id.
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.
Upgrade from free to pro
If you are using the free version of the plugin you need to turn it off and delete it then install the pro plugin.
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 templete.
2. use this shortcode [tp_gallery]
3. you can change the gallery width like this [tp_gallery width=100%]
WP Rocket
Delay JavaScript Execution compatibility exclusions
Go to Excluded JavaScript files text area, under the Delay JavaScript execution feature add this:
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/tp-woocommerce-product-gallery/public/js/tpslick.js
/tp-woocommerce-product-gallery/public/js/lity.min.js
/tp-woocommerce-product-gallery/public/js/jquery.zoom.min.js
/tp-woocommerce-product-gallery/public/js/jquery.mousewheel.min.js
/tp-woocommerce-product-gallery/public/js/lightgallery-all.min.js
/tp-woocommerce-product-gallery/public/js/woocommerce-product-gallery-public.js
tpslick
If used with Avada, the following needs to be excluded as well:
/uploads/fusion-scripts/(.*).js
Renew License Key
If your license key expired you can purchase a new key and replace it with the old key.
After you get the new license key go to your site (admin) go to plugin settings and press the “License” tab.
You are supposed to see the next button: “Renew the License Key”
1. Press the “Renew the License Key” button.
2. Enter your new License Key.
3. Press “Activate” button.
That’s it.
Plugin Settings
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 a new field “Video URL”, past your Youtube / Vimeo URL.
4. Select the correct source (Youtube / Vimeo) and close the window.
You're 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.