Hello Luke,
10, 10b, 11. OK, thank you. Wish, team will surely take these into consideration.
10c. Right. I did the mistaken. I now replaced with correct location, and then It worked.
Thanks you.
1.a. Yes, this now worked. Thanks for sharing Refine code (2-in-1). However, you might have missed Border-Radius, due to which it shows square border for Round swatches.
https://i2.paste.pics/FG4S6.png
So, I added this border-radius: 50%; again and it then worked, like previously (for Round shaped swatches)
https://i2.paste.pics/FG4YM.png
1.b.
Try to upload a bigger image. As for the color attributes there shows a colored background with the square 25×25.
I found that I have already uploaded 100×100 sized image for swatches (sorry, not 50×50, as I wrote earlier). And this is still bigger than 25×25 BG color, as you suggested.
So, what could be the reason, that image-swatch is displaying slightly smaller than color-swatch, at frontend.
PS: I checked at backend, Products > Attributes > configure terms, and found that, there the size is displaying in exactly same for color-swatch as well as image-swatch. It is only at frontend, that changes somewhat.
Can you please try to replicate at your end too. How can we resolve this.
9. Thanks for sharing. I will replace it.
11.
When you click “Select options” button for Variable products (on the Shop page), it then shows a button from the single product page.
Yes, this is what I was referring. The button color is partially getting reflected and updated from Styles Colors > Buttons > Shop buttons options. Which ofcourse, we do not want.
As we have already set that for Single product page, Checkout buttons..
And On the Shop page (buttons on Product Grid), are coming from Primary color option.
The buttons that are showing on the Shop Grid itself, for “Select options” and then for “Add to Cart” for variable product are relevant to each other. And should maintain consistency across. And Partial colors of buttons should not get updated from within these areas (Single product page, Checkout buttons..)
Also, when we have updated the Primary Color of Site (shop, from Settings), then the color of Add to Cart as well as Select options button (initial position) gets reflected (for both Simple and Variable products) on Shop and archive pages.
So in order to maintain uniformity, the further Add to Cart button should also reflect the same color and in same way in the Shop and Archive pages. And should show the same color, that was set from Primary Color option. Isn’t it.
11.b. Hence, I may not be able to use below CSS, as this will also change the button color on Single Product page as well.
.single_add_to_cart_button {
background-color: blue;
}
.single_add_to_cart_button:hover {
background-color: red;
}So, can you please provide the CSS, just to change the color of buttons on Shop and Archive pages on Product Grid. (so as not to change the colors for buttons on Single product page)
So as to match with the color, that we set as Primary Color from Theme Settings > Style and Colors > Primary color.
11.a. Please ask the team to update the code for Primary color, in order to maintain Uniformity across. Atleast in same relevant areas. So that button color for Variable products, also reflects same color as it is showing for Simple products, for product grids on the Shop and Archive pages.
2 Different colors, exactly on Same-Area, same-purpose, does not looks good at all.
In short, this is the Only ODD-One out. Please check below-
https://i2.paste.pics/FG5OW.png
10.c.
I have tested a custom code on my demo and it works well (see below video).
https://monosnap.com/file/gSChRhUixhKNkUS7GtRvEbK5oasHJq
Thank you for taking this to another level. And by showing it for Tablet also, in the video.
Much appreciable
Regards
