Woocommerce Question posted in
The official Woocommerce documentation can be found here.

2 products next to each other on Woocommerce product category page

I use the WordPress Avada-theme and Woocommerce for a webshop. Now I have put some code in my css to display 2 products next to each other in my shop in Avada in responsive view.

I used this code:

@media only screen and (max-width: 800px) {
/* lists on mobile */
div.woocommerce.columns-4 > ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
/*li elements on mobile*/
div.woocommerce.columns-4 > ul > li {
width: 50%;
box-sizing: border-box;
}
}

Now on the homepage (Aalvink.nl`) I get 2 products next to each other (big improvement), but on the product-category pages the I still see 1 product per column (eg https://www.aalvink.nl/product-categorie/bbq-american-style/).

Does anybody know how to fix this? Or can anyone see what I’ve done wrong that these category-pages are being excluded from this styling?

Tags:

3

Answers


  1. 0

    Try to use this css:

    @media only screen and (max-width: 800px) {
  /* lists on mobile */
    .products.products-4 {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }
  /*li elements on mobile*/
    .products.products-4 > li {
      width: 50%;
      box-sizing: border-box;
    }
  }

    You dont have div with ‘woocommerce columns-4’ classes on page https://www.aalvink.nl/product-categorie/bbq-american-style/

    Login or Signup to reply.
  2. 0

    In home page, there is a width of 49% while it is different in product page. I have added the CSS in my answer with media query as it is needed only in mobile view. Hope this helps. 

    @media (max-width:767px){
  #main ul.products > li.product{
      width:49%;
      float:left !important;
  }
}
    Login or Signup to reply.
  3. 0

    Looking at the source code of the page, you have forgotten to wrap your UL element with your div.woocommerce.columns-4

    If you wrap your UL element in the product page, you should get the same result.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search