Align products in the center of the page on Woocommerce

In your CSS I see this:

.col-md-2 {
    width: 16.66666667%;
}

When I remove it, the bottle get much bigger and everything centers and it looks great.

That CSS is part of Bootstrap, and I’ll bet you don’t want to hack that, so the next step would be to remove the class “col-md-2” from each item in your templates.

Thanks for your answer and sorry for the next stupid question, I have no idea where to go to remove the class “col-md-2” from each item in my templates.

Any suggestion where to look for it?

Thanks, and sorry again but it’s the first time I am trying to do this.

Enrico

Uh… I think removing that class could have other adverse impacts, that’s not the route I’d follow. But Topher is correct, you shouldn’t want to hack the bootstrap CSS. What you can do though is override it. Add this to the Additional CSS customizer section:

@media (min-width: 992px) {
  .col-md-2 {
    width: 33.33% !important;
  }
}

If that works without the !important modifier, all the better.

Thanks! Still that I don’t know where to add it, can you point me to the right place please?

Is it in Basel – custom css – global custom css ? Which line should i place it?

Thank you for your help

No, don’t mess with existing CSS. The idea is to add your own rule in a way such that it loads later and overrides previous, similar code. The best way to do this is through the customizer’s Additional CSS section. CSS added there ends up as inline style which occurs after the external files have all been loaded.

In the admin area, go Appearance > Customize. At the bottom of the sidebar, follow Additional CSS. Enter the offered code below anything else that is already there in the textarea (it might be empty, or not). Click the Publish button near the top after adding the CSS code.

I followed the instructions, it shows them centered, but the bottles are way too big now. What can I change to just have them centered but of the same size?
If there is even a way to do it

Insert this into the previously offered code, between the two closing curly braces:

.products.elements-grid.basel-products-holder.pagination-pagination.row.grid-columns-6 {
    width: 50%;
    margin: 0 auto;
}

It worked on some pages where there are only 3/3 products
( https://www.villasanzeno.it/villa-san-zeno/ ) and it looks great!

But in the pages where there are more products
(for example: https://www.villasanzeno.it/campagnola/ or
https://www.villasanzeno.it/i-classici-villa-san-zeno/ ) it completely put everything off.

The category that contains most products has 6 products that should be displayed in 1 line.
The dimension of the pictures now is perfect, they just should be all in one line.

Sorry if I keep messaging, but I don’t know anything about code and I don’t know how to fix it.

You’d best remove the offered code then. I don’t know how one would center a variable number of items with only CSS, sorry. You might try asking how to do so through your theme’s dedicated support channel. I think it may require altering the HTML output.