Number of columns

Hello there, the plugin doesn’t have it’s own output markup but instead, it uses active theme’s code.

I can try to help you with this one but you ‘ll have to reactivate the plugin and set the desired number of products you need to display in 1 row.

Let me know when you do.

Ah ok, but everywhere else it is displayed into rows of 3 (shop pages, standard related products) so i wasn’t sure.
I activated it again and set the number to 3 (since i need 3 per row, but then 2 rows).
Thank you for looking into it!

Thanks for the update, so you need 2 rows with 3 columns each.
If that’s the case then please disable the slider and set plugin options to display 6 products.

Done.

Try to add these CSS rules to your child theme or wp customizer

.woo-related-products-container ul.products {
    display: flex;
    flex-flow: row wrap;
}
.woo-related-products-container ul.products li {
    width: 31%!important;
    margin: 1%!important;
}

• This reply was modified 5 years, 3 months ago by Vagelis.

Works great on a laptop, so almost ther.

On a mobile device it normally displays 2 per row instead of 3 (due to screensize i guess, its probably in the theme/woo also).
But with this code its also 3 on mobile devices, which means the titles are going through eachother/float over eachother.

That’s because of the !important statements try without !important and it works your theme should be able to override with default media queries if not then you ‘ll need custom media queries

something like:

.woo-related-products-container ul.products li {
    width: 49%!important;
    margin: 1%!important;
}

Without “!important” it works on mobile but i get 3 rows now on a laptop: 1 row with 1 product, 1 row with 3 products and 1 row with 2 products.

If i add/change to:

.woo-related-products-container ul.products li {
width: 49%!important;
margin: 1%!important;
}

I get 6 rows with one.

Any other options?

You just need to adjust your CSS rules.

Cant figure it out but i will keep trying.
Thank you so far.