Tagged: product images, switching
-
AuthorPosts
-
January 28, 2021 at 1:07 am #1275924
Hi Team,
I’m not sure where to start with this so I thought I’d start here. I am looking to change how the product image when viewing a product changes when you select options. I would love to be able to tie the product image to the color swatch on each product.
For example, when a customer visits a product page like the page for the Levi’s Classic Denim Worker Shirt, I want them to see the product image change to the appropriate colored shirt when they select the color swatch they are looking for. Right now they have to select the size they want as well before the product image changes. Is there any way to do this through PHP? Or will I need a dedicated plugin to accomplish this.
Let me know what is possible and thank you a ton for your help in advance.
Best,
JeffFebruary 1, 2021 at 5:46 am #1276689Hey RMConnection,
Thank you for the inquiry.
Have you tried setting the Enfold > Shop Options > Product gallery to use the Woocommerce 3.0 Product Gallery instead of the default one? Variation switching is not compatible with the theme’s default gallery, so you have to switch to the shop plugin’s actual product gallery.
Best regards,
IsmaelFebruary 1, 2021 at 8:06 pm #1276916Hey @Isamel,
That has already been selected. Is there anyone you recommend I reach out to for help with this?
Best,
JeffFebruary 3, 2021 at 4:52 am #1277227Hi,
Thank you for the update.
Would you mind if we access the dashboard? Please provide the WP and the FTP details in the private so that we could check the issue properly.
Best regards,
IsmaelFebruary 3, 2021 at 8:23 pm #1277451Hi @Ismael,
I think I provided everything below in the private section. I should clarify this isn’t so much of an issue with the code as it is a feature I was hoping to gain through some settings or php work. Let me know if you have any questions and thank you for your help!
Best,
JeffFebruary 4, 2021 at 6:08 am #1277541Hi,
Thank you for the info.
The product gallery is now switching to the appropriate image when we select a different color or size. You may need to purge the cache on your end or disable the WP Rocket plugin temporarily to actually see the changes.
Best regards,
IsmaelFebruary 4, 2021 at 8:04 pm #1277779HI Isamel,
First, I appreciate your help with this request! I cleared the cache a couple of times, tried multiple computers and smartphones to makes sure and it is still requiring the customer to select a size and color before the image changes to the variation image. Ideally, the customer would just have to select the color for the variation image to change to the correct color. I’m not sure if this is possible without some plug-in or major code so I appreciate the help!
Best,
JeffFebruary 5, 2021 at 2:28 pm #1278019Hi,
Yes, you are right. Looks like the switch only works once a particular size has been selected. Would it help if we preselect a default size on page load? You can use this script in the functions.php file to do that.
// preselect product size function ava_script_preselect_product_size() { if ( wp_script_is( 'avia-default', 'registered' ) ) { wp_add_inline_script( 'avia-default', ' (function($) { $(document).ready(function() { $(".rtwpvs-term.rtwpvs-button-term.button-variable-term-m").trigger("click"); }); })(jQuery); '); } } add_action( 'wp_enqueue_scripts', 'ava_script_preselect_product_size', 9999);
The script above activates the medium size button on page load.
Best regards,
IsmaelFebruary 5, 2021 at 7:36 pm #1278161Hi @Isamel,
I’m not sure that really helps as the customer can always select their size easily. I can also set a default value it selects on each product page so the code may add unneeded confusion for our other team members. It’s just as many click points for customers to see the proper color with this attempt. I appreciate the idea though that was creative. And again thank you for the help!
Best,
JeffFebruary 9, 2021 at 11:47 am #1279009Hi,
Alright. Let us know if we could help you with anything else. Unfortunately, we are not exactly sure why both attributes have to be selected first before the image switch, but the code above should preselect a specific size so that the users have to only select a color.
Best regards,
IsmaelFebruary 9, 2021 at 7:22 pm #1279203Hi @Isamel,
No worries it was worth a shot! Thank you for trying.
Best,
JeffFebruary 10, 2021 at 8:37 am #1279321Hi Jeff,
Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardFebruary 10, 2021 at 7:15 pm #1279585Hi @Rikard,
I wouldn’t be opposed to leaving this open to see if any other creative ideas come this way.
Best,
JeffFebruary 12, 2021 at 12:36 pm #1279980 -
AuthorPosts
- You must be logged in to reply to this topic.