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

Variation Swatches for WooCommerce

Morgan Hawkins

Hello,

We are looking to implement this plug-in on our website after extensive testing behind the scenes and I have a couple questions.

(1) We have the color swatch present on the gallery page of our website so under each item listing, it will have several boxes showing all the other colors the item comes in. However, when you click the color swatch, it doesn’t change the image to the new color. Is it possible to do this? This will make it so that customers don’t have to click into the item to see the colors.

(2) Some colors of items are more expensive than others. The item for instance says $440-490. Is there a way to make it so that when you click the color, it will default to the price? Instead of showing the range.

(3) When you are on the item page, you need to select both the color and the size in order for the image to change to the correct color. Is there a way that the image can change on just selecting the color alone? On other websites, you don’t need to select the size too as that doesn’t change the color, it’s just a necessary step before adding to the cart.

Thank you!

Morgan

Hakik Zaman

Hi Morgan,

Thanks for reaching out to us. We need your admin access to add some settings according to your theme wrapper.

Can you please give us temporary admin access to your site? We’ll try to investigate the issue for you.

You can add new users by going to Users > Add New set the user and password for us, set the role to admin, and set the info here.

Add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

Morgan Hawkins

Hi Hakik

In order to create the new user, I need to enter an email address for you. What should that be?

 

Thanks,

Morgan

Hakik Zaman

Hi Morgan,

Please add this email address: [email protected]

Thank You

Morgan Hawkins

Hi Hakik

I’ve sent you an invite via your email. I also sent you a password reset link.

Please do not make any changes to our theme without talking with me first, this is also our live site (not a staging site).

Thank you,

Morgan

Hakik Zaman

Hi Morgan,

We have the color swatch present on the gallery page of our website so under each item listing, it will have several boxes showing all the other colors the item comes in. However, when you click the color swatch, it doesn’t change the image to the new color.

Can you please give me a link to your item listing page link? Unfortunately, I didn’t find a page where you have displayed products with swatches.

Thank You

Hakik Zaman

Hi Morgan,

We have the color swatch present on the gallery page of our website so under each item listing, it will have several boxes showing all the other colors the item comes in. However, when you click the color swatch, it doesn’t change the image to the new color. Is it possible to do this?

Your theme is using background-image rather than <img src=””>: https://snipboard.io/XgMHnI.jpg

So, it is not possible with this current setup.

Some colors of items are more expensive than others. The item for instance says $440-490. Is there a way to make it so that when you click the color, it will default to the price? Instead of showing the range.

Do you want this behavior on the single product page/shop(Product Category/Archive) page?

If you want this behavior on the single product page, our plugin doesn’t work with the price on the single product page. But it should work on the shop/archive page.

When you are on the item page, you need to select both the color and the size in order for the image to change to the correct color. Is there a way that the image can change on just selecting the color alone?

Please check this link: https://demo.getwooplugins.com/woocommerce-variation-swatches/product-details/change-attribute/

Thank You

Morgan Hawkins

Hi Hakik,

Thank you for looking into this.

Noted on the first, I’ll do some looking into our theme.

For the pricing, it doesn’t seem to be working on either the single product page or the shop page. I updated this item to have a different price:

https://alor.com/product/alor-expressions-of-love-xo-charm-chain-necklace-with-14kt-gold-diamonds/?attribute_pa_color=yellow

I tried clicking a different color in the gallery/shop page but the price did not change. If your plug-in doesn’t allow it to change on the single product page, how would someone know the price of an item before putting it in their cart? It seems like they should be able to know the price of an item before clicking Add to Cart.

For the image showing on selection, I followed the link but it still doesn’t appear to be working. On the below link, you still need to select all 3 options to get an image change. I see that the article keeps noting that the variations should be set up as “Any Size”, but since we have different SKU numbers for each color/size combination, we need to list each specific size instead of “Any Size”. Is this why it’s not working?

https://alor.com/product/alor-expressions-of-love-xo-charm-chain-necklace-with-14kt-gold-diamonds/?attribute_pa_color=yellow

 

Thank you for your help.

Hakik Zaman

Hi Morgan,

It seems like they should be able to know the price of an item before clicking Add to Cart.

Unfortunately, our plugin doesn’t work with price on the single product page. You can check the variation price after selecting the variant. Here is an example: https://snipboard.io/ydzBm6.jpg

You can use this plugin to change your price on the single product page.

You didn’t enable this option from the plugin settings: https://snipboard.io/rTJcPB.jpg

Please check now here: https://alor.com/product-category/womens-chain-NECKLACES/

I see that the article keeps noting that the variations should be set up as “Any Size”, but since we have different SKU numbers for each color/size combination, we need to list each specific size instead of “Any Size”. Is this why it’s not working?

Unfortunately, you have pasted the same link to the product. So, I was unable to check the 3 options product. Can you please give us the correct link to check?

Thank You

Morgan Hawkins

Hi Hakik,

Thank you for sending the screenshots & updates, that’s much better now. However, if you look at the necklaces page, the option they are selecting is color but it says “Select Size” under the price. Is there a way to change that so that it says “Select Color”? There are places they would select size (such as a ring or bracelet) but this item does not have sizes.

 

Thanks!

Hakik Zaman

Hi Morgan,

Glad to know, some of your issues are resolved now.

However, if you look at the necklaces page, the option they are selecting is color but it says “Select Size” under the price. Is there a way to change that so that it says “Select Color”?

Can you please temporarily deactivate our Swatches plugin and check whether it behaves the same or not?

Thank You

Morgan Hawkins

Hi Hakik

I have Variation Swatches for WooCommerce and Variation Swatches for WooCommerce Pro. Should I deactivate both of them? If they are deactivated, will that remove any of the custom features/settings we have put into place?

Thanks,

Morgan

Hakik Zaman

Hi Morgan,

Should I deactivate both of them?

Our Pro plugin is an extension of the free plugin. So, if you deactivate the free version the pro will be inactive by default.

If they are deactivated, will that remove any of the custom features/settings we have put into place?

Our plugin setting options will remain the same if you deactivate the plugin. But if you delete the plugin it will remove the setting options. So, deactivating the plugin will not hamper your plugin settings.

Thank You

Hakik Zaman

Hi Morgan,

I deactivated and then reactivated the plug-in and it still shows “Select Size” when there is no size:

Our plugin doesn’t change the button text. Please deactivate our plugin and check the button by keeping our plugin deactivated.

Then check whether the button displays the same without our plugin or not. We don’t deal with the button text.

Thank You

Morgan Hawkins

Hi Hakik,

Okay, I understand. Thank you. I will review internally and get back to you with any questions. I appreciate your help so far.

Thank you,

Morgan

Morgan Hawkins

Hi Hakik,

Thanks! One last question. The colors of our items are repeated often. When editing/creating an item, under Swatch Settings > Color > Primary Color – is there a way to globally assign the hex code? So if the color “Black” has been assigned to the item, it will choose our global color for black? Without me having to type in the hex color code every time?

 

Thanks,

Morgan

Hakik Zaman

Hi Morgan,

When editing/creating an item, under Swatch Settings > Color > Primary Color – is there a way to globally assign the hex code?

Please learn more about global and custom attributes. You can set color globally and can use it for several products.

Thank You

Morgan Hawkins

Hi Hakik,

We have been using this plug-in on the site and it’s working great. However, it is not working properly on mobile for some items.

For instance, if you visit the below 2 items on the desktop it works properly, but if you visit on Mobile it won’t allow you to select a color.

https://alor.com/product/alor-cable-5mm-single-barrel-cuff-with-18kt-gold-diamonds/?attribute_pa_color=carnation&attribute_pa_size=6-25

https://alor.com/product/alor-cable-5mm-triple-barrel-cuff-with-18kt-gold-diamonds/?attribute_pa_color=carnation&attribute_pa_size=6-25

From what I can see, they are both set up correctly and I’ve tried clearing the cache and that also hasn’t changed.

Can you please take a look and let me know?

Thanks,

Morgan

Morgan Hawkins

Hello,

Just checking in on this request. We have someone trying to buy this bracelet and isn’t able.

 

Thanks,

Morgan

Hakik Zaman

Hi Morgan,

I have tried both links using my mobile device.

Unfortunately, I was unable to replicate the issue from my end.

During this test I have recorded my screen: https://www.loom.com/share/d9737303141f4a69840eb4c322e4a8dd

It could be a caching issue of your customer’s browser.

Thank You

Hakik Zaman

Hi Morgan,

You have changed the user role of the given credentials.

Unfortunately, I was unable to check it further without admin access.

Can you please give us temporary admin access to your site? We’ll try to investigate the issue for you.

Hope to hear from you soon!

Thank You

Morgan Hawkins

Hi Hakik

I have changed your account back to an Admin.

Thanks!

Morgan Hawkins

Hi Hakik

If we switch to using the <img> tag will that fix it?

Also, is there a way to make the color swatches smaller on the gallery page? They take up a lot of room on mobile especially.

Thanks,

Morgan

Hakik Zaman

Hi Morgan,

If we switch to using the <img> tag will that fix it?

Please try using a layout that displays <img> instead of direct background-image in the style attribute.

Also, is there a way to make the color swatches smaller on the gallery page?

Can you please give me a screenshot where you want to make it small? You can upload your screenshot here- https://paste.pics/ and post the screenshot link directly using this reply box.

Thank You

Morgan Hawkins

Sure, see below (https://alor.com/product-category/jewelry/ialor-designer-apple-watch-bands/), they are also large on the desktop and I’m okay if both desktop & mobile need to change. They are just very obtrusive on mobile because of how much room they take up:

https://paste.pics/2eba69300314b10d71c69f49cc28b0ab

 

If we look at a similar brand like Lagos, their color swatches are much smaller and easier to navigate on mobile:

https://paste.pics/d4c27e31609a5498d1f37b30898b1a6a

Hakik Zaman

Hi Morgan,

You can control the Swatches sizes for the archive pages here- https://paste.pics/QR7SO

Thank You