如何向woocommerce页面添加侧边栏 [英] how to add a sidebar to a woocommerce page

问题描述

我有一个 wordpress 网站，我正在使用 woocommerce 插件.我有一个产品页面，侧边栏显示在页面底部.如何编辑代码以放置侧边栏，以便在主要内容区域的左侧显示侧边栏.不在主要内容区域下?

I have a wordpress site and I'm using the woocommerce pluging. I have a product page and the sidebar is showing at the bottom of the page. How do I edit the code to put the sidebar so it shows the sidebar on the left of the main content area. NOT under the main content area?

模板代码为:

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

        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

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

        <?php endif; ?>

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

    <?php
        /**
         * woocommerce_sidebar hook
         *
         * @hooked woocommerce_get_sidebar - 10
         */
        do_action( 'woocommerce_sidebar' );
    ?>

推荐答案

您需要编辑包装器以支持 WooCommerce 模板系统.这是通过两种方式之一完成的.

You will need to edit the wrapper to support the WooCommerce template system. This is done in one of two ways.

首先是在主题目录中创建一个 woocommerce.php 文件(使用主题的侧边栏布局模板作为基础).这将覆盖 WooCommerce 包装系统和 archive-product.php 模板.它会给你更多的控制，因为它会根据你的主题工作.您需要将模板中的循环替换为 <?php woocommerce_content();?> 您可以在上面的示例中注释掉侧边栏，并将主题设置的侧边栏位置与您的 woocommerce 侧边栏 <?php do_action( 'woocommerce_sidebar' );?> 一起使用.请参阅 http://docs.woothemes.com/document/third-party-custom-theme-compatibility/ 了解更多信息.

The first would be to create a woocommerce.php file (using your theme's sidebar layout template as a base) in the theme directory proper. This will override the WooCommerce wrapper system and archive-product.php template. It will give you a bit more control since it will work based on your theme. You will need to replace the loop in the template with <?php woocommerce_content(); ?> You can comment out the sidebar in your example above and use the theme's set sidebar location with your woocommerce sidebar <?php do_action( 'woocommerce_sidebar' );?>. See http://docs.woothemes.com/document/third-party-custom-theme-compatibility/ for more information on this.

另一种选择是编辑 WooCommerce 包装器以调整类，以便您的侧边栏有足够的空间.<?php do_action( 'woocommerce_after_main_content' );?> 是包装器的结尾.这是在 global > 下的 WooCommerce 模板系统中.wrapper-start.php 和 global >wrapper-end.php(确保将它们复制到各自文件夹中 woocommerce 文件夹下的主题目录中).

The other option would be to edit the WooCommerce wrapper to adjust the classes so your sidebar would have enough room. The <?php do_action( 'woocommerce_after_main_content' );?> is the end of the wrapper. That's in the WooCommerce template system under global > wrapper-start.php and global > wrapper-end.php (make sure these are copied over to your theme directory under your woocommerce folder in their respective folders).

这篇关于如何向woocommerce页面添加侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！