How do i set 10 products in a row for woocommerce?

Hi there @raibakhan ??

Thank you for reaching out. I’d be happy to help you with this.

How do i set 10 products in a row for woocommerce?

From what I gather, your client would like to display 10 products in a row.

I went ahead with testing, with both WooCommerce Blocks and WooCommerce Shortcodes. The design started “breaking” after 6 columns.

It is worth keeping in mind that mobile devices account for a large part of the visitors for any given site these days, and such a requirement sounds very much desktop-specific. More so, for displays with bigger resolutions than usually encountered. Otherwise, usability considerations come into play.

To clarify, what are the specific requirements, as a use case, for this implementation?

Thank you for looking into this for me. I appreciate your efforts in testing with both WooCommerce Blocks and WooCommerce Shortcodes.

The client envisions a grid layout for the desktop version that showcases 10 products horizontally in a row.

Hello @raibakhan,

Thank you for looking into this for me. I appreciate your efforts in testing with both WooCommerce Blocks and WooCommerce Shortcodes.

WooCommerce inherits the (maximum products per row) value from your theme so I believe this is better discussed with your theme author. :?)

Could you please check if adding the following snippet does the trick?

/*  Make archive products 10-rows  */
@media screen and (min-width: 1025px) {
 .archive .grid-lg-col-6 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

If you’ve never added custom CSS to your theme before, you can check this guide: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Let us know how it goes!

Thanks a lot the problem is now solved. But i’ve another Question I;ve attached the image. It is possible to design this kind of shop page.

https://drive.google.com/file/d/1r4l1QInVhpNijX2uKmMBUtPreDCmLWur/view?usp=sharing

Hi @raibakhan,

I’ve checked your screenshot and I can confirm that it’s definitely possible to achieve what you’re aiming for. However, you need to have a solid understanding of WordPress and WooCommerce to do it.

Alternatively, you may consider using a page builder such as Elementor or Block. These tools can help you design a product archive that matches the one in your screenshot.

Please note that to alter the design of elements like you are requesting would require some custom code to be written, which is not within the scope of our support policy. Therefore, if you need help with custom development tasks, you can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

If you are comfortable with coding yourself and have questions, I would also recommend that you consider:

• WooCommerce developer Portal
• WooCommerce Slack Community
• Advanced WooCommerce Facebook group

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

Thank you.