Cum să suprascrii bucla specifică WooCommerce sau archive-product.php

Question

Cum să suprascrii bucla specifică WooCommerce sau archive-product.php

30 mai 2018, 00:18:55

Vizualizări: 58.6K

Voturi: 9

Până acum, în timp ce tema mea WooCommerce parcurge toate produsele în pagina magazinului, încerc să personalizez și să adaug câteva clase Bootstrap pentru a o stiliza într-un mod adecvat, deoarece stilurile implicite generate cauzează probleme de aspect. După investigarea paginii, am descoperit că aceasta se află în inima buclei:

wc_get_template_part( 'content', 'product' );

Nu știu ce este aceasta, am crezut că ar arăta ca HTML și clase CSS obișnuite pe care le pot edita, dar încă mă gândesc că ar putea fi ascunsă undeva, dar nu știu unde să o găsesc.

Sunt blocat de ieri încercând să editez elementele HTML, sunt încă începător în dezvoltarea temelor, așa că vă rog să mă ajutați sau măcar să mă sfătuiți. Acesta este fișierul complet archive-product.php care arată astfel:

get_header(); ?>

<div class="row">
    <div class="small-12 medium-12 large-12 columns text-left">
        <!--breadcrumb-->
        <?php
        /**
         * Hook-ul woocommerce_before_main_content.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (afișează div-urile de deschidere pentru conținut)
         * @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">
    <!--titlu-->
        <?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
            /**
             * Hook-ul woocommerce_archive_description.
             *
             * @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
            /**
             * Hook-ul woocommerce_before_shop_loop.
             *
             * @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(); ?><!--elimină ul-->

        <?php woocommerce_product_subcategories(); ?>

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

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

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

        <?php endwhile; // sfârșitul buclei. ?>

    <?php #woocommerce_product_loop_end(); ?>

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

    <?php endif; ?> 
</div>

OT AMD

95

personalizare buclă teme woocommerce offtopic

Toate răspunsurile la întrebare

Comentarii

Mă bucur, sunt fericit că am putut ajuta :)

user3135691

31 mai 2018 04:46:45

user3135691 1.04K · Accepted Answer · 2018-05-30T10:30:12Z

Funcționalitatea de templating în WooCommerce funcționează în diferite moduri în funcție de nevoile și/sau abilitățile tale.

Funcția:

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

este echivalentul WooCommerce al funcției de template din nucleul WordPress:

<?php
    get_template_part('filename');

Este important de știut că aceasta este același lucru ca și php require dar fără a folosi extensia .php la sfârșit.

Înainte de a face oricare dintre pașii menționați mai jos, asigură-te că tema ta suportă WooCommerce verificând în fișierul functions.php această linie de cod:

<?php

// După hook-ul de setup al temei, se adaugă suportul pentru WC
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' ); // <<<< aici
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Pentru a folosi propriul design/template ai diferite opțiuni:

1) Cea mai ușoară metodă:

Crează un fișier "woocommerce.php" în folderul temei tale

Acest fișier va avea cea mai mare prioritate în ceea ce privește care fișier va fi folosit de WordPress în tema ta. Șterge acest fișier dacă dorești să folosești a doua metodă.

2) Metodă avansată:

Crează un folder "woocommerce" și copiază template-ul pe care dorești să îl modifici în acest folder.

WooCommerce/WordPress îl va recunoaște și va folosi template-urile furnizate în acest folder. Această metodă se numește "template overwriting" și îți permite să introduci și să modifici părți din output-ul frontend al WooCommerce în tema ta. Aceasta este metoda mai avansată de personalizare a WC, poate fi o provocare pentru tine, dar cu siguranță este modul mai profesional de a face acest lucru.

În acest caz, probabil cauți acest fișier:

woocommerce/archive-product.php

Acesta este fișierul template care afișează pagina principală de prezentare a produselor din magazin. După ce ai creat numele folderului și ai copiat fișierul în el, poți crea propriul markup pentru acest layout.

În final, noul tău fișier ar putea arăta astfel:

<?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
                    // Rulează doar pe paginile de arhivă ale magazinului, nu pe produse individuale sau alte pagini
                    if ( is_shop() || is_product_category() || is_product_tag() ) {
                        // Produse pe pagină
                        $per_page = 24;
                        if ( get_query_var( 'taxonomy' ) ) { // Dacă ești pe o arhivă de taxonomie de produs (categorie sau 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 { // Pe pagina principală a magazinului
                            $args = array(
                                'post_type' => 'product',
                                'orderby' => 'date',
                                'order' => 'DESC',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                            );
                        }
                        // Setează interogarea
                        $products = new WP_Query( $args );
                        // Buclă standard
                        if ( $products->have_posts() ) :
                            while ( $products->have_posts() ) : $products->the_post();
                                // Aici vine noul tău markup HTML
                                ?>
                                <div class="col-xs-12 col-md-3">
                                    <h2><?php the_title(); ?></h2>
                                    <?php the_content(); ?>
                                    <?php // mai multe elemente aici... markup, clase etc. ?>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    } else { // Dacă nu ești pe o pagină de arhivă (coș, finalizare comandă, etc), faci operațiuni normale
                        woocommerce_content();
                    }
                ?>

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

Sper că acest lucru îți oferă o înțelegere despre cum funcționează. Poți să arunci o privire și pe pagina sistemului din backend-ul WC, la partea de jos. Acolo îți va afișa care template-uri folosește WC.