[Resolved] Product variation not collapsing effecting mobile versions

[Henry Bowman]

We decided to test out a tiny plugin that adds an image to the attributes in woo commerce product variations. We tested it out first on a test domain which runs the same version of generate press and child theme. The plug in worked great. However when we applied it to the live site, we ran into the variation display “not playing” with the elastic look of the site when it runs into smaller browser screens and the tablet, mobile versions of the site. The variations section will not fully follow the container and sticks out beyond the containers borders making the smaller mobile displays look horrible.

Both sites run GP 2.2.1 with GP Premium 1.7.6 and a child theme.

Test site product working perfectly: http://americannunchaku.com/product/red-oak/

Live site not using the plug in, working perfectly: https://usanunchaku.com/product/hard-maple-nunchaku/

Live site with image attribute running: https://usanunchaku.com/product/12-inch-red-oak-nunchaku-2/

The only difference between the two sites is that the test site in running the new WordPress 5.0.1 and has woo commerce Blocks installed but the site is not using the Gutenberg editor yet.

[Leo]

Hi there,

Have you tried clearing your caching plugin or reported this to the plugin author?

As you said both sites run GP 2.2.1 with GP Premium 1.7.6 and a child theme so I’m not sure how it could be a GP problem?

Let me know 🙂

[Henry Bowman]

Its definitely theme related, as the theme controls the container properties. I’m wondering if the new word press version or the use of the woo commerce blocks would effect the container properties.

[Leo]

Hmm but it works on the test product with the same theme files?

Can you disable the caching plugin first?

[Henry Bowman]

We run WP-rocket. Are you saying to disable it to test out the site with the issue?

[Henry Bowman]

OK, we tried it with and without the caching plugin, no change. and to be clear, we do clear the cache between every move.
What we did discover is that it isn’t the variation image plug-in at all. We turned the new plugin off as well, and are still seeing the same problem on just the one site.
The Woo Commerce variation attributes do not stay within the elastic container by collapsing as the container’s width shortens.

[Leo]

Ok so this is still the page in question?
https://usanunchaku.com/product/12-inch-red-oak-nunchaku-2/

Can you do a quick test by activating a twenty series WP theme and see if it works correctly? Then we will know if it’s a GP problem or a WooCommerce problem.

If it works with twenty series WP theme, can you leave the variation image and caching plugin off so we can see the source of the code?

Thanks!

[Henry Bowman]

Yes that is an example of the issue seen in that page.

We activated twenty- fifteen and while the variations stuck to 2 column widths, they never went outside of the container. We had to quickly switch it back because it looked like a hot mess, but yes switched the theme did stop the issue.

We will leave the variation plugin off and the wp rocket cache.

[Leo]

I just checked this page again: https://usanunchaku.com/product/12-inch-red-oak-nunchaku-2/

Both variation plugin and the wp rocket cache are still activated from what I can tell.

[Henry Bowman]

sorry, you are correct, i got side tracked and forgot to turn them off.. They are off now.

[Tom]

Hi there,

The plugin is using tables, which aren’t responsive.

What you can do is set them to display: block at your needed width.

For example:

@media (max-width: 768px) {
    .variations,
    .variations td,
    .variations tbody,
    .variations tr {
        display: block;
    }
}

[Henry Bowman]

That makes perfect sense, what is weird is that it works on our other site running the same generate press versions and the same plugin.

http://americannunchaku.com/product/red-oak/

we tested the whole process out there first and it worked the way we wanted it to, but we ran into problems when we placed it on our live site.

So i need to ask where the code you mentioned should be placed, and what setting should it have so the variations can shrink down to 3 selection columns before it gets pushed them under the main photos on mobile and tablet displays. Pretty much just like our other site mentioned above.

[Tom]

I wonder if it’s being caused by that long item you have in the rope options dropdown. What happens if you shorten that?

CSS can be added using one of these methods?: https://docs.generatepress.com/article/adding-css/

[Henry Bowman]

We changed the live site for the one product to display the same number of options (12 colors) it didn’t fix it, but there is a visual difference right off the bat. The test site that works displays 2 rows of 6 and then adapts as the screen size decreases. The live site we are having the issue with displays a top row of 8 then a second row of 4. Not sure if that is an important clue, but it is a difference. The other thing to note on the live site is that the rope length drop down starts going beyond the container before the color swatches.

test site: http://americannunchaku.com/product/red-oak/
live site: https://usanunchaku.com/product/12-inch-red-oak-nunchaku-2/

[Henry Bowman]

I figured it out!! The drop down attribute is causing the issue. The attribute when created terms using the Attributes page, it causes the fly out to stick out beyond the container. When it’s made on the product page way in woo commerce, it doesn’t. This actually seems like a woo commerce issue now. The big issue now is that the attribute would have to be made one at a time over and over on the product page because letting the attributes page create it causes the issue.

Should we still try injecting the CSS you had mentioned?

[Author]

Posts