it-swarm.com.de

wie man eine woocommerce-spezifische Schleife oder eine archive-product.php überschreibt

bisher versuche ich, während mein Woocommerce-Thema alle Produkte auf der Shop-Seite durchläuft, anzupassen und einige Bootstrap-Klassen hinzuzufügen, um es auf eine übersichtliche Weise zu gestalten, da generierte Standardstile Layoutprobleme verursachen. Nach der Untersuchung der Seite stelle ich fest, dass dies im Herzen der Schleife war:

wc_get_template_part( 'content', 'product' );

ich weiß nicht, wie das aussehen soll. Ich kann es stattdessen bearbeiten, aber ich denke immer noch, es könnte sich irgendwo verstecken, aber ich weiß nicht, wo ich es finden kann.

ich weiß seit gestern nicht mehr, wie man die HTML-Elemente bearbeitet. Ich bin noch Anfänger in der Themenentwicklung. Bitte helfen Sie mir oder raten Sie mir zumindest. Dies ist die vollständige Datei archive-product.php, die wie folgt lautet:

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

Das WooCommerce-Template funktioniert je nach Ihren Bedürfnissen und/oder Fähigkeiten auf unterschiedliche Weise.

Die Funktion:

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

ist das WooCommerce-Äquivalent zu WordPress-Kernvorlagenfunktion :

<?php
    get_template_part('filename');

Es ist wichtig zu wissen, dass dies das Gleiche ist wie für PHP aber , ohne dass am Ende die Erweiterung .php verwendet wird.

Bevor Sie einen der folgenden Schritte ausführen, vergewissern Sie sich, dass Ihr Theme WooCommerce unterstützt, indem Sie in der functions.php nach der folgenden Codezeile suchen:

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

Um Ihr eigenes Design/Template zu verwenden, haben Sie verschiedene Möglichkeiten:

1) Einfachster Weg:

Erstelle eine "woocommerce.php" in deinem Theme Ordner

Diese Datei hat die höchste Priorität in Bezug darauf, welche Datei von WordPress in Ihrem Design verwendet wird. Löschen Sie diese Datei, wenn Sie die zweite Methode verwenden möchten.

2) Fortgeschrittene Weise:

Erstellen Sie einen "woocommerce" -Ordner und kopieren Sie die Vorlage, die Sie ändern möchten, in diesen Ordner.

WooCommerce/WordPress erkennt es und verwendet die in diesem Ordner bereitgestellten Vorlagen. Diese Methode heißt " template overwriting " und ermöglicht es Ihnen, Teile der WooCommerce-Frontend-Ausgabe in Ihr Design einzufügen und zu ändern. Dies ist die fortgeschrittenere Art der WC-Anpassung, vielleicht eine Herausforderung für Sie, aber mit Sicherheit die professionellere Art, dies zu tun.

In diesem Fall suchen Sie wahrscheinlich nach dieser Datei:

woocommerce/archive-product.php

Dies ist die Vorlagendatei, die die Hauptproduktübersicht des Shops anzeigt. Nachdem Sie den Ordnernamen erstellt und die Datei darin kopiert haben, können Sie ein eigenes Markup für dieses Layout erstellen.

Am Ende könnte Ihre neue Datei so aussehen:

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

Ich hoffe, das gibt Ihnen ein Verständnis dafür, wie es funktioniert. Sie können auch einen Blick auf die Seite des WC-Backend-Systems werfen. Dort wird für Sie angezeigt, welche Vorlagen WC verwendet.

3
user3135691