Woocommerce Sidebar resize to top, not bottom

[ambernpm]

Hello,

I’ve managed to use other posts to find snippets to get a sidebar in my shop ONLY. I got it to be on the left side of the shop page. So that’s great. However, there are two problems:

1. A side bar shows up on the right side of Product pages, even though it is on the left of the shop.
2. When I resize below a larger desktop size, the left sidebar in the shop moves to the bottom. During the resize, I want the sidebar to move to the top, as this is going to be my product filters for the shop.

Please help?

Here is the code I’ve added, based on older posts I found through internet searches:

function x_get_content_layout() {

$content_layout = x_get_option( 'x_layout_content' );

if ( $content_layout != 'full-width' ) {
	if ( is_home() ) {
		$opt    = x_get_option( 'x_blog_layout' );
		$layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
	} elseif ( is_singular( 'post' ) ) {
		$meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
		$layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
	} elseif ( x_is_portfolio_item() ) {
		$layout = 'full-width';
	} elseif ( x_is_portfolio() ) {
		$meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
		$layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
	} elseif ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
		$layout = 'content-sidebar';
	} elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
		$layout = 'sidebar-content';
	} elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
		$layout = 'full-width';
	} elseif ( is_archive() ) {
		if ( x_is_shop() || x_is_product_category() || x_is_product_tag() ) {
			$opt    = x_get_option( 'x_woocommerce_shop_layout_content' );
			$layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
		} else {
			$opt    = x_get_option( 'x_archive_layout' );
			$layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
		}
	} elseif ( x_is_product() ) {
		$layout = 'content-sidebar';
	} elseif ( x_is_bbpress() ) {
		$opt    = x_get_option( 'x_bbpress_layout_content' );
		$layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
	} elseif ( x_is_buddypress() ) {
		$opt    = x_get_option( 'x_buddypress_layout_content' );
		$layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
	} elseif ( is_404() ) {
		$layout = 'full-width';
	} else {
		$layout = $content_layout;
	}
} else {
	$layout = $content_layout;
}

if ( x_is_shop() ) {
	$layout = 'sidebar-content';
}

return $layout;

}

[ambernpm]

Ok, so I’ve disabled the snippets. I then added a new sidebar for shop ONLY in the sidebars area (appearance->sidebars) I placed woocommerce widgets like Cart and Categories in that shop sidebar. It is a much simpler (and more recently updated?) option than the code snippets I was attempting.

Now the 1st problem stated above is no longer happening. But the 2nd issue, resize to above content instead of below, is still an aesthetic I’d like to try.

[tristup]

Hi @ambernpm,

There are no options to set the Sidebar above the content area during the resize. All you need to do some custom CSS code to override the default structure.
The article may help you with that: https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css
I would also recommend you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Please remember, that we don’t offer any support to the custom codes or issues related to that.

Thanks

[ambernpm]

Thanks. I understand that there are not options built in to set the sidebar above the main content. I understand that the sidebar is second in position to the main content, so it will display below the main content. However, when I add CSS to change the ordering of the sidebar and main content, nothing changes. Here is the CSS I added to modify it’s order, based on the link you provided. Shouldn’t this work?

@media (max-width: 980px) {
.archive.woocommerce .x-container.offset {
display: flex;
flex-direction: column;
}

.archive.woocommerce .x-container.offset .x-main {
    order: 2;
}

.archive.woocommerce .x-container.offset .x-sidebar {
    order: 1;
}

}

[tristup]

Hi @ambernpm,

Regretfully, we don’t offer any investigation on any issues related to the custom coding. The custom code referred in the above thread or in the jsfiddel is just to serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
You can also check the sample code which may help you to reorder the section in the smaller screen: http://jsfiddle.net/pcd2wz69/

Please remember that we do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.
I will again, recommend you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks

[ambernpm]

I figured it out! I thought I should post the CSS that moved the x theme containers, considering there are probably many people wanting to do this to their shop pages. Chrome’s elements inspector gave me the proper names of the how the containers and elements are referenced. Thanks @tristup for steering me toward that jsfiddle link.

#top {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

}
.x-main {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
.x-sidebar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.x-colophon {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
box-ordinal-group: 4;
}
.x-cart-notification {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}

[prakash_s]

Hi @ambernpm ,

Glad to help you.

Thanks