it-swarm.cn

如何覆盖woocommerce特定循环或archive-product.php

到目前为止,当我的woocommerce主题循环遍布商店页面中的所有产品时,我正在尝试自定义并添加一些引导类来以探针方式对其进行样式化,因为生成的默认样式会导致布局问题。在调查页面后,我发现这是循环的核心:

wc_get_template_part( 'content', 'product' );

不知道是什么认为它看起来像普通的html和CSS类我可以编辑它但我仍然认为它可能隐藏在某处但不知道在哪里找到它。

我从昨天起就被困在如何编辑html元素我仍然是主题开发的初学者所以请帮助我或至少建议。这是完整的archive-product.php,如下所示:

get_header(); ?>

<div class="row">
    <div class="small-12 medium-12 large-12 columns text-left">
        <!--breadcrumb-->
        <?php
        /**
         * woocommerce_before_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
         * @hooked woocommerce_breadcrumb - 20
         * @hooked WC_Structured_Data::generate_website_data() - 30
         */
        do_action( 'woocommerce_before_main_content' );
        ?>
    </div>

    <header class="small-12 medium-6 large-6 columns text-left woocommerce-products-header collapse">
    <!--title-->
        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

        <h1 class="woocommerce-products-header__title 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' );
        ?>
    </header>

    <div class="small-12 medium-6 large-6 columns collapse">

        <?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 endif; ?>
    </div>

</div>


<div class="row small-up-2 large-up-4">
    <?php if ( have_posts() ) : ?>

    <?php #woocommerce_product_loop_start(); ?><!--removes ul-->

        <?php woocommerce_product_subcategories(); ?>

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

            <?php
                /**
                 * woocommerce_shop_loop hook.
                 *
                 * @hooked WC_Structured_Data::generate_product_data() - 10
                 */
                do_action( 'woocommerce_shop_loop' );
            ?>

            <?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
        /**
         * woocommerce_no_products_found hook.
         *
         * @hooked wc_no_products_found - 10
         */
        do_action( 'woocommerce_no_products_found' );
    ?>

    <?php endif; ?> 
</div>
2
OT AMD

WooCommerce模板根据您的需求和/或技能以不同方式工作。

功能:

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

是WooCommerce相当于 WordPress核心模板功能

<?php
    get_template_part('filename');

重要的是要知道这与php require but 相同,而不是在末尾使用.php扩展名。

在执行下面提到的任何步骤之前,请确保您的主题支持WooCommerce,方法是查看functions.php中的以下代码行:

<?php

// After setup theme hook adds WC support
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' ); // <<<< here
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

为了使用您自己的设计/模板,您有不同的选择:

1)最简单的方法:

在主题文件夹中创建“woocommerce.php”

对于主题中WordPress将使用哪个文件,此文件具有最高优先级。如果要使用第二种方法,请删除此文件。

2)高级方式:

创建“woocommerce”文件夹并将要修改的模板复制到此文件夹中。

WooCommerce/WordPress将识别它并使用此文件夹中提供的模板。此方法称为“ 模板覆盖 ”,允许您将WooCommerce前端输出的部分插入和修改到主题中。这是WC定制的更高级方式,对您来说可能是一个挑战,但肯定是更专业的方式。

在这种情况下,您可以找到这个文件:

woocommerce/archive-product.php

这是显示商店主要产品概述的模板文件。创建文件夹名称并将文件复制到其中后,您可以为此布局创建自己的标记。

最后,您的新文件可能如下所示:

<?php get_header(); ?>
    <div class="container">
        <div class="row">
            <?php get_template_part('sidebars/sidebar-left'); ?>
            <main class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

                <?php
                    // Only run on shop archive pages, not single products or other pages
                    if ( is_shop() || is_product_category() || is_product_tag() ) {
                        // Products per page
                        $per_page = 24;
                        if ( get_query_var( 'taxonomy' ) ) { // If on a product taxonomy archive (category or tag)
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                                'tax_query' => array(
                                    array(
                                        'taxonomy' => get_query_var( 'taxonomy' ),
                                        'field'    => 'slug',
                                        'terms'    => get_query_var( 'term' ),
                                    ),
                                ),
                            );
                        } else { // On main shop page
                            $args = array(
                                'post_type' => 'product',
                                'orderby' => 'date',
                                'order' => 'DESC',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                            );
                        }
                        // Set the query
                        $products = new WP_Query( $args );
                        // Standard loop
                        if ( $products->have_posts() ) :
                            while ( $products->have_posts() ) : $products->the_post();
                                // Your new HTML markup goes here
                                ?>
                                <div class="col-xs-12 col-md-3">
                                    <h2><?php the_title(); ?></h2>
                                    <?php the_content(); ?>
                                    <?php // more stuff here... markup, classes etc. ?>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    } else { // If not on archive page (cart, checkout, etc), do normal operations
                        woocommerce_content();
                    }
                ?>

            </main>
        </div>
    </div>
</div>
<?php get_footer(); ?>

我希望这能让你了解它是如何工作的。您还可以查看底部的WC后端系统页面。在那里它将显示WC使用的模板。

3
user3135691