WooCommerce Sidebar Change Sides

[rjbury]

Hello,

I am using Integrity with a content layout of “Content Left, Sidebar Right”.

For our WooCommerce store pages (main index, /store/ and category & tag archive pages) we need the sidebar to the content layout to be “Sidebar Left, Content Right”.

Is there a way to add “CONTENT LAYOUT” to the WooCommerce Options or a quick theme file edit that can be done?

I do not want to edit the entire website to this content layout, just the store pages. Seems like it should be a simple thing.

Here’s what it would “look like” if there was a simple Content Layout option on the WooCommerce Options X Theme Customize backend:

Thanks for the support on this… I’ve been beating my head against the wall on this one. Hope it’s a simple fix.

~Rob

[mldarshana]

Hi Rob,

Thanks for writing in! You can set a global layout with sidebar under X -> Theme Options -> Layout & Design. Then head over to X -> Theme Options -> WooCommerce and select Global Layout.

For the other individual pages, you can select full width layout by editing those pages.

Thanks!

[rjbury]

Thanks for your Reply @mldarshana,

I need a different solution.

That would be way too much work (there are a lot of pages) plus the sidebars on all the other post types (including the blog posts) would then be on the left as well (and they need to stay on the right).

What’s another solution?

NOTE: I am comfortable with child theme file edits & functions.php code additions.

Thanks,
~Rob

[rjbury]

…MORE INFO. …

Possible solution (and maybe there is an easier way) is to change the woocommerce.php file in a child-theme.

Seems like we should be able to do a woocommerce.php file edit to switch the classes of the x-main & x-sidebar

FROM:
div class=“x-main left” role=“main”>…
aside class=“x-sidebar right” role=“complementary”>…

TO:
div class=“x-main right” role=“main”>…
aside class=“x-sidebar left” role=“complementary”>…

Thanks,
~Rob

[nabeel]

Hey Rob,

This can be done easily with custom CSS, please add the following code in the Theme Options > CSS:

.woocommerce .x-main {
    float: right;
}

.woocommerce .x-sidebar {
    float: left;
}

Cheers!

[rjbury]

OMG! So awesome! So simple! I tried that in testing (via Chrome’s Inspect) and it didn’t work BUT NOW (via the Global CSS)… it’s working perfectly.

Arrrrrgh!.. and thanks for the simple solution!!! It’s PERFECT, THANK YOU @Nabeel !!!

[Alaa]

We are glad that we were able to help, you are welcome