UX concerns about image sizes and Customizer Shop settings in WooCommerce 3.3

[adrianlbs]

1. Image Cropping / Aspect Ratio
After updating to WooCommerce 3.3 all images in the store will be cropped into squares automatically. As theme authors, is there a way to prevent that? Or set the default to “Uncropped”? Also, is there a way to define a custom default Aspect Ratio?

2. Image Sizes
The two inputs for the “Main image width” and “Thumbnail width” will be hidden if sizes are declared in the theme, that means all users of a theme would have to have the same image sizes. The problem with this is that setting up a different no. of products per row would require a different image size. E.g. a default size may be suitable for 6 products per row but 3 products per row would require larger images so we can either have images that are too small or too big. It would be best if the declaration in the theme would be considered a default value for those fields, not an absolute one that can no longer be changed by the user. In any case, the image size would change once the update to WooCommerce 3.3 is performed.

3. Customizer Options may be hard to find
The fact that you have to open up the actual shop page in the Customizer’s preview to get the options on screen seems ununtuitive and I got the same feedback from everyone I discussed it with. My suggestion here is to show the “Product Catalog” and “Product Image” option available at all times and redirect the preview to open up the shop page when settings are made in that section.

Our main concern here as theme authors is that one way or another the image sizes would have to be adjusted manually upon updating to WooCommerce 3.3 and there’s not much we can do to help site owners to avoid that with the current settings. Please let us know if there’s something I’m missing here.

Thank you!

Cheers!
Adrian.

[willgorham]

I'll second point 3 here. Intuitively (to me at least) when I open the customizer and don't see the image settings (because I'm not on a page that displays a product list) I wouldn't immediately think that I should have to click through different pages to see what settings are available. I would assume that the settings aren't available in the customizer at all.

Maybe this is because I don't use the customizer very often and was not aware of it's typical UX, but as a developer I probably use WP more than the average user. Making the setting available on all screens makes sense to me. If you're not on a product list page and change the product image sizes setting, of course you won't see the results - click thorough to an appropriate page - but at least you'll know what settings are available. Just my 2 cents.

If any user testing has shown otherwise then go with the data of course.

[spencerfinnell]

Widget areas (and I think nav menus) aren't shown in the Customizer until you are on a page that calls that dynamic area, but I've always found that confusing as well.

[mikejolley]

The motivation behind all of these changes is to prevent confusion around the image size settings. The doc about 'fuzzy images' and changing image sizes is currently the most visited (!), and a large cause of support questions.

Having this in the customiser gives the end-user immediate feedback about how a setting will change the way images/products are displayed. It may be hard to find to begin with if you're familiar with WC, but keeping all display related settings in one place should make sense long term. To ensure people can find the new settings, we've addressed it with a dismissible notice on the settings page:

#18584

r/e 1. The aspect ratios are just settings. You can change settings on theme activation if you so desire. I'd encourage you to leave this for users, with the default being square which is most common.

2. The user should not need to define image sizes if the theme sets it up. In most cases, srcset attribute should take care of the various column options and retina 2x. If those are not sufficient we could look into improving size and column relationship (auto calc?) in future versions. For now I think it works fine.

Again, the reasoning behind this change is to avoid having users change the sizes only to see no obvious difference in the layout because the actual display size is controlled by CSS.

3. Those options could be global, but unless you're on a store page you're not going to see what those options are actually changing. On the shop page you can.

I'm not sure if you can make the customiser load the shop page? Perhaps the setting could be global and link to shop page. Unsure if this is possible.

Open to suggestions but I don't think this is a blocker for release (we can always adjust this in a fix release if it becomes a major problem).

[spencerfinnell]

I'm not sure if you can make the customiser load the shop page? Perhaps the setting could be global and link to shop page. Unsure if this is possible.

Could use something like this when the WooCommerce panel is expanded: https://make.xwp.co/2016/07/21/navigating-to-a-url-in-the-customizer-preview-when-a-section-is-expanded/

[willgorham]

I'm 100% behind moving display settings to the customizer - no complaints there at all. So far in testing everything seems to work very well. My only adjustment would be to make the setting global.

Definitely not a blocker though - real user feedback is more relevant than my personal opinion 😄

[adrianlbs]

@mikejolley Thank for all the details provided and for the speedy reply.

I do appreciate the changes and as developers it sure makes sense for the long term. I was actually really happy to see these first options as part of the Customizer. My concern is exactly the high traffic to those image sizing docs as well as the number of support requests we've received in this matter. It is definitely a sensitive area and users seem to notice the tiniest change when it comes to product images. My concern is for the short term, the actual moment of updating and seeing all the images changing in to squares. I am positive it will generate lots of questions and frustration and what I had in mind is some way to deal with it without having to make any changes to image sizes previously set.

1. We sure want to leave this to the user, it's just that squares won't work for everyone and it would be best not to have users to make any manual changes after the update.

2. I agree, not having to manually set image sizes would be really great in the long run.

3. We've done this in our themes and I can confirm it is possible, there's a custom "Shop" section which opens the actual page set up as the shop page in the preview when section is active. @spencerfinnell Yes, that's the same link we went through when implemented this functionality. I'll ask our developer to join the conversation and share the exact details. As a designer I believe that having all available sections visible at all times will give users a better sense of structure.

Cheers!

[SorinGFS]

I understand your concern about blurry images, but I think this change won't be a solution. It may be solve an aspect of the problem, but mean while introduces another two problems:

1. it will increase the load size, somebody said that we will use more browser cache, but for category we have a single image and for thumbnails maybe 20 images! Thumbnail images in old style had about 1-2kb, new style will have 10-15kb, multiplied by 20.... In browser cache we only have one of them, until user clicks the single product page.
2. All the website owners who want this upgrade (very necessary because all those functionality bugs) will have to immediately ask their theme developers to make the necessary changes without having the choice to leave this particular aspect as it was before.

Please, do not release like this, make more testing with multiple scenarios, do not just dictate that everyone should adhere to the new rules. This is a major chage that will spoil the sites that are upgrading without changing any code in the theme.

Also, in a long run I think leaving the image control to the end user will end up in a greather mess. Just my 2 ceents.

[rthvanesa]

As my colleague @adrianlbs said, we followed the same link @spencerfinnell shared for a go-to-page implementation. We used ajax request in order to get the page link, and we implemented this for all the WooCommerce sections in our Customizer. I'll leave you a code snippet that might help:

wp.customize.section( ‘your_customizer_section’, function( section ) {
    section.expanded.bind( function( isExpanded ) {
        if ( isExpanded ) {
	    var data = {
	            'action' : 'get_page_url',
	            'page' : page_you_want_to_redirect_to
	    };
	    jQuery.post( 'admin-ajax.php', data, function(response) {
		    wp.customize.previewer.previewUrl.set(response);
	    });		
     }
    } );
} );

We used the 'page' parameter into a switch that returns us the link for the specific page we looked for. For the Shop page, you can get the url by simply using echo get_permalink( wc_get_page_id( 'shop' ) ), and you can get urls for Cart page, Checkout page or even a Single Product page.

I hope this will help you.

[mikejolley]

Thanks @rthvanesa I'll give it a try.

@SorinGFS If the cat thumbnails are only used in one place at one size, why upload large images :)?

Once viewed they are cached, so like products, any other time the thumbnail is viewed it will load from the cache.

Thats why it's a good change for products; you view the same image in multiple places at different rendered sizes.

[mikejolley]

I've addressed the upgrade routine for aspect ratio, and the customizer panel visibility in #18592

Cheers

[adrianlbs]

Thanks Mike, really happy to to hear that! 😀
https://www.youtube.com/watch?v=N4d7Wp9kKjA

[SorinGFS]

@mikejolley I just dont get it, sorry, looks like we talk about two different things.

Category page has a single image for every product, once you click the product to enter single-page, those little thumbnails are now at same size as category images, so the load will be like in the next picture, I'm wrong?

The cache enter in his role just when an user comes back to the same single-page

[SorinGFS]

@mikejolley I have few sugetions:

1. For this transition:
   a) to make it optional, placing a checkbox exactly where the settings are located now (settings>products>display), something like Responsive Thumbnails Y/N
   b) In the same place, in case user opts for responsive thumbnails two more settings to be added, max thumbnails per row, and thumbnail container max height
   c) In case user opts for responsive thimbnails to put an informative tooltip for user to know where the settings can be modified (in Customizer)
2. For the tumbnail container a setting in pixels for the distance from where is placed first tumbnail, as you can see in picture there is a gap, default should be zero, and in user opts for different number of thumnails per row he willl have the option to center those tumbnails. In fact the number of thumnails per row should be general, no matter what is the user option.

[pahanlo]

hello everyone
i was update woocommerce plugin so image setting is out my e commerce website i will update to setting menu so it was not change so any one help me to set this setting link was attach kindly check thank u
https://pahanlo.com/product/aliza-waqar-embellished-sprinkled-chiffon-embroidered-maxi/
https://pahanlo.com/product-category/bridals/zainab-chottani-bridal/

[AGOwen]

Hi guys,

Maybe someone can help for me here. I am working on my first webshop with woocommerce and I don't know how to fix the thumbnail issue. Basically I just want all my product without cropping in a 250x250 box. I tried every settings(1:1, Custom, No cropping) I did regenerate thumbnails but the site is still not nice. I would be happy if someone can give me help or just a start where can I find these settings in the code. This is my site: https://snorkelaroundtheworld.com/product-category/mask-and-snorkel/snorkel/

Thanks

[SorinGFS]

@AGOwen

First of all, posting on closed topics won't help you find solutions.
As for your problem, my advice is to wait a little bit, until the next release, because will contain fixes for some of the problems. Is a matter of days. After that, if you will stil have the problem contact your theme author, or just wait a litle bit more to give them time to adapt the theme to the new woocommerce release.

[AGOwen]

@SorinGFS You are right, sorry! And thanks.

[jessekafor]

Is there a function we can use to set the default aspect ratio for product images?