WooComerce SideBar Location

Anonymous

#19804

I was able to get the WooCommerce theme working correctly on search results pages by following the thread here: https://support.searchandfilter.com/forums/topic/how-restrict-search-filter-widget/

My only problem is that I can’t get the sidebar to locate to the side. The Search Filter Pro widget will appear below the footer, in the body, or in the header depending on where I place the <?php get_sidebar(‘sidebar-search-form’); ?>

Any idea how I can get the sidebar to work correctly?

Anonymous

#19814

Sounds like a CSS issue…..in the stylesheet for the WooCommerce Theme will be the styles for sidebars, that make them float (left or right)…..so the style selectors in your new files (search results template and sidebar-search-form.php template) must match what the WC Theme is using, which is why it’s important to start with the template files supplied by the Theme and then modify them (rather than creating them from scratch, or even copying & pasting the code from the example).

Compare your normal sidebar.php file and the new one you’ve created to be sure the style selectors declared match.

If that’s not the source of the problem, post a link to your site so someone can look at your page source code to see if something else may be going on.

Anonymous

#19867

Thanks for the quick reply. It looks like my search result page is calling the normal sidebar widget and not the newly created “Search & Filter Form Widgets.” Could this be my problem?

Example: http://beerme.scottjanish.com/product-search/?_sfm__price=1+86

Ross Moderator

#19983

Hi Scott

I had a quick look.

I’m not sure about the setup of your site but I can clearly see a difference in the layouts from your homepage compared to your search results page.

On your homepage, you have a div #main-content – your content area and sidebar are inside this container.

On your search results page, I can see you sidebar is outside this, which makes it look like its in the footer.

What you need to do is copy the html structure, from a page with a working layout – for example, this 404 has the sidebar in the correct location (I was looking for standard woocommerce products page):
http://beerme.scottjanish.com/products

But looking at the html I can see the main parts you will need:

<div id="main-content">
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
				Search Results Go Here!
			</div> <!-- #left-area -->

			<div id="sidebar">
				Your Sidebar Goes here!
			</div>
		</div>
	</div>
</div>

Thanks

[Author]

Posts