CODEWITHSUNDEEP
phpcsswordpresswoocommerceproduct
Dr.MTR
Dr.MTR

Reputation: 207

Set correctly the number of items by raw in Woocommerce archive pages

I have one weird issue into my Woocommerce store. When I check in my shop via desktop, all seems OK, but when check from smartphone, show me only 3 product items, others are missing.
I Tried to scroll down, but nothing happens. I have noticed that item blocks don't wrap into parent block, and continue to be displayed inline, like desktop version.

enter image description here

EDIT I found this CSS:

.woocommerce ul.products {
display: flex;
 flex-direction: row;
}

When removing: 

display: flex;

… it show all categories, but one bellow one, and I want to show three columns on desktop and one column in on smartphones.

How Can I do that?

Can someone to tell me where is issue, because I haven't be able to solve this myself.

Upvotes: 1

Views: 470

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253804

In your theme the products are set to be displayed in 2 columns when looking to the html structure:

  • each odd <li> has "first" class
  • each even <li> has "last" class

So yes you should remove those wrong CSS rules: 

.woocommerce ul.products {
    display: flex;
    flex-direction: row;
}
.woocommerce ul.products li.product {
    flex-grow: 1;
}

Or override them inserting the following CSS rule in styles.css file of your active child theme (or active theme):

.woocommerce ul.products {
    display: block !important;
}

And try to find out in your theme for woocommerce settings regarding the number of items by row to be displayed.

Or using this classic code snippet, that will set 3 product by row:

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 3; // 3 products per row
    }
}

Code goes in function.php file of your active child theme (or theme).

Tested and works.

Never use CSS display:flex for Woocommerce archive pages like shop on items.

Edit: To get your product on 2 columns on smartphones (below 480px) add this to the styles.css file of your active child theme (or active theme) at the end of the file:

@media (max-width: 480px){
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        float: left !important;
        width: 48.05% !important;
    }
}

Upvotes: 1

Related Questions