Archived topic
How to center products on shop page (WooCommerce)
5 replies · Started by Marc-Andre on June 5, 2021
Hi, I simply want to center the products and categories on the shop page. The shop page on desktop is 4 elements per row, but when there is less than 4, I would like them to center themselves. Is it possible? I tried many CSS available online without success.
Hi there,
Unfortunately I don't think that's possible as the grid is set for 4 products per row.
You would need to use this filter to set it to 3 or less when there isn't enough products to fill the row:
https://docs.generatepress.com/article/option_generate_woocommerce_settings/#options-%E2%80%98columns%E2%80%99
Thank you for the information. I looked at the provided resource and I understand that I can use PHP to accomplish this. I added the code snippet plugin after reading other GP articles. I understand that I can use the provided example at the bottom of the page and that I need to write a conditional ''if'' that says if there is 3 elements or less, use 3 columns, but I don't know how to write it correctly.
If you are referring to the main shop page, then you can actually use the customizer option.
There isn't a way to identify how many products there are in the loop without some custom coding which is outside the scope of this forum unfortunately as that's handled within the WooCommerce plugin itself.
You will basically need to set it to 3 when you only have 3 products, then set it to 4 when you have more products.
Good to know. Thank you for support!
No problem :)
