fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Support for JetEngine and JetWooBuilder Thumbnail Widget

Stefan Zahnd

Hi

I’m building my shop with JetEngine, and some parts from JetWooBuilder. My archive pages as well as the shop page show the products using listing grids from JetEngine.

Shop: https://staging.kaybeekids.ch/shop/
Listing widget as product slider: https://staging.kaybeekids.ch (scroll down a bit)

I would like to show the color attribute for each product, and in combination with that, I would like, when clicking on the color attribute, the image should change. Unfortunately, I couldn’t make it happen so far.

I found this ticket and added the product wrapper but without luck.

https://getwooplugins.com/ticket/118301/

Can you please help me out here? Thank you very much.

Best regards, Stefan

Hakik Zaman

Hi Stefan,

Thanks for reaching out to us. I have visited the links you provided.

But found everything as expected:

1> https://paste.pics/OQWOL

2> https://paste.pics/OQWOG

Please let me know if I missed anything. Hope to hear from you soon.

Thank You

Stefan Zahnd

Hi

Sorry for my late response. You’re right. It (was) once working. At the moment, I’m facing multiple issues, and I don’t know how to get around them.

It’s all happening on https://staging.kaybeekids.ch/shop/

But let’s start with the most critical one.

I’m using JetEngine with a custom product listing to display the products on the shop page, and anywhere else on the page.

My goal is to enable a customer to select color, and size on the shop page (archive), and add the item to the cart.

When using the shortcode to add the variations, the change of the thumbnail is working. But when using the Elementor Add To Cart widget, the change of the thumbnail doesn’t work. See the following video.

https://monosnap.com/file/7bNgz9b20gDTIpFfXnDmmW7NRA5Vsl

Opposite, the “Archive Add To Cart” button from Crocoblock doesn’t work correctly as it doesn’t recognize when a client is selecting an option. This, on the contrary, works with the Elementor Add To Cart widget.

Therefore, if we could manage to make it work that the thumbnail images change when using the Elementor Add To Cart widget, then it would be fine.

Caching is disabled for now, and I added both options to the widget so that you can see the difference.

Thank you for your help on this.

Best regards, Stefan

Stefan Zahnd

I have to add something. I just realized, that when you load the shop page. The stock-situation of the first product fetched is displayed correctly for both, the shortcode, and the add to cart button widget. From the second product in the listing, only the shortcode integration shows the correct stock status from the beginning.

Hakik Zaman

Hi Stefan,

Can you please clarify the specific issue now?

Could you record me reproducing your issue using a tool like this? https://www.useloom.com
It helps me to quickly figure out the issue.

Thank You

Stefan Zahnd

Hi Hakik

Me again. I was testing around and reading the docs and tickets. Somewhere I found a statement that you are not supporting the add to cart button on the archive page. Could this be?

I was wondering, as with the shortcode, the thumbnail display mostly works, if it’s possible to have another button as trigger to add the product to the cart. Maybe with the CSS selector? Not sure. I don’t get the part with the CSS selectors.

Thank you for your help and best wishes, Stefan

Stefan Zahnd

Hi

In the meantime, I talked to Dhul.

The issue regarding the dropdown that is converted into buttons, although it shouldn’t, is a bug. Dhul said the chances are high that I’ll get a fix for that on Sunday.

In addition, I talked to the client, and he said that the solution using the “add to cart” widget is the way to go, although the change of the thumbnail doesn’t work right now. Therefore, I removed the shortcode from the listing. If we could make it happen to work with the change of the thumbnail, that would be amazing.

As well as the other issue, where the stock status isn’t updated for all listed products from the beginning, needs to be fixed somehow. If possible.

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

Somewhere I found a statement that you are not supporting the add to cart button on the archive page. Could this be?

If you are using Elementor Add to Cart button widget on the shop/archive page, it will not work. It will only work with the default Add to Cart button. By default, the Elementor add-to-cart widget provides the dropdown option on the shop/archive page. Displaying Add to Cart button is a common behavior of WooCommerce. Please check whether it is disabled from Appearance > Customize > WooCommerce or not.

For your second issue:

Please make sure the “Grosse” attribute type is select not the button. Like this: https://paste.pics/OSPM9

For your third issue:

The attributes are coming from the Elementor Widget, we have no control over that. That’s why it is not working as expected.

Thank You

Stefan Zahnd

Hi Hakik

Thank you for your reply.

Add to cart issue

I also tried using the WooCommerce shortcode [add_to_cart id="xy"]. Unfortunately, it only shows the price but no options.

There’s also a “Custom Add To Cart” widget, which seems to be from WooCommerce itself. Unfortunately, it’s the same behavior.

Probably I go with the shortcode version and only show the color attribute on the shop page. Then a button saying “select size”, or whatever, which then leads to the detail page where the client will add the final product selection to the cart.

Dropdown issue

According to Dhul, this seems to be a bug in the pro version. He reported it internally.

 

I now have a better understanding of what’s possible and what’s not. Thank you for your help. I think we can close this ticket for now.

Best regards, Stefan

Hakik Zaman

Hi Stefan,

Glad to know you have now a better concept of the Swatches plugin. 🙂

According to Dhul, this seems to be a bug in the pro version. He reported it internally.

If he reported to you that the “auto dropdown to the image” option is displaying the button instead of the dropdown (when the “auto dropdown to button” option is disabled).

Yes, I have already replicated the issue on our end. I have already sent it to our development team.

Thank You

Stefan Zahnd

Hi Hakik

Me again :). After a lot of back and forth, debugging, and trying other stuff, I’m at the point where I basically just need to solve one issue to have a more or less good solution for the client (for now).

It’s about the fact that the Thumbnails aren’t updated in the shop/archive view. Interestingly, it works for some products but not the majority.

I took a video for better understanding: https://www.loom.com/share/a8dc296cac434198a65f1303223b6e41?sid=f3712f71-9505-4c1f-8efc-c42fb8efe054

The access in this ticket is still valid, in case you want to have a look.

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

I have added a snippet using the Code Snippets plugin to resolve the “Swatches are not clickable after clicking load more button”. You will find it in the list of snippets after clicking on All Snippets.

For the image-changing issue, it is really strange. Are you using any CDN for your site?

If so, will you please temporarily disable that for a test? Then check whether you face the same issue or not.

Thank You

Stefan Zahnd

Hi Hakik

Thank you very much 🙏🏻.

Nope, no CDN. Just caching from Cloudways. Which includes Object Caching. But I also disabled that previously, and it was the same behavior. Not sure why it’s working with only some.

Is the magic happening using JS? Can we/I debug it in the browser?

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

For your image-changing issue: Can you please remove the “srcset” attribute from the <img> tag?

Please check the screenshots:

With “srcset”: https://paste.pics/OTUMC

Without “srcset”: https://paste.pics/OTUNS

Is the magic happening using JS? Can we/I debug it in the browser?

Yes, our swatches event was not firing after loading new products by Jet Grid. Are you still facing any issues after loading the products with the load more button?

From my side, those are working well. If you want you can debug it for more testing.

Thank You

Stefan Zahnd

Hi Hakik

Sorry for the late response. Thank you for the idea regarding the srcset. You’re right. I disabled the responsive image in the frontend using a snippet. Now, everything seems to work fine.

Although, now I’m facing the issue that your plugin uses the woocommerce_thumbnail image size. Unfortunately, this is not optimal, because I’m using another size that is scaled, instead of cropped.

Is there a way to tell your plugin to use another image size?

Thank you and best regards, Stefan

Stefan Zahnd

Hi Hakik

Another questions. Have you ever thought of adding/using Select2 to add dropdowns with images (https://select2.org/dropdown)? I just stumbled across this feature with another plugin.

Best regards, Stefan

Stefan Zahnd

Hi Hakik

It seems the script is also not firing when filtering the products. Have a look here: https://www.loom.com/share/1a583ce7ab184b04b24979eae29d4f0c?sid=af0cd078-b294-4dfd-9a97-5770f0ba4546

You once added a snippet because your script wasn’t firing after the “load more” event from JetListingGrid.

I have added a snippet using the Code Snippets plugin to resolve the “Swatches are not clickable after clicking load more button”. You will find it in the list of snippets after clicking on All Snippets.

Can you extend your snippet to solve this issue, or is this different?

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

Is there a way to tell your plugin to use another image size?

We don’t deal with image size. It is totally controlled by WooCommerce and the theme you are using.

Please check your image thumbnail settings from Appearance > Customize > WooCoomerce > Product Images

Have you ever thought of adding/using Select2 to add dropdowns with images (https://select2.org/dropdown)?

Unfortunately, the feature is not currently available. Please send the feature request here: https://storepress.fider.io/

Can you extend your snippet to solve this issue, or is this different?

Which filtering plugin you are using?

Thank You

Stefan Zahnd

Hi Hakik

Thank you for your feedback.

Regarding the filter plugin. I’m using JetSmartFilter from Crocoblock. The same developer as JetEngine which is the listing engine.

Thank you and best regards, Stefan

Hakik Zaman

Hi Stefan,

Can you please remove the “srcset” attribute from the <img> tag after filtering?

The same thing, “srcset” is conflicting to change the src of the image. Please check this screenshot: https://paste.pics/OW20U

Thank You

Stefan Zahnd

Hi Hakik

Thank you for your reply. I’m going to try. Not sure how to do it, as the listing is from JetEngine (Crocoblock).

I removed the other srcset tags by disabling the responsive image feature of WordPress using a filter.

// disable srcset on frontend
function disable_wp_responsive_images() {
return 1;
}
add_filter(‘max_srcset_image_width’, ‘disable_wp_responsive_images’);

But thank you for the push in the right direction.

Best regards, Stefan

Hakik Zaman

Hi Stefan,

Not sure how to do it, as the listing is from JetEngine (Crocoblock).

You can contact the great Crocoblock support team.

I think they can give you the right way to remove those extra attributes from the <img> tag.

Thank You

Stefan Zahnd

Hi Hakik

Thank you for the hint :). I was able to remove the src from the filtered products. All good now.

Thank you very much 🙏🏻

Best wishes, Stefan

Hakik Zaman

Hi Stefan,

Sorry for my late reply, we were on our weekend leave.

Glad to know everything is working as expected now.

We really get excited & honored when you use our plugin on your site.

If you found my support helpful, could you please leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thank You