Centering products in Shop tab again

Resolved jazzu
(@jazzu)

2 years, 3 months ago
Hello again.

I know I’ve created this thread like 2 times already, but I have a problem again.

First time, I added the code below and it worked:
```
.woocommerce.tax-product_cat ul.products {
    justify-content: center !important;
}
```
Then some time later, it stopped working. I got the solution, which was this code:
```
.woocommerce.tax-product_cat ul.products {
    justify-content: center !important;
    display: flex;
}
```
It worked for some time, then it messed up the products, because they weren’t in columns anymore. They were are in 1 column. When that happened, I fixed it by removing the display: flex.

That worked for a while, but now I have the same issue again.

If I use the first code, it doesn’t do anything. If I use the second code, products are all messed up again.

Here you can see what it looks like with the first code. Here you can see, that the second code does in fact work, when there are less than 5 products. However, HERE you can see, what the second code does, when there are more than 5 products.

What can I do about this?

Kind regards

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Igor H
(@ihereira)

2 years, 3 months ago

Hello there,

It looks that the font size is the same on the shop page, but the image sizes are different.

Be sure your images have the size you need (Do they have the same dimensions?), you can change what image sizes are used in WooCommerce via hooks:
https://woocommerce.com/document/image-sizes-theme-developers/#section-4

I hope this leads you in the right direction.

Thread Starter jazzu
(@jazzu)

2 years, 3 months ago

Hi @ihereira !

Thank you for your reply. The image sizes are the same, I used the same canvas size for every image that’s uploaded on the website. There are problems just because of “display: flex”. Is there an alternative to center the products?

Kind regards

Margaret S. woo-hc
(@margaretwporg)

2 years, 3 months ago

Hi @jazzu

It seems you’ve managed to resolve the problem already.

I visited this page which has 19 products, and all is looking well organized.

Link to image: https://snipboard.io/MuURGv.jpg

If it appears otherwise at your end then you may clear your browser’s cache as explained in this guide

Thread Starter jazzu
(@jazzu)

2 years, 3 months ago

Hi @margaretwporg !

I didn’t resolve it, I just removed the display: flex part of the code. If you look at any category that has less than 5 products, you’ll see that they are not centered.

Kind regards

Margaret S. woo-hc
(@margaretwporg)

2 years, 3 months ago

Hi @jazzu

In the categories that have less than 5 products, the products are to the left. This is quite normal, though I understand you would prefer those to be centrally aligned. At least this issue is no longer there.

You can try applying CSS for any alignments you’d like, from these examples.

If you’d like to learn more about CSS, we highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

I hope this helps!
Thread Starter jazzu
(@jazzu)

2 years, 3 months ago
Hi @margaretwporg !

Thank you for your reply. I managed to fix the issue. I went and read some stuff about display: flex and how to contain it. What solved my issue was flex-wrap: wrap

Now the code looks like this:
```
.woocommerce.tax-product_cat ul.products {
	justify-content: center !important;
	display: flex;
	flex-wrap: wrap;
}
```
And now, the issue is solved. Thank you both for your feedback!

Kind regards
- This reply was modified 2 years, 3 months ago by jazzu.
Margaret S. woo-hc
(@margaretwporg)

2 years, 3 months ago

Awesome! 🙂

Thanks for sharing your solution with the WooCommerce community.

It’ll be helpful for others facing a similar issue.

I’ll mark this thread as resolved now. Feel free to create a new topic if you have any other questions.