Enjoy 20% Off on Friday & Cyber Monday Deal. To Get the Discount Code, Check here

How to inline display (align horizontally) swatches?

Igor Shkarin

Hello!

I really need to make our swatches horizontal look. See the screen:

(i kinda can’t upload image.. some troubles….. tell me if you need the screen, maybe text description of the problem is enough.)

I have no idea how I’ve seen that look… trying to repeat, but not success. So I need help.

Shamser Suzon

Hello Igor Shkarin,

I couldn’t fine any screenshot in your last message. Please, use a tool like this to share screenshots: https://prnt.sc/

Thanks

Shamser Suzon

Hi Igor,

Unfortunately, the feature is not currently available..

​But it’s great idea. I’ve added it as feature request. I’ll discuss this feature with my team and make it available with the coming version.

Cheers!

Shamser Suzon

Hello Igor Shkarin,

Actually, you don’t have enough space in the right side of the swatches grid and that’s why they have come to the 2nd line.

Thanks

Igor Shkarin

But… how I did the first screenshot… somehow the page loaded with the needed layout..

I’m confused.
Maybe you can clarify it with the developers? I would really appreciate it.. or they could advice how to implement it with temporary css?

 

I really need it, pls.

Shamser Suzon

Hello Igor Shkarin,

Please, push the following CSS codes to your custom CSS section:

.woo-variation-swatches .variable-items-wrapper {
flex-wrap: nowrap !important;
}

Let me know how it goes.

Thanks

Igor Shkarin

Hello!

That CSS is good. Thanks a lot. Figured out that if there are lots of variations, they are go out of the screen..

Check this out: https://prnt.sc/u0u754

 

Can you advice, please?

Shamser Suzon

Hello Igor Shkarin,

Yes, as I have already mentioned to you earlier that there is not enough space and that’s why the swatches came to the 2nd row. but now we have forcefully made them in single row and thus, the width got spread.

It’s a natural behavior indeed.

Thanks