WooCommerce Page Setup

[dmedianik]

In mobile view, on the shop page, the product categories widget is below the products. Is there a way to move the categories sorting above the products?

[thai]

Hi There,

To achieve that, please follow these steps:

• Add the following CSS under Theme Options > CSS:

@media (max-width: 979px){
    .archive.woocommerce aside.x-sidebar.left {
        margin: 0 0 35px;
    }
}

• Add the following JS under Theme Options > JS:

jQuery(".archive.woocommerce aside.x-sidebar.left").insertBefore(".x-main.right");

Hope it helps

[dmedianik]

There’s no way to do this on the front end editor?

I hope more woocommerce customizations will become available in the future on the front end of this theme.

[paul.r]

Hi,

Regretfully that is not possible at the moment.

You will need to add the code provided by my colleague.

This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[dmedianik]

Thanks Paul, that’s all I ask for, as long as it’s on the list! I always thought that when things are responsive the are read from left to right, that was if you put the categories on the left it would be above the products and if you put the widget on the right it would be below.

Another question is how can I make the shop page display product in rows with 2 columns instead of 1 product per row?

[jade]

Hi there,

Please go to X > Theme Options > Woocommerce then set the Shop Columns to 2:

Hope this helps.

[dmedianik]

I have that set to 4 currently, however this only affects the products in desktop view. How would you set this for mobile view?

[ruenel]

Hello @dmedianik,

The columns displays 4 in desktop screens. In smaller screens, the columns will collapse into one column only. Do you want to display two columns instead? If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
  .woocommerce li.product {
    float: left;
    overflow: hidden;
    position: relative;
    margin: 0 4% 4.5% 0;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
  }
  
  .woocommerce .cols-4 li.product.first, 
  .woocommerce.columns-4 li.product.first {
    clear: none;
  }

  .woocommerce .cols-4 li.product:nth-child(2n+2), 
  .woocommerce.columns-4 li.product:nth-child(2n+2) {
    margin-right: 0;
  }

  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-4 li.product {
    width: 48%;
  }
}

We would loved to know if this has work for you. Thank you.