Change sidebar direction only on woocommerce page

Support
#1

Hello,
My website is showing a sidebar on the left side.
But only on the woocommerce page the sidebar should be shown on the right side.
On all other pages it still should be shown on the left side.

I´ve tried to realize this with the following code:
.woocommerce .x-main {
float: right;
}
.woocommerce .x-sidebar {
float: left;
}

But it doen´t work.

Could you help me please?
Thanks a lot in advance.

Best regards,
Christine

#2

Hi @christine-i,

Thanks for reaching out.

I’m a bit confused. Just to confirm, the sidebar is on the left side of your site but you wish to make the woocommerce pages on right? In that case, your CSS should set it on the right side instead of left.

@media (min-width: 980px){
.woocommerce .x-main {
float: left;
}
.woocommerce .x-sidebar {
float: right;
}
}

I also wrapped it in @media to make sure it won’t affect tablet and mobile views where the layout is different.

Thanks!

#3

Hi Rad,

yes, the sidebar is on the left side of my site but I wish to make only the woocommerce pages on right.

Now I´ve added your script in my CSS in the X-Theme Customizer.
But it has no effect.

Could you please take a look and tell me what´s the reason for it?
Thanks in advance.

Best regards,
Christine

#4

Hi There,

Thanks . for the confirmation!

Can you please try this CSS instead of the above.

@media (min-width: 980px){
.home.woo-variation-swatches .x-main {
float: left;
}
.home.woo-variation-swatches .x-sidebar {
float: right;
}
}

Let us know if this works.

Thanks

#5

Hi Basanta,

now I´ve added your CSS code and it works.
Thank you very much. You are great! :slight_smile:

Best regards,
Christine

#6

Glad we were able to help :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.