内容下方的woocommerce侧栏

Question

I am using bootstrap with a Wordpress theme I working on with Woocommerce installed. On the Shop page the container element is not wrapping the sidebar, even though the other pages (ie Checkout, Cart, My Account) are in a Bootstrap container class and display fine. However, the Shop page is also in a container and the sidebar is displaying below all the content.

Here is the code for the shop page

    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' ); ?>

Answer 1

The sidebar falling under the content div means that you have HTML markup errors; that's usually a closing </div> or two that is missing at the bottom of the page. Extra opening <div> 's can also cause the sidebar to drop.

Count your opening <div> and closing </div> 's and match them up in all page templates and template part files used: header.php , the shop template, footer.php and any other included template files.

Or, view source on the page and match them up, find the errors and make corrections in the appropriate template file.

Or, use the W3C Code Validation tool to find them https://validator.w3.org/ and other markup errors you may not know about, and then make the corrections in the template file.