comment remplacer une boucle ou un fichier archive-product.php spécifique à woocommerce
jusqu'à présent, alors que mon thème woocommerce parcourt tous les produits de la page de la boutique, j'essaie de personnaliser et d'ajouter quelques classes d'amorçage afin de l'attribuer à un style plus probant car les styles générés par défaut génèrent des problèmes de mise en page. Après avoir examiné la page, j'ai découvert que c'était au coeur de la boucle:
wc_get_template_part( 'content', 'product' );
je ne sais pas ce qui est pensé, cela ressemble à des classes html et css régulières. Je peux le modifier à la place, mais je pense toujours qu'il pourrait se cacher quelque part, mais je ne sais pas où le trouver.
je suis bloqué depuis hier sur la façon de modifier les éléments html. Je suis toujours débutant dans le développement de thèmes. Aidez-moi ou au moins prodiguez des conseils. c'est full archive-product.php qui est comme suit:
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>
Le modèle WooCommerce fonctionne de différentes manières en fonction de vos besoins et/ou de vos compétences.
La fonction:
<?php
wc_get_template_part('content', 'product');
est l'équivalent WooCommerce de fonction de modèle de base WordPress :
<?php
get_template_part('filename');
Il est important de savoir que c'est la même chose que php require mais sans utiliser l'extension .php à la fin.
Avant de suivre l'une des étapes mentionnées ci-dessous, assurez-vous que votre thème prend en charge WooCommerce en consultant le fichier functions.php pour cette ligne de code:
<?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' );
Pour utiliser votre propre design/modèle, vous avez différentes options:
1) Le moyen le plus simple:
Créez un "woocommerce.php" dans votre dossier de thèmes
Ce fichier aura la plus haute priorité en termes de fichier qui sera utilisé par WordPress dans votre thème. Supprimez ce fichier si vous souhaitez utiliser la deuxième méthode.
2) manière avancée:
Créez un dossier "woocommerce" et copiez le modèle que vous souhaitez modifier dans ce dossier.
WooCommerce/WordPress le reconnaîtra et utilisera les modèles fournis dans ce dossier. Cette méthode s’appelle " modèle écrasant " et vous permet d’insérer et de modifier des parties de la sortie du frontal WooCommerce dans votre thème. C’est le moyen le plus avancé de personnalisation des WC, peut-être un défi pour vous, mais à coup sûr une manière plus professionnelle de le faire.
Dans ce cas, vous recherchez probablement ce fichier:
woocommerce/archive-product.php
C'est le fichier de modèle qui affiche la présentation générale du produit de la boutique. Après avoir créé le nom du dossier et y avoir copié le fichier, vous pouvez créer votre propre balisage pour cette présentation.
En fin de compte, votre nouveau fichier pourrait ressembler à ceci:
<?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(); ?>
J'espère que cela vous permet de comprendre comment cela fonctionne. Vous pouvez également consulter la page du système de backend WC en bas. Là, il affichera pour vous les modèles utilisés par WC.