Swatches on product archives – Text only as no image or colors needed

Hi,

I need to display the products/shoes sizes on the shop page (product archive) and would like to show the numbers (like 8, 8.5, 9 …etc) or text based (like S, M, L, XL) swatches rather than color or images which I was able to achieve already but does not work for my kind of website.

Appreciate your help in pointing me to the right direction.

Did I mention that it is a great theme, thanks for all your efforts.

Regards,
Sue

Hello there,

Thank you for using our theme.

It seems to be our theme problem, could you provide your ftp access so we could do a quick fix for you?

Kind Regards,
Xtemoa

Hi,

Thanks for getting back to me; may I ask if this is a known issue or needing troubleshooting from your side? If you know the fix then I will be able to implement it for you if enough instructions are provided.

Thanks,
Sue

So you need to replace the file inc/woocommerce.php with this one https://drive.google.com/open?id=0B4HduPLdnq5UbUdPRFBFN1RVWUk

And also add the following code snippet to your Custom CSS in Theme Settings

.swatches-on-grid .swatch-on-grid {
    font-size:0px;
}
.swatches-on-grid .text-only {
    font-size: 14px;
    font-weight: bold;
    width: auto;
    color: #212121;
    min-width: 15px;
    text-align: center;
}

Also note that this wont work if you create your variations setting “Any size” value for it. You have to set a variation for each attribute value.

Hi,

Thanks for including this in 1.4.1 upgrade; I have applied it to my website and I can see the swatches on the shop page now. I have conducted some testing and noticed the following observations for your kind attention:

1- The displayed variation (in this case size) text is printed next or below to the select options (not perfectly aligned) in the case of the alternative Hover on product option; while the other hover on product options (with overlay) the variations can not be seen because it is black in color (like the overlay color). To sort this out can you please revise your style sheets to correct the issue; I would suggest formatting the variations in outline boxes with white background similar to the concept in the following screenshot:
https://www.360brands.com.au/wp-content/uploads/2016/04/swatches.png

2- There is no tooltip on the variations; would be great to show it there as it gives users ability to read more about the size description (like UK, US, CM …etc). Also adding the name/title (as “Size: “) of the variations next to the variations will help (like screenshot)

3- Also noticed that the variations are listed for all the included variations on the product regardless if they were out of stock or not which will mislead buyers and lead to frustration (to simulate this add a variation and place it out of stock or qty = 0; you would still see the swatch value although it is out of stock). Suggest adding a separate style formatting for out of stock items like a diagonal cross or special tag to indicate they are not available anymore (like screenshot provided earlier)

And finally (and this is a suggestion) would be great if the user can select the variation and click add to cart straight from the shop/quick view page rather than the need to go to the single product page. So making the swatches clickable would make a difference in the users’ experience.

Hope the above helps in testing the newly developed feature and would collaborate to get it to the next level 🙂

Many thanks,
Sue

Hello there,

Sorry for delay with answer.

1. It seems to be a small CSS issue, of course will fix in the next release. Please add the following code snippet to your Custom CSS to fix

.basel-hover-info .swatch-on-grid.text-only.swatch-size-large {
    color: white;
    width: auto;
}

2-3. Thank you for your very useful suggestions, we will probably some solutions to this issues in the future also.

4. It would be very nice to implement this option also, but we can’t guarantee that it will be available. We need to spend some time investigating if it would be possible with woocommerce core add to cart function.

Kind regards,
Xtemos

[Author]

Posts