Show attributes on archive/shop issue in menu

Hi Steven,

Thanks for reaching out to us.

We’ve enabled the variation swatches on the archive page, which is great – however is there a way to limit options (like on the product page itself) but only on the shop page? Some hoodies have over 60 colours so might be good to limit it.

Please check this link to limit the swatches: https://demo.getwooplugins.com/woocommerce-variation-swatches/product-details/more-link-for-catalog-swatch/

The main issue though is in the menu. If you visit the link below and hover over “hoodies” or “t-shirts” you will see the hover menu showing the colours in a long list… is there a way to fix this?

The issue is coming from your theme. They have some global style for the <ul> tag. So, Please add the following CSS at Appearance > Customize > Additional CSS

@media screen and (min-width:993px){
body .main-navigation ul li:hover>.sub-menu-wrapper ul.variations,
body .main-navigation ul li:hover>.sub-menu-wrapper ul.archive-variable-items{
display: flex;
}
}

Hope to hear from you soon.

Thank You

Hi Steven,

As I said before, the styling is controlling your theme. They have global CSS for all <ul>.

If you give us a screenshot of the issue we would understand it clearly.

You can directly post the screenshot link here by uploading your screenshot to: https://paste.pics/

Thank You

Hi Steven,

Unfortunately, I didn’t get the swatches by visiting the link your have shared.

Here is a screenshot: https://paste.pics/PRY5B

So I couldn’t inspect it further.

Thank You