web-dev-qa-db-fra.com

Comment réaliser le modèle de catégorie woocommerce personnalisé

affiche actuellement mon archive-product.php comme ceci.

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

Il contient 15 produits et 3 sous-catégories (chaque sous-catégorie a une description courte) 1ère sous-catégorie - 6 produits 2e sous-catégorie - 4 produits 3ème sous-catégorie - 5 produits

actuellement, il n'y a que des produits sortis de la catégorie et une brève description de la catégorie.

ce que je veux réaliser ici est

  1. Catégorie courte description suivie de
  2. Titre de la première sous-catégorie et brève description suivi de produits qui y figurent (6)
  3. 2ème titre de la sous-catégorie et brève description suivi de produits qui y figurent (4)
  4. 3ème titre de la sous-catégorie et brève description suivi de produits qui y figurent (5)

actuellement j'ai ce code dans 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 

Les étapes que j'ai expliquées devraient être comme dans l'image. Aidez-moi à y parvenir en personnalisant le fichier archive-product.php

functionscategorieswoocommerce
1
Nimesh

Permet de voir si cela est utile. D'après votre description, vous avez/souhaitez la configuration suivante:

-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

OK, vous devez donc d'abord obtenir toutes les catégories de haut niveau. Vous pouvez les obtenir avec quelque chose comme ça:

$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 );

Avec une boucle foreach, parcourez tous les chats de haut niveau:

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

}

Nous avons maintenant besoin d’une nouvelle requête get_terms similaire pour les sous-catégories: (devrait remplacer "// ici, nous devons maintenant obtenir toutes les sous-catégories")

// 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 -->';

}

Et maintenant, dans ce code de sous-catégorie, vous pouvez maintenant obtenir les produits avec une requête combinée à une taxe_query. (devrait remplacer "// ici, nous devons maintenant inclure tous les produits dans cette sous-catégorie")

$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

J'ai créé un Gist ici, avec un fichier product-archive.php complet et plus de détails: product-archive.php

Si vous avez des termes que vous ne souhaitez pas afficher, vous pouvez utiliser exclude ou exclude_tree pour les désactiver. Pour plus d'options, jetez un coup d'œil à la page codex ici .

// 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.
);

Vous pouvez aussi changer l'ordre des termes avec la fonction glisser-déposer par défaut de WooCommerce. Il suffit de faire glisser les termes dans le backend.

1
LWS-Mo