it-swarm-id.com

cara mengganti loop khusus woocommerce atau archive-product.php

sejauh ini sementara loop tema woocommerce saya melalui semua produk di halaman toko saya mencoba untuk menyesuaikan dan menambahkan beberapa kelas bootstrap untuk gaya itu dalam cara yang tepat karena gaya default yang dihasilkan menyebabkan masalah tata letak. setelah menyelidiki halaman saya menemukan bahwa ini adalah jantung dari loop:

wc_get_template_part( 'content', 'product' );

tidak tahu apa yang dipikirkan akan terlihat seperti kelas html dan css biasa saya dapat mengeditnya tetapi saya masih berpikir itu mungkin bersembunyi di suatu tempat tetapi tidak tahu di mana menemukannya.

saya terjebak sejak kemarin tentang cara mengedit elemen html saya masih pemula dalam pengembangan tema jadi tolong bantu saya atau setidaknya saran. ini adalah arsip-produk.php lengkap yang adalah sebagai berikut:

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

Templat WooCommerce bekerja dengan berbagai cara tergantung pada kebutuhan dan/atau keterampilan Anda.

Fungsi:

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

adalah setara dengan WooCommerce dari fungsi templat inti WordPress :

<?php
    get_template_part('filename');

Penting untuk mengetahui bahwa ini sama dengan php membutuhkan tetapi tanpa menggunakan ekstensi .php di akhir.

Sebelum Anda melakukan langkah-langkah yang disebutkan di bawah ini, pastikan tema Anda mendukung WooCommerce dengan melihat di functions.php untuk baris kode ini:

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

Untuk menggunakan desain/template Anda sendiri, Anda memiliki opsi berbeda:

1) Cara termudah:

Buat "woocommerce.php" di folder tema Anda

File ini akan memiliki prioritas tertinggi dalam hal file mana yang akan digunakan oleh WordPress dalam tema Anda. Hapus file ini jika Anda ingin menggunakan metode kedua.

2) Cara lanjutan:

Buat folder "woocommerce" dan salin templat yang ingin Anda modifikasi ke dalam folder ini.

WooCommerce/WordPress akan mengenalinya dan menggunakan templat yang disediakan di folder ini. Metode ini disebut " template overwriting " dan memungkinkan Anda untuk menyisipkan dan memodifikasi bagian dari output frontend WooCommerce ke dalam tema Anda. Ini adalah cara kustomisasi WC yang lebih maju, mungkin sebuah tantangan untuk Anda tetapi pasti cara yang lebih profesional untuk melakukannya.

Dalam hal ini Anda secara wajar mencari file ini:

woocommerce/archive-product.php

Itu adalah file templat yang menampilkan ikhtisar produk utama toko. Setelah membuat nama folder dan menyalin file ke dalamnya, Anda dapat membuat markup sendiri untuk tata letak ini.

Pada akhirnya, file baru Anda mungkin terlihat seperti ini:

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

Saya harap ini memberi Anda pemahaman tentang cara kerjanya. Anda juga dapat melihat halaman sistem backend WC di bagian bawah. Di sana akan ditampilkan untuk Anda yang menggunakan template WC.

3
user3135691