WooCommerce侧边栏显示错误

时间:2015-07-23 06:51:32

标签: php wordpress woocommerce

我在存档页面和类别页面上遇到WooCommerce侧边栏问题, 它显示在我的产品下(就在页面pagi之后)

我尝试用css设置样式,比如

org.hibernate.exception.SQLStateConverter.handledNonSpecificException
(SQLStateConverter.java:126), org.hibernate.exception.SQLStateConverter.
convert(SQLStateConverter.java:114),org.hibernate.exception.
JDBCExceptionHelper.convert(JDBCExceptionHelper.java:66),  
org.hibernate.loader.Loader.doList(Loader.java:2235), 
org.hibernate.loader.Loader.listIgnoreQueryCache(Loader.java:2129), 
org.hibernate.loader.Loader.list(Loader.java:2124), 
org.hibernate.loader.custom.CustomLoader.list(CustomLoader.java:312), 
org.hibernate.impl.SessionImpl.listCustomQuery(SessionImpl.java:1723), 
org.hibernate.impl.AbstractSessionImpl.list(AbstractSessionImpl.java:165), 
org.hibernate.impl.SQLQueryImpl.list(SQLQueryImpl.java:175)

但看起来它完全是另一个部分,或者因为它没有效果。

2 个答案:

答案 0 :(得分:0)

如果你的主题没有配置为与woocommerce一起使用,并且你刚刚安装了它,它可能会完全搞砸了。你可以做的是添加自己的容器。把它们放在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' );

这将创建一个带右侧边栏的包装器。您可以使用

设置样式
.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%;}

您可以根据自己的喜好自定义包装,添加选项以通过将其与自定义程序相关联来选择左/右无侧栏等。

基本上,您可以在这些div中添加自己的类,以满足您的需求。这个类有这些类,因为当我使用主题时,我使用具有12列的网格,并且它具有宽度为1170px,行和跨度的容器(1-12对应于列)。

希望这会有所帮助:)

答案 1 :(得分:0)

设置 .woocommerce .sidebar 填充和边距= 0