Change vertical gap between columns in WooCommerce shop page?

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Attached :)

Try this CSS:

@media (min-width: 769px) {
    #wc-column-container .product {
        margin-top: -41px;
    }
}

Hi Ying,

Unfortunately, that only moves the whole page content up towards the header and does nothing with the column gap in either direction.

Hi there,

try this CSS:

@media(min-width: 769px) {
  #wc-column-container .products {
    grid-gap: 40px 60px;
  }
}

40px = row gap, 60px = column gap

Hi :)

Doesn't work unfortunately.

Changing the row gap moves the row but changing the column gap doesn't do anything.

David's code should work, I did a simulation to show you how the CSS work:
https://www.screencast.com/t/aOMG4CYi

If you want the gap even smaller, you'll need to decrease the site container width at Customizer > layout > Container > Container Width.

And after you making changes, remember to purge the cache.

Let me know :)

I see, thank you :)

You are welcome Tim :)