[Gelöst] toolset with woocommerce product image display problem

[Author]

Artikel

[JI-MANJ3427]

Hello, I've tried to use toolset and woocommerce together. Here's my problem with the single product image display :

I want the product image be displayed as a listings in the product page, so I use the shortcode below :

[wpv-woo-product-image gallery_on_listings="yes"]

These content below has been created automatically while using this shordcode, and it can't be modified.
But the image size doesn't meet my demand.

<div data-thumb="versteckter Link" data-thumb-alt class="woocommerce-product-gallery__image" style="width: 128px; margin-right: 0px; float: left; display: block;">

So I add the image size in the shortcode, but it doesn't work.

[wpv-woo-product-image size='full' gallery_on_listings="yes"]

Here's the description about the attachment.
Image 1 : The sceenshot that I saw after using the shortcode.
Image 2 :
The black block displayed 128x128 px, but the original size of image is only 100x100 px.
The pink block displayed 260x260 px. I want to show original size no matter how large of the block.

Here's the problems :
1. How can I avoid the image automatically divided to different size just show the original size?
2. How can I modify my shortcode to meet my demand?

Thanks for your help, and hope to hear from you soon!

[Nigel]

I can't quite tell from your screenshots what exactly the issue is, but I suspect it reflects the fact that the markup for WooCommerce product galleries is specifically designed to occupy the left half of its container, so that other fields such as price and an add-to-cart button etc. can appear alongside on the right (the default WC appearance on product pages).

The old legacy means of customising WC templates and archives uses Toolset shortcodes (e.g. wpv-woo-product-image) but these are just wrappers for the WC API functions, and it is WC itself that generates the markup, meaning Toolset isn't able to modify that output.

If you want to stick with the shortcodes approach you would need to output the featured image and product images with normal Toolset shortcodes according to your needs, without using the WC product gallery at all.

But I'd recommend you switch to using Blocks, which now gives much more control over the output, as described in the recent blog announcement: https://toolset.com/2020/09/toolset-blocks-1-3-woocommerce-post-relationships-wpml/

[JI-MANJ3427]

Hello Nigel,

Thanks for your kindly reply! But I still have a problem about this issue.

I've used toolset view . toolset layout and woocommerce view to create my single product page. And I follow the official document below :
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-woo-product-image

You can see the demo product through this url : versteckter Link
The product image size doesn't meet my demand.
Could you please help me check the problem?

Many thanks!

[Jamal]

From what I understand so far, you want to display all the images in the product gallery in their original sizes, right?

If yes, you won't be able to use the wpv-woo-product-image shortcode for that. As long as you are using the gallery_on_listings attribute, the generated images will be thumbnails with a wrapper link for the original image, which ensures that the WooCommerce slider will work as expected.

If instead, you don't want the slider, you will have to build your own shortcode that will pull the images from the database and build the links with the code. Check this StackOverflow thread https://stackoverflow.com/a/37275820

[JI-MANJ3427]

Hi Jamel,

I'm truely sorry about that I couldn't distinguish the reply you had given to me whether can really solve my problem or not.
Could you please help me to turn the ticket to private?
Cause I hope you can enter the website backend to do the actual operation that you've replied me.

Thanks for you help.

[Jamal]

Let's first agree on what you are trying to do.

Do you want to have the WooCommerce gallery? I mean, when you click an image, the WooCommerce slider/gallery opens and lets you go through all the product images.

Or do you want to have all the product images in their original sizes?

If none of the above please explain again with more details or with a screenshot or a sketch.

[JI-MANJ3427]

Hi Jamel,

I want to display my product image as a listings, then the user can switch the image through click the image just like the url that I've given before.
versteckter Link

But my question is the image size doesn't meet my demand.
You can see the url that I've mentioned above clearly that the image size is too small. And I want to know how can I adjust it?

Many thanks.

[Jamal]

Hello,

As Nigel has explained, Toolset shortcodes for WooCommerce information are just wrapper around WooCommerce functionalities. So, we can't really control the size of the thumbnails of the WooCommerce gallery using Toolset.

According to WooCommerce documentation, you can change the size of thumbnails using hooks. https://docs.woocommerce.com/document/image-sizes-theme-developers/#section-4

I tested the following code and it makes the thumbnails use the full image size instead of the size of the thumbnails:

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
  return 'full';
} );

[JI-MANJ3427]

Hello Jamal,

Thanks for your kindly reply. But after I add the code to function, it doesn't work.
I've used toolset view . toolset layout and woocommerce view to create my single product page.

Here's my shortcode in the toolset layout:
[wpv-woo-product-image gallery_on_listings="yes"]

Does the code you provided above should be add into the function? If not, where it should be added?
Or how can I adjust my shortcode to match the code that you provided above?

Hope to hear from you soon, many thanks!

[Jamal]

On my tests, I added this code to the theme's functions.php file. Check this article, it explains different ways of adding custom code to your WordPress install. versteckter Link

[JI-MANJ3427]

Sorry Jamal,

Could you please show the screenshot of your product page after you add the code to the functions?
This may help me to confirm whether the code is work or not.

Thanks for your kindly helping!

[Jamal]

Custom code: I added it to our custom code section in Toolset->Settings. Check this screenshot versteckter Link

If you add the code to the Toolset Custom Code section, make sure that it is active, reload the settings page to verify that it is active, we have a known issue where the code does not get activated from the first try.

Results: Full-size images in the thumbnails versteckter Link

You can also add the code to your theme's functions.php file. Check this screenshot where I try to add it to my child theme versteckter Link

Please note that there is a difference between the size of the image and how it is displayed on the frontend. As you can see in my results screenshot versteckter Link even if the full-size image is used, WooCommerce styles make the images smaller to fit 4 images in the row, and it will get smaller if you have more images.