WC Shop page: products per row?

[mtgame21]

When I set my “Shop Products Columns” setting in theme Options – > woocommerce, I always get one less in the row, and its like it word wraps the next product on row 2. And then starts another row.

For example, if I set the option to 5, then it looks like (* represents a product)

* * * *
*
* * * *
*

If I set it to 4, it looks like:
* * *
*
* * *
*

Any ideas how to fix? Thanks

[Radu]

Hi,

This can be a padding issue ? or who knows ? please provide page url to take a look

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This reply has been set as private.

[mtgame21]

Have you had a change to take a look yet?

[Radu]

Hi,

Yes

Add this css to wp-admin -> theme options -> general settings -> quick css

COPY CODE

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-right: 0px !important;
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Hi, I tried that and it did put the right number of products in each row. However, is there a solution where I can create space of 4px or so between the products?

When I tried to add to add padding, then it kicks down the last product to next row.

[Radu]

Add this and then set margin-right for li’s 4 px

COPY CODE

.kleo-shop-cols-5 li.product, .kleo-shop-5 li.product, .woocommerce.columns-5 li.product {
    width: 19.5%; 
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

It worked perfect..thanks.

[Radu]

You’re welcome

Don’t forget to rate our theme 5 stars on Themeforest since it will really help us.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This reply has been set as private.

[Radu]

Hi,

1. You will have apply this css

COPY CODE

@media(max-width:700px) {

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }

}

We cannot have same behavior on mobile as on the desktop because the informations (sold by etc..) are visible on mouse hover on the mobile devices we don’t have a mouse, in this case i’ve hidden these only on mobile with the provided css second line

It’s ok ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Great, that fixed it on the mobile phone view, for either orientation. I have 2 per row and mouse hover info does not show.

How do I turn off the mouse hover info when viewing on the IPAD in Portrait orientation?

When holding the Ipad in landscape orientation, the mouse hover info is not there, looks good. When I rotate it to portrait orientation, then it automatically appears on all products.

[Radu]

Hi,

Please replace the css with this

COPY CODE

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Kept both of the last two CSS recommendations and “sold by” popup is hidden for mobile and ipad, everything looks great except when in portrait mode on IPAD, the shop page is displaying products like this

**
*
**
*
**
*

instead of 2 every row.

IPAD Landscape mode shows 4 per row…correct
Mobile phone shows 2 per row in either orientation…correct
desktop mode shows 4 per row….correct

[Radu]

Hi,

Replace the css provided to you earlier with this

COPY CODE

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
 
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }

.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }
}

And let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This fixed it for the IPAD in portrait, but created the same problem for phone in landscape mode. If its too tricky, then I will just go back to previous CSS. Just let me know, thanks.

[Radu]

Hi,

Let’s try again with this, if this is not ok for you use the previous css

COPY CODE

@media only screen and (orientation: portrait) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }

.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }

}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

We can close this now, its fixed 🙂

I experimented with your code and came up using everything below that works

phone: 2 per row on portrait, 2 per row on landscape ( I added 2 lines to the first thing you gave me above)
ipad: 2 per row on portrait, 4 per row on landscape (4 per row is default in Theme options)
desktop: 4 per row

@media(max-width:700px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }

.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }

}

@media only screen and (orientation: portrait) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width:48%;}
.woocommerce ul.products li.product figure figcaption {display:none !important; }

.woocommerce ul.products li.product:nth-of-type(2n+1) {clear:both; }
.woocommerce ul.products li.product:nth-of-type(3n+1) {clear:none; }

}

[Radu]

Great

Have a nice week

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts