WooCommerce gallery thumbnail dimensions not being applied

Support
#1

Hello everyone!

I seem to be having a peculiar problem with WooCommerce gallery thumbnails. For whatever reason, the “Product Thumbnail” setting under the product images does not apply. The gallery thumbnails on the single product page are getting their size (aspect ratio) from the “Single Product Image” setting as opposed to the product thumbnails. I can’t figure it out. It seems like the Product Thumbnails dimensions are not being used at all.

Even if utilize an aspect ratio of the images in question or do a hard crop, nothing applies. The other two settings, Single Product Image and Catalog images seem to be working normally.

Any guidance on this will be appreciated. By the way, I am on the new updated Pro theme.

I have included a couple of images to show the settings and how it looks on the front end.

Thank you

#2

Hi there,

The thumbnail and single product images in our theme follow the same guideline of the Woocommerce settings. This has been changed in recent updates which you can get the detailed information about here:

https://theme.co/changelog/#theme-x-5-1-1

So you will need to update the theme to version 1.2.7 and make sure that you have the compatible version of the Woocommerce with our theme:

For further reading of the Gallery Thumbnail image sizes kindly follow the links below:

https://www.google.nl/search?ei=n9ATWob_MMPgaeLcmPAP&q=woocommerce+gallery+thumbnail+sizes&oq=woocommerce+gallery+thumbnail+sizes&gs_l=psy-ab.3..0i22i30k1l3.2040.8764.0.9279.35.24.0.0.0.0.411.3384.2-5j5j1.11.0....0...1c.1.64.psy-ab..30.4.983...0j0i7i30k1.0.LUXclzl_UIA

Thank you.

#3

Hello @christopher.amirian,

Thank you for that reply as well as the resources. I have looked through the documentation on Woocommerce and have done nothing that seems to be out of place. I have also updated Pro to 1.2.7. However, the problem persists. If you’d like, I can take this up with Woocommerce.

Thanks again.

#4

Did you regenerate your thumbnails after you updated the images sizes? That is important.

Do you have additional functions in your functions.php? If so, please remove them and check again. Also, if you have customized templates, please remove them also for troubleshooting purposes.

Thanks.

#5

Hi @christian_y,

Yes, I have been regenerating thumbnails after each step and there is no change. I removed the template files (which was one), and removed all of the new code in the functions.php and still no change.

You should know that, I had added a code shown below to make the thumbnails appear underneath the large single product image. Those are the thumbnails in question. Removing the code from functions.php put the thumbnails on the top-right corner of the larger image which was the default location, but I don’t prefer that.

add_filter( ‘after_setup_theme’, ‘remove_new_wc_features’, 99 );
function remove_new_wc_features() {
remove_theme_support( ‘wc-product-gallery-slider’ );
}

#6

In that case, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

All the best!

#7

Thank you for looking into this!

If you don’t mind, since you guys are investigating this, I was hoping you can look into another peculiar problem involving Pro Header builder. I have multiple headers and I recently decided that I was going to use a specific header for my Woocommerce store page. That header is supposed to contain another bar that will house a widget that contains filters for the store. This was an excellent opportunity to use the powerful header builder. However, the results were odd. The new bar I added to the header does not show up at all! It is assigned only to one page, the store, but on the front end, it’s nowhere to be found. Inspecting the code only reveals two bars. I’m lost. Is there a limit on the number of bars one can have? The header in question is called “Store Page Header” and it contains random elements just for testing purposes. Please find the pertinent access information in the secure notes.

Thank you!

#8

Hi there,

Would you mind providing more clarification? Since you assigned it to store page then yes, it’s normal for not to be displayed in home page.

Plus, I can’t load the header builder due to javascript error, it only loads once and there are a counter and an image. And you’re right it’s not displaying. Would you mind cloning your site in a staging, there are tons of plugins and I wish to test it with the clean environment.

For the meantime, please start a new thread about this issue and link it here. This issue is not related to the thread’s initial issue and may create confusion.

And please do a plugin conflict test (disabling plugin one by one while testing until you find the culprit).

Thanks!

#9

Hi @Rad,

Sorry if my message wasn’t clear. The header in question (Store Page Header) was assigned only to Woocommerce shop page but even though while editing the header, you can see three bars with the elements, checking the live site shows only two bars. I have created another thread per your instructions and added the link below.

It’s interesting how I was experiencing the same thing you were, i.e. the javascript/conflict error upon loading the header/footer. But for me, that disappeared at some point and hasn’t come back since. Sadly I could not therefore investigate the cause by deactivating plugins because I was no longer getting the error. Still, I did as you asked in hopes that deactivating the plugins may address the header issue or even the thumbnail issue.

I have created a clone of this site and added the url to the secure notes. The username is the same as the actual site.

Please let me know if you need anything else.

Pro Header not displaying all added bars

#10

Hi there,

I tried the staging and it’s not working, primarily because of CORS setup of your site. Let’s ignore that for now, or contact your hosting provider and let them fixed it.

Failed to load https://staging.equestriansupplyinc.com/cornerstone-endpoint: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

I also tried some workaround with no success, it’s a dead end for now. Could you try re-creating the header instead? The last time I checked it, it works on other headers.

Thanks!

#11

Hi @Rad,

Thank you for hanging in there with me! I talked to my host and unfortunately, they weren’t able to determine the cause, basically implying that this may in fact be related to the theme. In fact, that’s exactly that they recommended: that I contact the developers of X. Maybe they are not looking the right place? Any guidance I can give them on how to resolve this issue? Could this be related to a licensing issue for Pro?

Please let me know what I can do.

Thanks again.

#12

Hi there,

They aren’t familiar with Wordpress, or not even checked any information about preflight for allowing X-Requested-With in Access-Control-Allow-Headers. It’s server configuration and not Wordpress or Theme related.

I’ll continue checking your live site then if it’s not possible for staging. But please provide the latest login credentials for your live site. I can’t log in anymore.

Thanks!

#13

Hi @Rad,

Sorry you can’t gain access. I just tried with the information I gave you earlier and I was able to login with those credentials. But it seems the problem has been resolved. I feel bad for wasting my host’s rep time as it simply was due to a plugin, namely the “Really Simple SSL” plugin. I should have disabled those on the staging as I was afraid of deactivating them on the live site in case something went wrong.

Anyways, header is accessible now! Please try it with the same credentials on the staging site.

Thanks

#14

Hi there,

Which is why you shouldn’t use a plugin for configuring your site’s URL, if the plugin fails, everything will fail. In the future when setting up HTTPS, please change your site’s URL in Admin > Settings > General to HTTPS, then install Better Search Replace plugin and replace all instance of http://example.com/wp-content/ with https://example.com/wp-content/ from all database tables. And that’s it, no need for SSL plugin, plus, SSL installation is usually done in your domain/hosting level, and not it the plugin.

About the login, I’m referring to live since I can’t check it in the staging. But glad it’s okay now.

But upon checking, it’s a bug. You can’t assign a header to a shop page, yet. It looks like a header is assigned because the Header with Crumb (global header) and Store Page Header are just the same, with just extra header bar. This is already added to our issue tracker, but for now, add your additional header bar to Header with Crumb and it will be displayed on Shop page too.

Thanks!

#15

@Rad,

Sorry for the trouble! You’re absolutely right. I normally try to limit the number of plugins I use but I guess that what happens when shortcuts are available and you don’t think about future consequences. I would stop using it immediately but can I safely backtrack now?

I’m glad to hear that this issue is being worked on. I really look forward to using it on the shop page.

By the way, can you please let me know what I can expect with the thumbnail issue, which relates to this thread?

Thank you!

#16

Hi there,

Since the SSL issue is only present in your staging, then you may ignore the SSL plugin for now on your live site. You may also delete your staging site.

The gallery images are not connected to the theme anymore, it’s now using the Woocomerce shop_single image size. Example,

<img width="228" height="342" src="https://equestriansupplyinc.com/wp-content/uploads/2017/11/navy-blue-3-228x342.jpg" class="attachment-shop_single size-shop_single" alt="" title="navy blue 3" data-caption="" data-src="https://equestriansupplyinc.com/wp-content/uploads/2017/11/navy-blue-3.jpg" data-large_image="https://equestriansupplyinc.com/wp-content/uploads/2017/11/navy-blue-3.jpg" data-large_image_width="1504" data-large_image_height="2256">

It says class="attachment-shop_single size-shop_single", indicating that it’s Woocommerce size.

Plus, the image setting of 300x300 is working too, example, if you check the wrapper code

``

```

The thumbnail data is https://equestriansupplyinc.com/wp-content/uploads/2017/11/navy-blue-3-300x300.jpg

What I’m not sure is how this new Woocommerce gallery feature works, like why it doesn’t apply the 300x300 directly to <img> instead of 228x342. In other words, the image size setting is only taking effect on the image wrapper and not in the gallery images. I checked it on my installation with or without X theme and it’s the same, so perhaps it’s Woocomemrce related. But you may try this workaround, please add this code to your global custom javascript

jQuery( '.woocommerce-product-gallery__image' ).each( function() {

jQuery(this).find('a > img').attr('src', jQuery(this).data('thumb') );

} );

And this CSS to your global custom CSS

.woocommerce-product-gallery__image img {
    width: 100%;
    max-width: none;
    height: auto;
}

I also made your thread private as I noticed that you’re not sharing your site in public, and my reply contains explanation and codes about your site.

Thanks!

#17
#18

Hi @Rad,

Sorry about the delay. Thank you for making the thread private. I wouldn’t have noticed!

First, ever since you brought up the issue (or potential issue) about the SSL plugin, I realized I needed to not depend on it in case it causes problem in the future. I looked over my options and was able to remove the plugin and update my site URLs with the help of my host (using the find and replace method that you described) so no more dependency! Thank you for nudging me.

Thank you for providing a workaround even though it seems it’s not a theme related issue at all. I did try the fix but it seems it didn’t work. I did regenerate the thumbnails but still nothing. I hate to say this now after taking so much of your time, but the current dimensions, inherited from the single product image is growing on me so I may not pursue this. However, should I bring this up with Woocommerce since the settings should be applied to the image tag and the theme is not responsible, as you determined?

Thanks again!

#19

@Rad,

Just a quick update. Apparently, the code you provided did work in a way. I was going to remove it, and noticed that it wasn’t my thumbnails that were being affected but rather the actual the large single product image. It became blurry and upon inspecting the code, it seems that the catalog image dimensions of 300x200 were being applied instead of the single product image dimensions.

I removed the code and it went back to more. Just wanted to let you know.

#20

Hey @kgpthemex,

If you have configured the WooCommerce image sizes and regenerated thumbnails, that should be it. No custom coding required.There’s no bug related to this currently so if it doesn’t get the right size, something outside of the theme is causing it. It could be a third party plugin, a custom function, cache, etc… If you wish for us to continue investigating, we need to clear out your setup so we can see if the theme is causing the issue. With that said, please deactivate all your third party plugins and remove the customizations and we’ll troubleshoot what in the theme is causing this.

If you have other issues, please open a separate thread to avoid confusion later on. One topic per thread is best.

Thanks.