Woocommerce 制作侧边栏出现在页面底部答案

【问题标题】：Woocommerce making sidebar appear at the bottom of the pageWoocommerce 制作侧边栏出现在页面底部
【发布时间】：2015-05-12 15:53:39
【问题描述】：

我在一个非 woo 主题上安装了 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 就好了。但是我的侧边栏仍然在底部，没有包装。有没有办法也可以包装侧边栏，并将其放置在商店内容旁边，仅使用钩子，而不是从插件中复制任何文件？

【问题讨论】：

标签： wordpress woocommerce

【解决方案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' );

这将创建一个带有右侧边栏的包装器。如果需要，您可以进一步自定义它。希望对您有所帮助。

【讨论】：