Pourquoi modifier les templates WooCommerce ?
Les achats en ligne sont plus confortables et plus rapides que d’aller dans des magasins physiques, c’est pourquoi le commerce électronique est devenu extrêmement populaire ces dernières années. Avec autant de concurrence, il ne suffit pas de monter sa boutique WooCommerce et de mettre ses produits en ligne. Vous devez trouver des moyens de différencier et se distinguer des autres. L’une des meilleures façons d’y parvenir est de personnaliser votre boutique. Outre la modification de l’en-tête et la modification des pages clés telles que la page de paiement ou la page de la boutique, vous pouvez également personnaliser les modèles que vous utilisez. Il n’y a pas beaucoup de sites qui modifient leurs modèles, vous pourrez donc avoir une longueur d’avance sur vos concurrents. Si vous avez des compétences en codage, vous savez probablement que l’utilisation d’un thème enfant est recommandée lors de l’édition de votre boutique. De même, les crochets intégrés de WordPress et WooCommerce offrent de nombreuses possibilités pour modifier et ajouter de nouvelles fonctionnalités à n’importe quel site Web.
Comment personnaliser les modèles WooCommerce par programmation
Il existe deux façons principales de personnaliser les modèles WooCommerce par programmation :
- Avec crochets
- Remplacer les modèles
Chacune de ces méthodes sert des objectifs différents. Examinons de plus près leurs principales différences.
Remplacer les fichiers de modèle ou utiliser des crochets ?
Personnaliser votre boutique avec des crochets est une pratique recommandée. Cependant, lors de la personnalisation de WooCommerce avec des crochets, vous pouvez rencontrer des problèmes d’incompatibilité. Pour des personnalisations plus complexes, écraser les fichiers de modèle WooCommerce peut être une meilleure option. Il est important de noter que lorsque vous écrasez un fichier de modèle, les crochets qui fonctionnent sur ce fichier cesseront de fonctionner. Chaque crochet pointe vers un fichier spécifique, vous ne pourrez donc pas les utiliser si vous modifiez le même fichier qui déclenche le crochet. Prenons par exemple le single-product.php fichier pour voir comment les crochets sont créés. Notez également où se trouvent les crochets avant et après la boucle.
if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } get_header( 'shop' ); ?> /** * woocommerce_before_main_content hook. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 */ do_action( 'woocommerce_before_main_content' ); ?> /** * woocommerce_after_main_content hook. * * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content) */ do_action( 'woocommerce_after_main_content' ); ?> /** * woocommerce_sidebar hook. * * @hooked woocommerce_get_sidebar - 10 */ do_action( 'woocommerce_sidebar' ); ?> get_footer( 'shop' );
Si vous regardez le script, vous verrez comment nous créons les crochets sur le do_action(‘name-of-the-hook’); lignes. Disons que vous avez le crochet suivant sur le fonctions.php fichier de votre thème enfant :
add_action('woocommerce_after_main_content',function(){echo “custom content after single product template file”;});
Vous pouvez répercuter le même contenu directement sur le fichier de modèle comme suit :
echo “custom content after single product template file”; /** * woocommerce_after_main_content hook. do_action( 'woocommerce_after_main_content' );
Cependant, ce faisant, le do_action(‘woocommerce_after_main_content’); fonction deviendra inutile puisque vous y avez ajouté votre code au lieu de le tirer avec le crochet. Donc, vous voudrez peut-être supprimer tous les crochets inutiles dans le fichier en supprimant le do_action(‘nom-du-hook’); sections. Gardez à l’esprit que si vous utilisez le woocommerce_after_main_content() hook ailleurs sur votre site Web et vous supprimez le do_action( 'name_of_your_hook' ); dans ce fichier, le crochet ne fonctionnera plus. Après avoir supprimé les crochets et les balises PHP inutiles, votre fichier devrait ressembler à ceci :
if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly } get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // end of the loop. do_action( 'woocommerce_sidebar' ); get_footer( 'shop' );
REMARQUE: La suppression des crochets de cette manière peut affecter le code tiers, tel que les plugins et les thèmes, provoquant des échecs ou cassant votre site Web. On suppose que vous savez ce que vous faites.
Personnalisez et écrasez les fichiers de modèle WooCommerce
L’écrasement des fichiers de modèle WooCommerce vous offre une grande flexibilité pour personnaliser votre boutique. Cependant, comme mentionné précédemment, vous devez comprendre que lorsque vous écrasez le contenu d’un fichier de modèle, les crochets qui fonctionnent sur ce fichier cesseront de fonctionner. De plus, WooCommerce peut modifier les fichiers de modèle de temps en temps, donc s’il y a une mise à jour et qu’ils modifient les fichiers, vous pouvez constater que le fichier que vous modifiez est obsolète.
Éléments à garder à l’esprit lors de l’écrasement de modèles
Si vous êtes ici, vous avez probablement des compétences en codage et vous savez comment utiliser et installer un thème enfant. Si ce n’est pas le cas, consultez notre guide pour créer un thème enfant ou utilisez l’un de ces plugins. L’écrasement des modèles WooCommerce est similaire à l’écrasement du functions.php fichier. La principale différence est que vous modifiez les fichiers de modèle de WooCommerce au lieu de vos fichiers de thème. Pour ce faire, vous devez copier le fichier de modèle souhaité à partir du dossier des modèles de plug-in WooCommerce et le coller dans votre thème enfant sous le dossier WooCommerce. Si vous suivez la même structure du dossier des modèles WooCommerce, des noms de fichiers et des sous-dossiers ; vous pourrez écraser les fichiers de modèle, même ceux des sous-dossiers. Il existe de nombreux fichiers de modèles WooCommerce et chacun d’eux est responsable d’une seule tâche. vous pouvez consulter la liste complète des fichiers modèles que vous pouvez modifier ainsi que les sous-répertoires et la structure des dossiers dans ce lien. Comme vous pouvez le constater, il existe des fichiers dans le dossier racine du modèle ainsi que plusieurs sous-répertoires. Vous pouvez personnaliser les fichiers dans n’importe quel sous-répertoire de la même manière que vous modifiez les fichiers principaux tels que archive-product.php, single-product.php ou content-single-product.php. De même, vous pouvez également personnaliser les fichiers dans le panier, Mon compte, les e-mails ou les dossiers de paiement si vous suivez les mêmes noms de dossiers et de structure que dans votre thème enfant. Ainsi, si vous souhaitez personnaliser certains de ces fichiers, votre thème enfant ressemblera à ceci :
Cela dit, examinons quelques exemples de choses que vous pouvez faire pour personnaliser les modèles WooCommerce.
1. Ajouter des shortcodes au modèle WooCommerce
Une alternative intéressante consiste à utiliser des shortcodes dans votre code. La plupart des codes courts existants devraient fonctionner ici, mais il est également courant de trouver des codes courts non pris en charge en dehors des codes officiels WooCommerce et WordPress. Par exemple, le script suivant inclura le tableau de bord du compte dans toutes les pages de produit unique. N’oubliez pas de le coller sur le single-product.php fichier que vous avez créé sur votre thème enfant.
My Account
"; $t.= do_shortcode("[woocommerce_my_account]"); $t.="
Et voici le résultat sur une page produit en direct : 
2. Afficher le contenu pour les clients qui ont déjà acheté ce produit
Si vous avez des clients qui ont déjà acheté un produit chez vous et qui reviennent pour acheter à nouveau le même produit, vous pouvez leur fournir un code de réduction afin d’améliorer leur expérience et de les faire revenir encore et encore dans votre magasin. Le script suivant affichera le contenu sur la page du produit pour les clients qui reviennent qui ont acheté le même produit dans le passé. Encore une fois, nous éditons le single-product.phpfichier:
get_header( 'shop' ); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'single-product' ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo '♥ Hey ' . $current_user->first_name . ', you've purchased this before. Buy again using this coupon: PURCHASE_AGAIN_21'; endif; get_footer( 'shop' );
3. Supprimer le bouton Ajouter au panier en fonction de la quantité de produit et du prix total du panier
Un autre exemple intéressant si vous souhaitez personnaliser vos modèles WooCommerce par programmation consiste à ajouter le bouton Panier en fonction du nombre d’articles que le client achète ainsi que du prix total du panier. Dans ce cas, nous allons entrer dans la boucle WooCommerce à l’aide d’un fichier situé dans le dossier de la boucle dans le répertoire du modèle. Créez simplement un nouveau add-to-cart.php fichier dans un dossier appelé bouclesous le woocommerce dossier de votre thème enfant, et collez ce script :
if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; $count= WC()->cart->get_cart_contents_count(); $total_price= WC()->cart->get_cart_total(); preg_match_all('!d+!', $total_price, $matches); $to_int = intval($matches[0][1]); if($to_int>500){ echo "Exceeds limit amount for total cart"; } elseif($count<10){ echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok. sprintf( '%s', esc_url( $product->add_to_cart_url() ), esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ), esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ), isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', esc_html( $product->add_to_cart_text() ) ),$product,$args); } else{ echo "Quantity limit exceeded"; }
Dans ce cas, nous ajoutons une logique conditionnelle if() relevé pour vérifier s’il y a plus de 10 articles ajoutés au panier et que le prix total du panier ne dépasse pas 500 $. Comme vous pouvez le voir, nous entrons dans la portée de la classe WooCommerce en appelant l’objet WooCommerce de cette manière : WC()->cart. De cette façon, vous pouvez récupérer certaines informations pour ajouter ou non un bouton de panier à la page de la boutique, en fonction de vos conditions. Voici le résultat lors de l’application des deux restrictions conditionnelles : 
Gardez à l’esprit que cela ne fonctionnera que sur la page principale de la boutique. Vous devrez ajouter un peu plus de code si vous voulez faire la même chose sur d’autres pages.
4. Modifier les fichiers de modèles d’e-mail WooCommerce
Les modèles d’e-mails incluent déjà des liens utiles vers votre site Web, mais certains utilisateurs peuvent ne pas en être conscients. Ajoutons donc un lien vers les modèles d’e-mail où les utilisateurs peuvent se connecter au site Web directement à partir de l’e-mail qu’ils ont reçu. Nous ajouterons le lien dans l’en-tête de la mise en page de l’e-mail, nous avons donc besoin d’une copie du email-header.php fichier, situé dans le dossier email du sous-répertoire templates de WooCommerce. Créez un nouveau dossier sur votre thème enfant et collez-y le fichier avec le même nom. Vous verrez les drapeaux de départ et et c’est là que vous allez ajouter le lien :
Login to your account';?> |