Related products amount and size

vcgmotion · April 2022

Hello,

is there a way to make a related product card smaller, so that there are 5 products in line, instead of 3?

Phil · April 2022

Hi,

Are you using a single product template?

If yes, then in the related products options you can set the number of columns and related products.

Thanks

vcgmotion · April 2022

Is it possible for the pre-built single product layouts? Like Tabs, for instance?

Phil · April 2022

Sorry, but I do not understand.

Can you describe in more detail what would you like to achieve?

Thanks

vcgmotion · April 2022

I mean if I choose one of the BeTheme single product pre-built layouts like this:

Will I be able to adjust the related products columns number with custom CSS?

Phil · April 2022

Yes, it will be possible to achieve that with a custom CSS code for the Tabs style.

If you send a link to your single product, I can help you write it.

Best regards

vcgmotion · April 2022

Here is a link: https://vcgmotion.com/elements/titles-bundle/

Phil · April 2022

Please, use the following code:

.woocommerce ul.products li.product, .woocommerce .products.related ul.products li.product{
   width: 18%!important;
}
.woocommerce .products.related ul.products li.product:nth-child(3n+1){
   clear: unset!important;
}
.woocommerce .products.related ul.products li.product:nth-child(5n+1){
   clear: both;
}

Thanks

vcgmotion · April 2022

Great, thank you, it worked!

But it seems adding this code affected the products list on the shop page as well, there are some empty areas appeared: https://vcgmotion.com/elements/

Phil · April 2022

Sorry. Please, use this instead:

.single-product .products.related ul.products li.product{
   width: 18%!important;
}
.single-product .products.related ul.products li.product:nth-child(3n+1){
   clear: unset!important;
}
.single-product .products.related ul.products li.product:nth-child(5n+1){
   clear: both;
}

Thanks

vcgmotion · April 2022

Great, works perfectly! Thank you!

vcgmotion · May 2022

Hello, sorry for bumping this up, but could you also adjust this code for 4 related products? I tried to do it myself, but no luck.

Thanks!

Phil · May 2022

Please, try this one:

   .woocommerce ul.products li.product, .woocommerce .products.related ul.products li.product{
      width: 22%!important;
   }
   .woocommerce .products.related ul.products li.product:nth-child(3n+1){
      clear: unset!important;
   }
   .woocommerce .products.related ul.products li.product:nth-child(4n+1){
      clear: both;
   }

Thanks

vcgmotion · May 2022

Great, thanks!

Related products amount and size

Comments