首页 文章

Woocommerce制作侧边栏显示在页面底部

提问于
浏览
1

我在非宇宙主题上安装了woocommerce,我希望设计它,没有太大的变化 . 但是当我安装它时,侧边栏显示在任何容器之外(小部件显示在它们的div中但没有包装器) . 现在我用了

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

从文档中,这适用于woocommerce就好了 . 但我的侧边栏仍然在底部,没有包装 . 有没有办法包装侧边栏,并将其放在商店的内容旁边,只使用钩子,而不是从插件中复制任何文件?

1 回答

  • 1

    我想通了,这是一个适合我的“框架”,万一有人需要它:

    <?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(get_theme_mod('shop_sidebar', ''));
            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' );
    

    这将创建一个带右侧边栏的包装器 . 如果需要,您可以进一步自定义 . 希望能帮助到你 .

相关问题