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

Swatches on Category Page

Martin Braut

Hi team,

on the product category page, I want the swatches to be displayed in two rows of three swatches each.

Here a screenshoot: https://imgur.com/Hd5h6L5

Thanks

Hakik Zaman

Hi Martin,

Thanks for getting back to us. Unfortunately, it is not possible.

Because it will affect all swatches’ shapes on the category page.

It will be displayed like this screenshot.

Thank You

Martin Braut

Hi Hakik,

exactly I want that like on your screenshot, but three in one row, not two.

Thanks

Hakik Zaman

Hi Martin,

You can try the below code-

ul.variable-items-wrapper.button-variable-wrapper.wvs-archive-variable-wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

ul.variable-items-wrapper.button-variable-wrapper.wvs-archive-variable-wrapper li {
   flex: 0 0 32%;
   max-width: 32%;
}

But please keep in mind it may affect other pages’ layout. As I said before, it is not possible to target specific variables/variations.

Thank You