newestWooThumbsDownload, GPL happy version. Woocommerce comes with the product detail page image display function is not beautiful, not responsive, can not insert video, etc. Mainstream websites will basically add WooCommerce Product Gallery thumbnail plugin to beautify and enhance the function. Mainstream websites will basically add WooCommerce Product Gallery thumbnail plugin to beautify and enhance the image display function.
We have installed and compared more than 10 Product Gallery plugins, includingYITH WooCommerce Product Gallery & Image Zoom. Either it's not aesthetically pleasing enough or the functionality doesn't meet the needs, WooThumbs is the plugin that best meets our requirements, aesthetically pleasing, easy to set up, powerful and responsive.
WooThumbs Pros:
- Beautiful and stylish;
- Loading and displaying is fast and pages can be opened in seconds;
- Easy to set up and highly customizable;
- Responsive, with separate thumbnail directions for mobile, etc;
- Powerful features include the ability to insert videos, follow variable product thumbnails to switch photos, and more;
You can easily customize the display direction of product detail page thumbnails (horizontal and vertical), support image zoom function, responsive design, you can also insert videos and 360° panoramic images in the thumbnails. No jQuery, fast loading speed.
WooThumbs for WooCommerce settings interface ↓, customize the appearance and functionality as you wish!
Product image display has a variety of layouts to choose from ↓, optional slider to switch photos or directly display all the details of the picture.
If you select the slider, you can customize the position and number of thumbnails, either vertically to the left of the main image or horizontally below the main image.
Picture enlargement effect
Youtube, Vimeo, self-hosted and other videos can be inserted into product thumbnails on Woocommerce product detail pages.
It is also possible to insert 360° panoramic images (click on the picture below to see the effect, 360° panoramic images need to be pre-made).
strike (on the keyboard)Manually adjust the parameters to see the physical effectThe
What is GPL Plugin
This plugin is a GPL licensed product and is safe and legal. Click to learn whatGPL licenseClick to learnWordPress official website about the GPL. Simply put the plugin/theme source code open source sharing using the GPL agreement can be legally and freely changed, used, and distributed.
The company that owns the plugin/theme mentioned in the title of this item is not affiliated with us in any way, and the company has not licensed its products or brands to us. This product is a distribution of the plugin/theme mentioned in the title, created by a third party company/developer and redistributed by us under the terms of the General Public License (GPL).
We use the plugin/theme name for the sole purpose of identifying the plugin/theme on which this GPL merchandise is based, with the intention of helping users better understand the functionality and possible application scenarios of this product of ours, and in no way to impersonate or mislead. This merchandise is sold under and respects the terms of the GPL license agreement and ensures that users are aware that they are acquiring a distribution of the plugin/theme based on an open source license. They are allowed to view, modify and redistribute the software to promote its free use and development.
The company that owns the plugin/theme mentioned in the title of this item is not affiliated with us in any way, and the company has not licensed its products or brands to us. This product is a distribution of the plugin/theme mentioned in the title, created by a third party company/developer and redistributed by us under the terms of the General Public License (GPL).
We use the plugin/theme name for the sole purpose of identifying the plugin/theme on which this GPL merchandise is based, with the intention of helping users better understand the functionality and possible application scenarios of this product of ours, and in no way to impersonate or mislead. This merchandise is sold under and respects the terms of the GPL license agreement and ensures that users are aware that they are acquiring a distribution of the plugin/theme based on an open source license. They are allowed to view, modify and redistribute the software to promote its free use and development.
Plug-in Security
Purchased directly from foreign formal channels, do not modify the source code. All plug-ins we use to build their own sites, used in a number of sites, safe, stable and reliable.Worried about plugins being insecure? Check out theIs WordPress Cracked Plugins/Themes (Green, GPL, Nulled) Safe?The
- pass (a bill or inspection etc)Virustotal Antivirus Verification.;
- pass (a bill or inspection etc)WordfenceSource code review;
- pass (a bill or inspection etc)SucuriSecurity antivirus scanning.
Updated methodology/records
General new version out within 24 hours of this site will be updated, then please visit this page directly to download the new version of the installation package to upload the update, the product title will be written on the latest version number. Can only be updated by uploading the installation package, mind do not shoot, if you want to update online please support the original version of the plug-in official website to buy.
Click to view the update log of this plugin (Changelog)The
WooThumbs Download Terms of Purchase
This site plug-in purchased from foreign sites, the purchase price is$4.99/eachThe validity period is 2 years. Foreign trade star uniform selling price of 19 yuan / a, valid for life, and spend a great deal of effort to produce the use of tutorials also provide manual Q&A service, absolutely value for money.
Plugin is only for learning and communication research use, virtual products have reproducibility, once sold will not be refunded, please move to the Terms of Service for details. Please log in before purchasing, refresh the page after purchase to get WooThumbs download permission.
Foreign trade star for the purchase of users to provide after-sales service, plug-in use of the process of any questions please leave a message in the comments below, there are questions and answers.
Installation/Enabling Methods
Install the downloaded zip installer directly to enable the plugin.
Installation method 1: Upload and install
Find and click "Plugin">"Install Plugin" in the left menu column of the website background, then click "Upload Plugin" in the upper left corner, upload the downloaded zip installation package and click "Install Now", after installation, click on the"Enable plug-ins"Complete the installation.
Installation method 2:FTP installation
Unzip the plugin zip and place the unzipped obtainedfile (paper)Upload to the plugins directory (xxx.com/wp-content/plugins).
Find and click "Plug-ins" > "Installed Plug-ins" in the left menu column of the website background, find the plug-in in the plug-in list, and click "Enable".
Prompt activated↓:
If the installation prompts the content of the following figure, ignore the need to care about, all the functions of normal use.
Frequently Asked Questions & Solutions
If you are prompted with the content of the following picture, please ignore it, all functions work normally.
If you want to remove the above prompt, put the following code into the (child) theme'sfunctions.phpInside you can: Appearance > Theme Editor, select (child) theme in the upper right corner, click to open the functions.php file, add the following CSS at the end of the document, click to save changes.
/* Hide error alerts */ function admin_mycss() { echo' .fs-notice.updated.success.fs-has-title.fs-slug-woothumbs.fs-type- plugin{display:none!important;}'; } add_action('admin_head', 'admin_mycss');Note: If you have already added the code in the green box below, you don't need to add it again this time (e.g. Rank math plugin to hide the error alerts has also added the code in the green box). Just copy and paste the code in the blue box directly into the code in the green box. After saving and refreshing the page, the tip will disappear.
1- 2 sets of product images appear on the product detail page for themes such as Astra
Astra has been updated to version 3.9 with a lot of new features and designs, including 2 new slider layouts for product detail page thumbnails based on the original 3 layouts in the red box below. These 2 layouts are not compatible with WooThumbs at the moment, if you choose slider thumbnails, it will result in 2 sets of thumbnails on the product detail page. Simply change to one of the original 3 layouts to solve the problem. Modification path: Appearance > Customize > Woocommerce > Single Product > SINGLE PRODUCT GALLERY.
2- Incomplete display of images after adding videos
If you add a video if the following picture of the main picture display incomplete situation, because the ratio of the video thumbnail is not 1:1. Note: It is recommended that all product images are made into a 1:1 square, the display effect is the best, not easy to error.
Just add the following CSS code to the product detail page, or add it directly to the theme's custom CSS. This will turn the video cover image into a square and restore normal display.
.plyr__video-embed, .plyr__video-wrapper-fixed-ratio { aspect-ratio: 1/1!important;}
3- Improve the speed of thumbnail display
WooThumbs coding quality is very high, loading speed is very fast, after we test the thumbnail as well as the main image display speed has been very fast. If you feel that the display is slow, it may be the page itself is slow to load, it is recommended to refer to the tutorial to optimize theReally Useful WordPress Speed Optimization Tutorials".
Thumbnails as well as the first main image should be excluded from delayed loading, which will further speed up loading. Note: Remember to exclude Woothumbs' JS from being delayed loaded if the delayed JS loading feature is used.
4- Errors displayed inside the Elementor editor
After enabling the plugin, using elementor to create/edit detail page templates product image widgets are displayed incorrectly as shown below. This is a bug, ignore it, frontend display normally. Tap that eye next to the Product lmages widget to hide the Product lmages widget to avoid disturbing the view of the edit detail page template.
By modifying the Woothumbs plugin settings (Size needs to be set to 100%), just view the effect directly in the frontend. the display inside the Elementor editor can be ignored.
5- Beautify the look and feel
The default style thumbnail style is not beautiful enough, especially the selected thumbnail border thickness and color is not very beautiful. The following picture is the effect after we beautify, if you also like the effect of the following picture, according to the following tutorial settings.
First in the plug-in "Display" settings, change the "UI Foreground Colour" to your color, this set the icon color in the picture above. It is also recommended to set the "UI Background Colour" to#9d9d9dThe
Finally add the following CSS to theexterior condition>customizable>Additional CSS. Note: The 14th line of the#edb932is the current thumbnail border color, and lines 22 and 26 of the#edb932is the previous/next arrow section
The regular/mouse-over background color.
Modify the above 3 colors as needed (modification method: replace the color code with the code of the color you want), it is recommended to set them to the same color as the "UI Foreground Colour".
/* Modify Woothumbs thumbnail style */ @media (max-width: 767px){.iconic-woothumbs-all-images-wrap.iconic-woothumbs-reset.iconic-woothumbs-hover-icons.iconic-woothumbs- zoom-enabled.iconic-woothumbs-all-images-wrap--thumbnails-below {margin-top: 0!important; .iconic-woothumbs-thumbnails-wrap.iconic- woothumbs-thumbnails-wrap--horizontal {margin-left: 8px!important;margin-right: 8px!important;}.iconic-woothumbs-thumbnails__slide-- active .iconic-woothumbs-thumbnails__image-wrapper:before {border-width: 1px!important;}.iconic-woothumbs-thumbnails__slide--active . iconic-woothumbs-thumbnails__image-wrapper:after{border-width: 1px!important;border-color:#edb932!important;opacity: 0!important ;}.iconic-woothumbs-thumbnails__image-wrapper:after {border: 1px solid #a7a7a7!important;opacity: .3;}.iconic-woothumbs-thumbnails- wrap .iconic-woothumbs-thumbnails__control {background-color:#edb932!important;opacity: .85;}.iconic-woothumbs-thumbnails-wrap . iconic-woothumbs-thumbnails__control:hover {background-color:#edb932!important;opacity: 1!important;}.iconic-woothumbs- thumbnails-wrap .iconic-woothumbs-thumbnails__control--up{line-height: 16px; }.iconic-woothumbs-thumbnails-wrap . thumbnails__control--down{line-height: 17px; }.iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-thumbnails__control svg{height: 7px! important; }.iconic-woothumbs-thumbnails__control path {stroke: #ffffff!important; }.plyr__video-embed, .plyr__video-wrapper-fixed- ratio {aspect-ratio: 1/1!important;}
