Return to previous page

Shop page layout - by vincentdv - on WordPress WooCommerce support

This topic has 2 replies, 2 voices, and was last updated 3 years, 8 months ago ago by Rose Tyler

vincentdv

Participant

April 20, 2021 at 16:41

Hi good day, may I know
i) In desktop view, how to set each box equal height?

ii)In mobile view, may I know how do I make the add to cart and quantity button at each product to be center align?

iii)Currently I choose to show 3 products per row in desktop, but it only shows 2 products per row.
In mobile, it shows 1 product per row only, how do I change products per row for mobile?

iv)In mobile view, quickview button is not seen, how to show the quickview button on mobile view?

v) In mobile view, product contents in shop is relatively large, may I know how to set everything smaller and able to show 2 products per row in mobile?

I saw there are custom css settings from English tea demo import, but not sure which to change. thank you

Please, contact administrator
for this information.

#284873 Copied Theme version: 7.4.7

1 Answer
Rose Tyler

Support staff

April 21, 2021 at 07:31
Hello,

1) Try to add the next code in Theme Options > Theme custom CSS > Custom CSS for desctop:
```
.main-products-loop .products-list .product {
    display: flex;
}
.products-list {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.products-list .content-product {
    justify-content: space-between;
    display: flex;
    flex: 1;
}
```
2) Theme Options > Theme custom CSS > Custom CSS for mobile:
```
.products-list .content-product .quantity-wrapper {
    width: 100% !important;
    justify-content: center;
}
```
3) Yes, it is correct, because the List view shows 2 products for desktop, by default. You can change columns for the grid view only, for example, here is 3 columns – http://prntscr.com/11sgj33
5) Custom CSS for mobile:
```
.shop-full-width .main-products-loop .products-list .product {
    width: 50% !important;
}
```
4) Theme Options > WooCommerce > Shop > Products style > Hover buttons on mobile

Regards
#284958 Copied
Viewing 2 results - 1 through 2 (of 2 total)