web-dev-qa-db-ja.com

カスタムwoocommerceカテゴリテンプレートを実現する方法

現在私のarchive-product.phpはこんな感じです。

https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ /

この中に15の製品と3つのサブカテゴリがあります（各サブカテゴリには簡単な説明があります）

現在のところ、カテゴリ内の商品とカテゴリの簡単な説明のみが表示されています。

ここで達成したいのは

  1. カテゴリの簡単な説明の後に
  2. 最初のサブカテゴリのタイトルと簡単な説明、それに続く製品（6）
  3. 2番目のサブカテゴリのタイトルと簡単な説明、それに続く製品（4）
  4. 3番目のサブカテゴリのタイトルと簡単な説明、それに続く製品（5）

現在私はarchive-product.phpの中にこのコードがあります

<header class="woocommerce-products-header">
            <?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' );


            ?>
            <?php 
         global $post;
        $args = array( 'taxonomy' => 'product_cat',);
        $terms = wp_get_post_terms($post->ID,'product_cat', $args);

            $count = count($terms); 
            if ($count > 0) {

                foreach ($terms as $term) {
                    echo '<div class="align-center text-justify">';
                    echo $term->description;
                    echo '</div>';

                }

            }

        ?>
        </header>
        <?php
        if ( woocommerce_product_loop() ) {

            /**
             * Hook: woocommerce_before_shop_loop.
             *
             * @hooked wc_print_notices - 10
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );

            woocommerce_product_loop_start();

            if ( wc_get_loop_prop( 'total' ) ) {
                while ( have_posts() ) {
                    the_post();

                    /**
                     * Hook: woocommerce_shop_loop.
                     *
                     * @hooked WC_Structured_Data::generate_product_data() - 10
                     */
                    do_action( 'woocommerce_shop_loop' );

                    wc_get_template_part( 'content', 'product' );
                }
            }

            woocommerce_product_loop_end();

            /**
             * Hook: woocommerce_after_shop_loop.
             *
             * @hooked woocommerce_pagination - 10
             */
            do_action( 'woocommerce_after_shop_loop' );
        } else {
            /**
             * Hook: woocommerce_no_products_found.
             *
             * @hooked wc_no_products_found - 10
             */
            do_action( 'woocommerce_no_products_found' );
        }

        /**
         * Hook: woocommerce_after_main_content.
         *
         * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action( 'woocommerce_after_main_content' );

The desired format 

私が説明したステップはイメージのようになるはずです。現在のarchive-product.phpをカスタマイズすることによってそれを達成するのを手伝ってください

functionscategorieswoocommerce
1
Nimesh

これが役に立つかどうか見てみましょう。あなたの説明から、あなたは次のような設定を持っています。

-Category 
--Sub-Category-1
---Products of Sub-Category-1
--Sub-Category-2
---Products of Sub-Category-2
--Sub-Category-3
---Products of Sub-Category-3

それでは、最初にすべてのトップレベルのカテゴリーを取得する必要があります。あなたはこのようなものでそれらを手に入れることができます：

$top_categories_args = array(
    'taxonomy' => 'product_cat', // the taxonomy we want to get terms of
    'parent' => 0 // all top level cats with a parent of 0
);
$top_categories = get_terms( $top_categories_args );

Foreachループを使うと、すべてのトップレベルの猫の繰り返し処理が行われます。

foreach ($top_categories as $top_category) {

    $top_id = $top_category->term_id; // get term ID
    $top_slug = $top_category->slug; // get term slug
    $top_name = $top_category->name; // get term title
    $top_desc = $top_category->description; // get term description

    echo '<div class="'.$top_slug.'">';

    echo '<h2>'.$top_name.'</h2>';

    if ($top_desc) {
        echo '<p>'.$top_desc.'</p>';
    }

    // here we now need to get all the sub-categories

    echo '</div><!-- END top categories container -->';

}

今、私たちはサブカテゴリのために同様の新しいget_termsクエリを必要とします：

// here we get all the sub categories of the current cat

$sub_categories_args = array(
    'taxonomy' => 'product_cat',
    'parent' => $top_id // we use the top_id from before to get only sub-cats
);
$sub_categories = get_terms( $sub_categories_args );

foreach ($sub_categories as $sub_category) {

    $sub_id = $sub_category->term_id;
    $sub_slug = $sub_category->slug;
    $sub_name = $sub_category->name;
    $sub_desc = $sub_category->description;

    echo '<div class="'.$top_slug.'-'.$sub_slug.'">';

    echo '<h3>'.$sub_name.'</h3>';

    if ($sub_desc) {
        echo '<p>'.$sub_desc.'</p>';
    }

    // here we now need to get all the products inside this sub-categories

    echo '</div><!-- END sub categories container -->';

}

そして今、このサブカテゴリコードの中で、tax_queryと組み合わせたクエリで商品を取得することができます。 （「//ここでは、このサブカテゴリ内のすべての製品を取得する必要があります」を置き換えます）

$products_args = array(
    'post_type'     => 'product', 
    'tax_query'     => array( 
        array(
            'taxonomy' => 'product_cat',
            'field'    => 'term_id', // we look for the ID, you could also use slug
            'terms'    => $sub_id, // get only products with the sub-cat ID
        ),
    ),
);
$products = new WP_Query( $products_args );

if ( $products->have_posts() ) { // only start if we hace some products

    // START some normal woocommerce loop

    woocommerce_product_loop_start();

    while ( $products->have_posts() ) : $products->the_post();

        wc_get_template_part( 'content', 'product' );

    endwhile; // end of the loop.

    woocommerce_product_loop_end();

    // END the normal woocommerce loop

    // Restore original post data, maybe not needed here (in a plugin it might be necessary)
    wp_reset_postdata();

} else { // if we have no products, show the default woocommerce no-product loop

    // no posts found
    wc_get_template( 'loop/no-products-found.php' );

}//END if $products

私は完全なproduct-archive.phpと詳細でここに要旨を作成しました： product-archive.php

表示したくない用語がある場合は、それらを無効にするためにexcludeまたはexclude_treeを使用できます。その他のオプションについては、コーデックスページ here をご覧ください。

// first we get all top-level categories
$top_categories_args = array(
    'taxonomy' => 'product_cat', // the taxonomy we want to get terms of
    'parent' => 0, // all top level cats with a parent of 0
    'hide_empty' => true,
    'exclude' => '11,23,99', // Array or comma/space-separated string of term ids to exclude.
    'exclude_tree' => '2,5,12' // Array or comma/space-separated string of term ids to exclude along with all of their descendant terms.
);

また、WooCommerceのデフォルトのドラッグアンドドロップ機能を使用して用語の順序を変更することもできます。バックエンドに用語をドラッグアンドドロップするだけです。

1
LWS-Mo