Docs

[VetCur]

Hello

I´m having a problem with my woocommerce shop page…
It only have 2 collumns and in some rows only 1.

See here: http://www.vetcur.de/produkte-2/

Hope you can help 🙂

Kind Regards

[Christopher]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Hope it helps.

[VetCur]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.archive.woocommerce  li.product.last {
    margin-right: 4%;
}

.archive.woocommerce  li.product.first {
    clear: none; 
}

.archive.woocommerce  .products.cols-3 li:(3n+3) {
    margin-right:0;
}

Hope that helps.

[VetCur]

it ALMOST worked

– if i set it to 3 collumns i get 2 and if i set it to 4 i get 3…

But it is MUCH BETTER!

[Rahul]

Glad to hear it!

Let us know if you need any further assistance with the current issue!

Thanks!

[VetCur]

It isn´t completly fixed..

I can do with 3 collumns BUT they aren´t centered and it is not working – as it´s supposed to 🙂
+ it is messed up on tablet

Hope you have an idea.

Regards

[Rad]

Hi there,

It purely depends on your target columns, example,

  .products.cols-4 li {
  float:left !important;
  clear:none !important;
  margin-right: 4% !important;
  width: calc(100% / 4 - 12%) !important;
  }
  
  .products.cols-4 li:last-child {
  margin-right: 0 !important;
  }

  .products.cols-4 li:nth-child(4n) {
   clear: right !important;
   }

.products.cols-4 li:nth-child(4n+1) {
clear: left !important;
   }

This only applies to 4 columns and you’ll have to create another set for other columns.

This line calc(100% / 4 - 12%) !important; means

100% divide by 4 minus the 4% spacing ( since there are 3 gaps in 4 columns / 1[]2[]3[]4 then it will be 12% in total )

Thanks!

[Author]

Posts