Before you ask please READ THIS

Woocommerce product variations overlapping on mobile

in Rife Posts: 7
I attached a screen shot of the mobile view of:

Desktop is of course fine....

It appears that when a product has too many variants - some of the other elements begin to this something I need to add CSS in the theme to fix as I add new products? Looking at some variant plugins as well...
720 x 1280 - 284K


  • AirAir
    Posts: 10,796
    Hey :-)

    Please first update the theme to the newest version, and check if it will be better.
    I will also soon check how it behaves on the default WordPress theme and in the newest Rife.

    I will reply later here.

    With kind regards.
  • AirAir
    Posts: 10,796
    Hey :-)

    I have 2 solutions for you.

    1. Try this custom CSS:
    .woocommerce .theme-thumbs div.product div.images .flex-control-thumbs{
    	max-height: 100%;
    	overflow: auto;
    2. If you don't like the effect of 1st solution, try to switch to default WooCommerce thumbs in Appearance → Customize → Shop Settings → Single product → Theme thumbnails → Disable.

    Please let me know what do you think.

    With kind regards.
  • Posts: 7
    option 1 looked great - thank you!
  • AirAir
    Posts: 10,796
    Thanks for the coffee!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion