Home » Plugins / Themes » Woocommerce Product Thumbnails Plugin WooThumbs Download, v5.8.0, GPL License
WooThumbs Download

Woocommerce Product Thumbnails Plugin WooThumbs Download, v5.8.0, GPL License

This content is viewed at the price of19yuan (free for VIPs), please first
All paid content on this page can be viewed/downloaded forever after purchase
Article List

LatestWooThumbsDownload, GPL Happy Version, Woocommerce's own product detail page image display function is not beautiful, not responsive, can not insert video and so on. Mainstream websites 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 not beautiful enough, or the function does not meet the needs, WooThumbs is the most can meet our requirements of plug-ins, beautiful, easy to set up, powerful and responsive.

WooThumbs Benefits.

  1. Aesthetics, fashion.
  2. Fast loading and display, pages can be opened in seconds.
  3. Simple setup and a high degree of customizability.
  4. Responsive, with separate thumbnail directions for cell phones, etc..
  5. Powerful functionality to insert videos, follow variable product thumbnails to switch photos, etc..

You can easily customize the display direction (horizontal and vertical) of the thumbnails on the product detail page, support the image zoom function, responsive design, and also insert videos and 360° panoramic images in the thumbnails. jQuery-free, fast loading speed.

WooThumbs for WooCommerce settings interface↓, customize the look and feel as you wish

Pasted 2


Product images are displayed in a variety of layouts available ↓ with an optional slider to switch photos or to display all details directly.Pasted 195


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.

Pasted 130


Image enlargement effect

Pasted 1


You can insert Youtube, Vimeo, self-hosted and other videos in the product thumbnails of Woocommerce product detail pages.

Thumbnail video

You can also insert 360° panoramic images (click the image below to see the effect, 360° panoramic images need to be made in advance).

360° image

ClickManually adjust the parameters to see the physical effect.


What is GPL plugin

WoothumbsIt is a GPL licensed product and is safe and legal. Click to learn what isGPL AgreementClick to learnWordPress official website about GPL. Simply put using the GPL license plugin/theme source code open source sharing, can be legally free to change, use, distribution.


Plugin Security

Directly from foreign formal channels to buy, 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.

  1. ByVirustotal Antivirus Verification;.
  2. ByWordfenceSource code review.
  3. BySucuriSecurity antivirus scan.

Sucuri Scan Results


Update method/record

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 upload update, the product title will be written on the latest version number. Can only be updated by uploading the installation package, mind not to shoot, if you want to update online please support the original version to go to the official website of the plug-in to buy.

Click to view the update history of this plugin (Changelog).


WooThumbs Download Terms of Purchase

This site plug-in purchased from foreign sites, the purchase price is4.99 USD/pcIt is valid for 2 years. Diamo's unified selling price is 19 RMB per unit, which is valid for life, and it takes great effort to create a tutorial on how to use it and also provides a manual question and answer service, which is definitely worth the money.

Plugins are for learning and research purposes only, virtual products are reproducible, once sold no refunds, please move to the Terms of Service for details. Please login first before purchasing, refresh the page after purchase to get WooThumbs download permission.

Diamo for the purchase of users to provide after-sales service, plug-in use any questions please leave a message in the comments below, there will be answers to questions.


Installation / Activation Method

Install the downloaded zip installer directly to enable the plugin.

Installation method 1: Upload and install

Find and click on "Plugins" > "Install Plugins" in the left menu bar of the website background, then click on "Upload Plugin" in the upper left corner, upload the downloaded zip installation package and click on "Install Now", after installation, click"Enable Plugin"Complete the installation.

Upload Plugin

Installation method 2.FTP installation

Unzip the plug-in package, put the unzippedFoldersUpload it to the plugins directory (
Find and click on "Plugins" > "Installed Plugins" in the left menu bar of the website background, find the plugin in the list of plugins, and click "Enable".

Enable Plugin

If the installation prompts the content of the following figure, ignore the need to care about, all the functions of normal use.



Common Problems & Solutions

If you are prompted with the content of the following picture, please ignore it, all functions work normally.

screenshot 1

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 '
add_action('admin_head', 'admin_mycss');

Note: If you have already added the code in the green box in the figure below, you don't need to add it again this time (for example, the Rank math plugin also adds the code in the green box to hide error hints). Just copy and paste the code in the blue box into the green box. Save and refresh the page after the prompt disappears.

screenshot 2


1- 2 sets of product images appear on the product detail page of Astra and other themes

After Astra was updated to version 3.9, many new features and designs were added, among which the product detail page thumbnails have 2 new slider layouts in the red box below on top of the original 3 layouts. These 2 layouts and WooThumbs are not compatible at present, if you choose slider thumbnail, it will lead to 2 sets of thumbnails on the product detail page. Just change to one of the original 3 layouts to solve the problem. Modify path: Appearance>Customize>Woocommerce>Single Product> SINGLE PRODUCT GALLERY.

Pasted 87


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.

Pasted 238

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;.

Pasted 239


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 TutorialsThe.

Thumbnails as well as the first main image should be excluded from delayed loading, which will further speed up the loading speed. Note: Remember to exclude Woothumbs' JS from being delayed from loading if there is a delayed JS loading feature in use.


4- Landscaping

The default style thumbnail style is not beautiful enough, especially the selected thumbnail border thickness and color is not very beautiful. The following figure is the effect of our beautification, if you also like the effect of the following figure, follow the tutorial below to set.

Pasted 196

First, in the plug-in "Display" settings, modify "UI Foreground Colour" to your color, which sets the color of the icon in the picture above. "UI Background Colour" is also recommended to be set to#9d9d9d.

Pasted 197

Finally, add the following CSS to theAppearance>Customization>Additional CSS. Note: Line 14 of#edb932is the current thumbnail border color, lines 22 and 26 of#edb932is the previous/next arrow sectionPasted 198The 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 all to the same color as "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;
.icon-woothumbs-thumbnails__slide--active .icon-woothumbs-thumbnails__image-wrapper:after {
border-width: 1px!important;
border-color: var(--ast-global-color-0)!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: var(--ast-global-color-0)!important;
opacity: .85;
.iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-thumbnails__control:hover {
background-color: var(--ast-global-color-0)!important;
opacity: 1!important;
.iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-thumbnails__control--up {
line-height: 16px;
.iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-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;

Please leave any questions, related needs in the comments below and we will follow up promptly.

Author picture

Diamo specializes in building foreign trade websites / cross-border e-commerce stand-alone websites, Google SEO optimization, etc. No renewal fee, high conversion rate.

Catalog Navigation
Recommended Plugins :
Comments :

Leave a Reply

The email address will not be disclosed, and the URL needs to be removed from https://前缀 for insertion.

Need other plugins or themes? Leave a message to us!
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Have no account? Forgot password?
WeChat customer service two-dimensional code
Apply for Trial

Please scan the code to contact WeChat customer service and pay 3 yuan to try the plugin/theme.
Note: Only GPL class plugins/theme can apply for trial, each user can apply for a maximum of 1 trial resource.

Purchase Tips

To purchase, please click on the top right corner of the avatar to register/login first, after logging in, if it shows no login status please.