Looking for help with moving sidebar above products on mobile

Hello,

Add the below code to change the order of the sidebar. It will only change the order of woocommerce pages.

@media only screen and (max-width: 667px) {
.woocommerce-page div#content-wrap {
    display: flex;
    flex-direction: column;
}

.woocommerce-page aside#right-sidebar {
    order: 1;
    -webkit-order: 1;
}
.woocommerce-page div#primary {
    order: 2;
    -webkit-order: 2;
}
}

Hi, Amit

I can’t believe it works perfectly!! You really made my day!! Thank you very much, Amit! Hope you have a good day and more!!

For anyone who can reach to this thread and look for solution like me, I’m using OceanWP child theme with Woocommerce, Elementor. Hope you can do the custom by following this thread. Cheers!

??

You’re most welcome!

Thanks that worked amit singh, could tell me code such that i have two side bars for my eccommerce one product categories and other search bar i only want search bar to move on top

Hello,

This feature is directly added to the theme. No need to add the code anymore. Just go to Customize > Woocommerce > Archive and select sidebar/content layout for mobile view. Similarly for the single product page.

To display the search bar on the top, you need to use OceanWP Custom Sidebar plugin with some code.

Could you tell me how to make woo product search bar beautiful ,or how to customize its looks

You can use browser inspect tool to find the CSS class and style it as per your need.

@apprimit Hello Amit,

Kindly I need your help to do the same friends request with storefront theme, i tried the above code but unfortunately it doesn’t work.

any suggestion

@mlahzi please create a topic on the storefront support forum. We only provide support with OceanWP.
You can use the below CSS code to reverse column in storefront theme –

@media (max-width: 768px) {
.col-full {
    display: flex;
    flex-direction: column-reverse;
}
}

@apprimit
you are brilliant man, thanks a lot you fixed my big problem with small code

You’re welcome!

@apprimit
I’m creating website as a automotive spare parts, so I need to link the car model to car brand.
I create car brand as a category, and all other option such as car model and year attributes

my problem for example is: when I add one spare part to Volkswagen and Skoda and chose the models for both
Octavia for Skoda and Jeta for Volkswagen.

when the customer use filter to get his spare part and chose Skoda he will find Jeta as an option

there is a way to link attribute “car model” to a specific category “Car Brand”?

• This reply was modified 5 years, 6 months ago by mlahzi.

@mlahzi since it is related to woocommerce, have you reached their support? I don’t think woocommerce has this feature.

Elegant and straightforward solution! Thanks Amit.
I’d like to add that you could use:

.page-id-whatever #content-wrap { 
   display: flex;
   flex-direction: column-reverse; 
}

Just a little less code.

Awesome!! thanks guys this worked for me too.

FYI @mariojames211 your code also places the product filters above the product listings on desktop view as well which is not good.

@apprimit ‘s code only changes the position of the product filters on mobile view which is better.

This really made my day:)

• This reply was modified 5 years ago by nishkam.
• This reply was modified 5 years ago by nishkam.
• This reply was modified 5 years ago by nishkam.