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

swatches variations bug

Gabriel sarateanu

The varations are bugged, when i check my product hooligan( https://homeclubsocks.com/product/hooligan/), there’s a strange line and when i select a size the clear button is strange!Capture.PNGCaptaure.PNG

Hakik Zaman

Hi Gabriel,

Thanks for reaching out to us. Could you please give an exact link to check?

Hope to hear from you soon!

Thank you

Hakik Zaman

Hi Gabriel,

The issue is not coming from our plugin. This style is coming from your theme OceanWP. Please check this screenshot. Here a clear link is hidden. That’s why it is happening.

Please place the below CSS at Appearance > Customize > Additional CSS

.woocommerce div.product form.cart .variations .reset_variations {
   display: inline-block;
   float: none;
}

Then check your product page and don’t forget to clear your cache ( browser cache + caching plugin cache + server-side cache ) before checking.

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

Hope to hear from you soon!

Thank You

Gabriel sarateanu

Hi,

The css code worked but if you check again it kinda moves the sizes to the right a bit!

Thank you.

Hakik Zaman

Hi Gabriel,

Sorry, I just forgot to attach the screenshot. Check the screenshot here.

you check again it kinda moves the sizes to the right a bit!

I didn’t find the issue mentioned. It is in the exact place as it was before adding CSS. Check this screencast.

Please let me know if I missed anything.

Thank You

Hakik Zaman

Hi Gabriel,

Do you mean it moves after adding the CSS I provided?

If yes, I have given you a screencast in my last reply. From my end, it is in the same place as it was.

Hope to hear from you soon!

Thank You

Hakik Zaman

Hi Gabriel,

Add the below CSS at Appearance > Customize > Additional CSS

table.variations tbody tr {
   display: flex;
}

table.variations tbody tr th,
   table.variations tbody tr td{
   flex: 1 1 50%;
}

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

Thank You

Hakik Zaman

Hi Gabriel,

Now the character of the label is very short. If you keep them closer, it may break the layout in the future.

Because, if you add an attribute with the long character it will not fit on that specific space.

Please let me know your thought.

Thank You

Gabriel sarateanu

Well in the futur, i can always delete the code that makes that! But for now I’ll probably just have the 2 sizes for the next few months, so i don’t mid!

At least,  i want to try 🙂

Hakik Zaman

Hi Gabriel,

You can try the below CSS by replacing the previous CSS-

table.variations tbody tr {
  display: flex;
}

table.variations tbody tr th{
   flex: 0 0 15%;
}
table.variations tbody tr td{
   flex: 0 0 85%;
}

Thank You