fbpx
🤝  NEW YEAR SALE RETURNS - 50% OFF all plans! 🤝 Grab it Now

Placement of attribute and variation swatches

Laura Mayers

I’m currently installing a new swatch system for my attributes on a staging site.  I have enabled the horizontal box in order for my swatches to show horizontally which is fine for a simple product page but when I add my variations, I’d like them to show underneath in order to keep my horizontal swatches.  Currently, it is appearing at the right side which forces the attribute swatches to a vertical position to the left.

A644A5B9-0470-4332-AB0C-0CFC5C192579.pngD80418B8-C98C-45D5-9CE3-ED4A8CE64321.png

Hakik Zaman

Hi Laura,

Thanks for reaching out to us. From my inspection, you are using the Group Swatch feature.

Can you please give me an exact product link to understand it clearly?

Thank You

Laura Mayers

Hi Hakik,

Thanks for your reply.

If you take this page as an example

https://staging.bylauramayers.co.uk/product/micro-ring-18-22-double-drawn-extensions-i-tips-50-pack

You can see that yes, I have used the group settings to group colours together but I would still like each group to run horizontal with the variations placed underneath all the grouped swatches as per the example below from your website.

I would also like the name of the selected swatch to appear next to the group name but I don’t seem to be able to find a way to do that either?

 

Thanks for your help!  Laura

 

https://staging.bylauramayers.co.uk/product/micro-ring-18-22-double-drawn-extensions-i-tips-50-pack

 

 

Hakik Zaman

Hi Laura,

I can see you have some custom CSS from your child theme: https://paste.pics/OE11I

To get the Hair Extension Length underneath Hair Extension Colors you can try the following CSS at Appearance > Customize > Additional CSS

.variations {
flex-direction: column;
}

.variations .option:nth-child(2) {
margin-left: 0;
}

Note: It is beyond our support scope when you customize it yourself.

I would also like the name of the selected swatch to appear next to the group name but I don’t seem to be able to find a way to do that either?

Unfortunately, this feature is not currently available. But it is a great idea. You can send your feature request here:

https://storepress.fider.io/

Thank You

Laura Mayers

Hi, thanks I’ll give this a go.  With regard my other question, perhaps I didn’t properly describe what I’m looking for, please see the link from your website which shows how to achieve what I’m looking for however I can’t find this box to tick even though I have the pro version?  Thankshttps://youtu.be/uvTOsjsE38o

 

Hakik Zaman

Hi Laura,

The theme you are using has changed the markup of the default WooCommerce.

If you temporarily activate any default theme (like Storefront) the feature will work well.

They have removed the <table> and replaced it with <div>.

Thank You

Hakik Zaman

Hi Laura,

I have visited your link and found everything well: https://paste.pics/OHAC8

Please let me know if I missed anything.

Thank You

Laura Mayers

Hi Hakik,

Yes, they used to be squares rather than oblong and if you scroll around different colours, you’ll see there are some longer names that now don’t fit into the rectangle (because it isn’t automatically changing) and also the line gap of the txt/names isn’t changing.

Thanks, Laura

Hakik Zaman

Hi Laura,

Could you please confirm your free and premium versions of the WooCommerce Variation Swatches plugin?

The current version of Swatches plugins is the following.

Variation Swatches for WoooCoommerce – Version 2.0.22

Variation Swatches for WooCommerce Pro – Version 2.0.22

Please make sure you are using the same version and let me know if your reported issue has been fixed or not in this latest update.

Note: Also, clear all the caches like- browser cache, caching plugin cache, and server-side cache. From my side, I couldn’t find any tooltip-related issues.

Thank You

Laura Mayers

Hi,

Thanks so much, I hadn’t seen this update for my pro version so now I have done that and everything seems to be working perfectly again.

Thank you!

Hakik Zaman

Hi Laura,

You can exclude categories from here: https://paste.pics/OHN72

Then let me know if it works.

Thank You

Laura Mayers

Hi Hakik,

I have done this and it has successfully removed them from my shop category page featuring various products but it has also then removed them and sent them back to drop downs on the individual single product shop page.

Thanks Laura

Hakik Zaman

Hi Laura,

For now, this is the only feature you can control visually.

If you want to remove the swatches from the category pages only, you have to write custom code.

Unfortunately, there is no visible option to do that.

Thank You