Want To Add Extra Images Per Product Variations? Download This Free Plugin

Swatches Alignment on Archive Page

Martin Braut

Hi team,

I want swatches on archive page to be centered. I have set it this way, but they are still displayed on the left. Can you please check this out? Thanks.

swatches-align.jpg

Kind regards

Hakik Zaman

Hi Martin,

Thanks for reaching out to us. I have added the below CSS at Appearance > Customize > Additional CSS

/* GetWooPlugins Support */
.woo-variation-swatches .variable-items-wrapper {
justify-content: center;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):first-child {
margin-left: 4px;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):last-child {
margin-right: 4px;
}

Can you please check and let me know if it resolves your issue or not.

Thank You

Hakik Zaman

Hi Martin,

I have changed the code at Appearance > Customize > Additional CSS

/* GetWooPlugins Support */
.woo-variation-swatches .archive-variable-items.variable-items-wrapper {
justify-content: center;
}
.woo-variation-swatches .archive-variable-items.variable-items-wrapper .variable-item:not(.radio-variable-item):first-child {
margin-left: 4px;
}
.woo-variation-swatches .archive-variable-items.variable-items-wrapper .variable-item:not(.radio-variable-item):last-child {
margin-right: 4px;
}

Please check now and let me know if it resolves your issue or not.

Note: Don’t forget to clear your cache like- Browser Cache, Caching Plugin Cache, and Server-Side Cache (If you have any)

Thank You