Woocommerce sidebar

Did you solve the problem?

Because in the link you have provided, it seems you have a side bar on the left and the main/shop content on the right.

Hi,

No, when I view the page the side bar is on the left, but it is below the main content with white space where is should be.

Here is a screenshot of what I mean ??

https://www.doctorcall.co.uk/wp-content/uploads/2013/11/example.jpg

Thanks

Not having any sidebar and having sidebar in a wrong place is different issues.

So your issue is just a CSS-issue.

If you are using some browser extensions such as Fire-Bug,
you can check it for yourself.

<div class=”four columns gdl-left-sidebar”>
has a style as:
.row .four {width: 33.333%;}

in order to amke a 1/3 partion for the side bar.

but it is not enough for both section to display side-by-side.

try changin that style as
.row .four {width: 30%;}
You can see the sidebar will fit there.

To make it a permanent change, you can edit you themes css styles or a custom.css file…

Thanks for this. It seems to only be an issue with the woocommerce pages, not the rest of the site as their sidebars are functioning normally.

I’m not sure where to implement the code you mentioned. My theme folder as a style.css file but its in a different code language than that above.

/*--- sidebar ---*/
div.gdl-page-item.columns{ float: right; }
div.gdl-left-sidebar.columns{ float: left; }

Those styles may be placed in anothewr part of yhour themes styles.

Rather than changing the themes styles.css, it will be a better option to make changes in another file as “custom.css”. SO you cahnges won’t be effected by any updates atc.

Your code snippet shows the styles for the “columns” property, but as I tried to define the div structure from your site,
That div has 3 classes: four, columns, gdl-left-sidebar

Your pasted codes are only for the “gdl-left-sidebar.columns” class,

but the width property is controlled by the “four” class.

So if you change thet property as you wish, you can see the effect in your pages.

Try using some browser extensions such as Firefox’s FireBUg or Chrome’s Developer Tools…