it-swarm.xyz

как переопределить определенный цикл woocommerce или archive-product.php

до сих пор, пока моя тема woocommerce проходит по всем продуктам на странице магазина, я пытаюсь настроить и добавить несколько классов начальной загрузки, чтобы придать ей стиль, так как сгенерированные стили по умолчанию вызывают проблемы с макетом. изучив страницу, я обнаружил, что это было в центре цикла:

wc_get_template_part( 'content', 'product' );

я не знаю, что это за мысль, что это будет выглядеть как обычные классы HTML и CSS. Я могу вместо этого отредактировать ее, но я все еще думаю, что она может где-то скрываться, но не знаю, где ее найти.

со вчерашнего дня я застрял в том, как редактировать HTML-элементы. Я все еще новичок в разработке тем, поэтому, пожалуйста, помогите мне или хотя бы посоветуйте. это полный архив-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 но без использования расширения .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 распознает его и использует шаблоны, представленные в этой папке. Этот метод называется " template overwriting " и позволяет вам вставлять и изменять части вывода внешнего интерфейса 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