内容下方的 woocommerce 侧边栏答案

【问题标题】：woocommerce sidebar below content内容下方的 woocommerce 侧边栏
【发布时间】：2017-03-23 15:53:30
【问题描述】：

我正在使用带有安装 Woocommerce 的 Wordpress 主题的引导程序。在 Shop 页面上，即使其他页面（即 Checkout、Cart、My Account）在 Bootstrap 容器类中并且显示正常，容器元素也不会包装侧边栏。但是，Shop 页面也在一个容器中，侧边栏显示在所有内容下方。

这是商店页面的代码

    get_header( 'shop' ); ?>

<?php
    /**
     * woocommerce_before_main_content hook.
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     */
    do_action( 'woocommerce_before_main_content' );
?>
<div class="container">
<div class="row">
    <div class="col-md-8">
    <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

        <h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

    <?php endif; ?>

    <?php
        /**
         * woocommerce_archive_description hook.
         *
         * @hooked woocommerce_taxonomy_archive_description - 10
         * @hooked woocommerce_product_archive_description - 10
         */
        do_action( 'woocommerce_archive_description' );
    ?>

    <?php if ( have_posts() ) : ?>

        <?php
            /**
             * woocommerce_before_shop_loop hook.
             *
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
        ?>

        <?php woocommerce_product_loop_start(); ?>

            <?php woocommerce_product_subcategories(); ?>

            <?php while ( have_posts() ) : the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

        <?php
            /**
             * woocommerce_after_shop_loop hook.
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );
        ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

        <?php wc_get_template( 'loop/no-products-found.php' ); ?>

    <?php endif; ?>


    <?php
        /**
         * woocommerce_after_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action( 'woocommerce_after_main_content' );
    ?>
    </div>
    <div class="col-md-4">      
    <?php
        /**
         * woocommerce_sidebar hook.
         *
         * @hooked woocommerce_get_sidebar - 10
         */
        do_action( 'woocommerce_sidebar' );
    ?>
    </div>
</div>
</div>

<?php get_footer( 'shop' ); ?>

【问题讨论】：

标签： html css wordpress twitter-bootstrap woocommerce

【解决方案1】：

内容div下方的侧边栏表示您有HTML标记错误；这通常是一个结束 </div> 或页面底部缺少的两个。额外打开<div> 也会导致侧边栏下降。

计算您打开的<div> 和关闭的</div>，并在所有使用的页面模板和模板部分文件中匹配它们：header.php、商店模板、footer.php 和任何其他包含的模板文件。

或者，查看页面上的源代码并匹配它们，找到错误并在适当的模板文件中进行更正。

或者，使用 W3C 代码验证工具找到它们https://validator.w3.org/ 和其他您可能不知道的标记错误，然后在模板文件中进行更正。

【讨论】：