Come sovrascrivere il loop specifico di WooCommerce o archive-product.php

Question

Come sovrascrivere il loop specifico di WooCommerce o archive-product.php

30 mag 2018, 00:18:55

Visualizzazioni: 58.6K

Voti: 9

Finora mentre il mio tema WooCommerce fa il loop di tutti i prodotti nella pagina shop, sto cercando di personalizzare e aggiungere alcune classi Bootstrap per stilizzarlo in modo appropriato poiché gli stili predefiniti generati causano problemi di layout. Dopo aver investigato la pagina ho scoperto che questo era nel cuore del loop:

wc_get_template_part( 'content', 'product' );

Non so cosa sia quello, pensavo che sarebbe apparso come normali classi HTML e CSS che posso modificare, ma sto ancora pensando che potrebbe essere nascosto da qualche parte ma non so dove trovarlo.

Sono bloccato da ieri su come modificare gli elementi HTML, sono ancora principiante nello sviluppo dei temi quindi per favore aiutatemi o almeno datemi un consiglio. Questo è il file archive-product.php completo che è come segue:

get_header(); ?>

<div class="row">
    <div class="small-12 medium-12 large-12 columns text-left">
        <!--breadcrumb-->
        <?php
        /**
         * hook woocommerce_before_main_content.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (genera i div di apertura per il contenuto)
         * @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">
    <!--titolo-->
        <?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 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 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(); ?><!--rimuove ul-->

        <?php woocommerce_product_subcategories(); ?>

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

            <?php
                /**
                 * hook 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; // fine del loop. ?>

    <?php #woocommerce_product_loop_end(); ?>

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

    <?php endif; ?> 
</div>

OT AMD

95

personalizzazione loop temi woocommerce offtopic

Tutte le risposte alla domanda

Commenti

Sono contento, felice di aver potuto aiutare :)

user3135691

31 mag 2018 04:46:45

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

Il sistema di templating di WooCommerce funziona in modi diversi a seconda delle tue esigenze e/o competenze.

La funzione:

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

è l'equivalente WooCommerce della funzione template del core di WordPress:

<?php
    get_template_part('filename');

È importante sapere che questa è la stessa cosa di un require in php ma senza usare l'estensione .php alla fine.

Prima di eseguire uno qualsiasi dei passaggi menzionati di seguito, assicurati che il tuo tema supporti WooCommerce cercando nel file functions.php questa riga di codice:

<?php

// Hook after setup theme aggiunge il supporto WC
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' ); // <<<< qui
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Per utilizzare il tuo design/template personalizzato hai diverse opzioni:

1) Metodo più semplice:

Crea un file "woocommerce.php" nella cartella del tuo tema

Questo file avrà la priorità più alta in termini di quale file verrà utilizzato da WordPress nel tuo tema. Elimina questo file se vuoi utilizzare il secondo metodo.

2) Metodo avanzato:

Crea una cartella "woocommerce" e copia il template che vuoi modificare al suo interno.

WooCommerce/WordPress lo riconoscerà e utilizzerà i template forniti in questa cartella. Questo metodo è chiamato "sovrascrittura dei template" e ti permette di inserire e modificare parti dell'output frontend di WooCommerce nel tuo tema. Questo è il modo più avanzato per personalizzare WC, potrebbe essere una sfida per te ma è sicuramente il metodo più professionale per farlo.

In questo caso probabilmente stai cercando questo file:

woocommerce/archive-product.php

Questo è il file template che mostra la panoramica principale dei prodotti del negozio. Dopo aver creato la cartella e copiato il file al suo interno, puoi creare il tuo markup per questo layout.

Alla fine, il tuo nuovo file potrebbe assomigliare a questo:

<?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
                    // Esegui solo nelle pagine archivio del negozio, non nei singoli prodotti o altre pagine
                    if ( is_shop() || is_product_category() || is_product_tag() ) {
                        // Prodotti per pagina
                        $per_page = 24;
                        if ( get_query_var( 'taxonomy' ) ) { // Se in un archivio tassonomia prodotto (categoria o 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 { // Nella pagina principale del negozio
                            $args = array(
                                'post_type' => 'product',
                                'orderby' => 'date',
                                'order' => 'DESC',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                            );
                        }
                        // Imposta la query
                        $products = new WP_Query( $args );
                        // Loop standard
                        if ( $products->have_posts() ) :
                            while ( $products->have_posts() ) : $products->the_post();
                                // Il tuo nuovo markup HTML va qui
                                ?>
                                <div class="col-xs-12 col-md-3">
                                    <h2><?php the_title(); ?></h2>
                                    <?php the_content(); ?>
                                    <?php // altro codice qui... markup, classi ecc. ?>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    } else { // Se non in una pagina archivio (carrello, checkout, ecc.), esegui operazioni normali
                        woocommerce_content();
                    }
                ?>

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

Spero che questo ti dia una comprensione di come funziona. Puoi anche dare un'occhiata alla pagina del sistema backend di WC in fondo. Lì verranno mostrati quali template utilizza WC.