WooCommerce sidebar wrong display - php

Question

I have problem with WooCommerce sidebar on archive-page and categories page,
Its display under my products ( right after page-pagi )
I tried to style it with css, like
.woocommerce .products ul, .woocommerce ul.products { width: 70%; float: right )
.sidebar { width: 29%; float: left;}
But it looks like it's in completely another section or something cause this have no effect.

Answer 1

If your theme isn't configured to work with woocommerce, and you've just installed it, it will probably be totally messed up. What you can do is add your own containers. Put these in functions.php
if (!function_exists('custom_open_woocommerce_content_wrappers')) {
function custom_open_woocommerce_content_wrappers(){
echo '<div class="container shop_container"><div class="row">';
}
}
if (!function_exists('custom_close_woocommerce_content_wrappers')) {
function custom_close_woocommerce_content_wrappers(){
echo '</div></div>';
}
}
if (!function_exists('custom_product_wrapper_open')) {
function custom_product_wrapper_open(){
echo '<div class="span8 content_with_right_sidebar">';
}
}
if (!function_exists('custom_product_wrapper_close')) {
function custom_product_wrapper_close(){
echo '</div>';
}
}
if (!function_exists('custom_before_shop_loop_sidebar')) {
function custom_before_shop_loop_sidebar() {
echo '<aside class="span4 sidebar sidebar_right">';
dynamic_sidebar('Sidebar Name Goes Here');
echo '</aside>';
}
}
add_action( 'woocommerce_after_shop_loop', 'custom_before_shop_loop_sidebar', 20);
if (!function_exists('custom_prepare_woocommerce_wrappers')) {
function custom_prepare_woocommerce_wrappers(){
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_output_content_wrapper_end', 10);
add_action( 'woocommerce_before_main_content', 'custom_open_woocommerce_content_wrappers', 10 );
add_action( 'woocommerce_after_main_content', 'custom_close_woocommerce_content_wrappers', 10 );
add_action( 'woocommerce_before_shop_loop', 'custom_product_wrapper_open', 10 );
add_action( 'woocommerce_after_shop_loop', 'custom_product_wrapper_close', 10 );
}
}
add_action( 'wp_head', 'custom_prepare_woocommerce_wrappers' );
This will create a wrapper with a right sidebar. And you can style it with
.container{
width: 1170px;
margin: 0 auto;
}
.row{
width: 100%;
}
.row:before,
.row:after{
display: table;
line-height: 0;
content: "";
}
.row:after{
clear: both;
}
.row > [class*="span"]{
display: block;
float: left;
width: 100%;
min-height: 20px;
margin-left: 2.564102564102564%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row > [class*="span"]:first-child{
margin-left: 0;
}
.row .span8 {width: 65.81196581196581%;}
.row .span4 {width: 31.62393162393162%;}
Etc.
You can customize the wrappers to your liking, add options to choose left/right no sidebar by linking it with customizer, etc.
Basically, you can add your own classes in those divs, that will suit your needs. This one has these classes because when I'm working with themes I use grid that has 12 columns, and it has container with 1170px width and row and spans (1-12 corresponding to columns).
Hope this helps :)

Answer 2

set .woocommerce and .sidebar padding and margin = 0