Comment personnaliser la page panier de WooCommerce : Guide détaillé

page du panier d'achatest un élément important de l'expérience du commerce électronique. En tant que dernier point d'interaction avant le paiement, la page du panier influence directement la décision d'achat de l'utilisateur. Une conception et une personnalisation soignées de cette page peuvent donc améliorer de manière significative l'expérience de l'utilisateur et les taux de conversion.

Ce guide explique comment tirer le meilleur parti de l'applicationPlugins, personnalisation CSS et édition de modèles PHPetc., entièrement personnalisés Page du panier d'achat WooCommerce. Que vous souhaitiez modifier le texte, changer la mise en page ou ajouter des fonctionnalités supplémentaires, cet article vous aidera à créer une page de panier dans votre boutique en ligne qui soit à la fois belle et fonctionnelle.

1) Pourquoi dois-je personnaliser la page du panier d'achat de WooCommerce ?

Une page de panier est plus qu'un simple endroit où afficher des produits, elle joue également un rôle important dans l'expérience de l'utilisateur et, en fin de compte, dans la conversion. Une page de panier optimisée et personnalisée peut réduire le nombre d'abandons, augmenter les ventes et accroître la satisfaction des clients.

Limites de la page panier par défaut de WooCommerce

La page du panier d'achat par défaut de WooCommerce offre des fonctionnalités de base pour les achats, mais ne répond pas toujours aux besoins individuels. Elle se compose des zones principales suivantes :

• Tableau pleine largeur indiquant les articles, les prix, les quantités et les totaux.
• Permet de supprimer des articles, de mettre à jour le panier et de poursuivre les achats.
• Certains thèmes manquent d'esthétique visuelle pour mettre en valeur la personnalité de la marque.

Pour améliorer la fonctionnalité et l'attrait visuel de la page du panier d'achat, un certain nombre d'éléments ont été ajoutés à la page du panier d'achat.personnalisationpour la rendre plus conforme au style de la marque et aux habitudes des utilisateurs.

2. préparation d'une page de panier WooCommerce personnalisée

Avant de commencer à personnaliser votre site, il est important de préparer quelques éléments de base, en particulier la création d'un thème enfant et la sauvegarde de votre site.

Créer des sous-thèmes

sous-thèmeLa meilleure façon de personnaliser votre thème en toute sécurité. Il vous permet d'apporter des modifications aux fichiers du thème sans perdre ces modifications lorsque le thème parent est mis à jour. Voici les étapes pour créer un thème enfant :

1. Connectez-vous à votre tableau de bord WordPress et allez sur Apparence > Thèmes.

2. frappe (sur le clavier) Ajouter un nouveau sujetpuis sélectionnez Télécharger un sujettéléchargez le fichier zip du thème enfant.

3. Installez et activez le thème enfant.
4. entrer dans Apparence > Editeur de thèmeéditer le sous-sujet de l'article functions.php qui met en file d'attente les styles et les scripts de chargement.

Site de sauvegarde

Faites toujours une copie de sauvegarde de votre site web avant de le personnaliser. Ainsi, en cas de problème, vous pourrez facilement le restaurer dans son état antérieur.

3) Modifiez la page Panier WooCommerce à l'aide de l'éditeur de blocs.

L'éditeur de blocs WordPress (Gutenberg) offre un moyen facile de modifier les pages du panier d'achat WooCommerce. Avec l'éditeur de blocs, vous pouvezPas besoin d'écrire du codeLa mise en page peut être ajustée.

Etapes de l'utilisation de l'éditeur de blocs :

1. Connectez-vous à votre tableau de bord WordPress et allez sur page weblocalisez et cliquez sur l'icône page du panier d'achat.

2. frappe (sur le clavier) + pour ajouter un nouveau bloc, rechercher Widget panier d'achatpuis faites-le glisser sur la page.

3. Personnalisez le contenu et l'apparence de la page du panier d'achat en sélectionnant les blocs existants et en ajustant les paramètres.
4. Utilisez le bloc de colonnes (Bloc de colonnes) pour mettre en œuvre des mises en page avancées, ou utiliser WooCommerce code courtFonctionnalité étendue des pages.

5. Lorsque vous avez terminé, cliquez sur Sauvegarde des brouillons peut-être mettre à jour.

4) Plug-ins et extensions : améliorations rapides

Si vous souhaitez ajouter plus de fonctionnalités à la page du panier d'achat de manière simple, la fonctionplug-in (composant logiciel)est la solution la plus efficace. De nombreux plugins WooCommerce peuvent étendre les fonctionnalités du panier d'achat, voici quelques caractéristiques communes des plugins :

• Produits recommandésplug-in (composant logiciel): Afficher les produits recommandés ou les produits similaires dans la page du panier d'achat afin d'améliorer l'image de marque de l'utilisateur.vente croiséeL'opportunité.
• Prix et remises dynamiquesplug-in (composant logiciel)Les réductions dynamiques sont basées sur les articles du panier d'achat de l'utilisateur.
• Options de cadeauxplug-in (composant logiciel)Les services d'emballage : Proposer des options d'emballage de cadeaux sur la page du panier d'achat
• Article.

Plugins recommandés :

1. WooCommerce AJAX CartPour le panier d'achat : activer le rafraîchissement AJAX du panier d'achat afin de réduire les recharges de page.

2. YITH WooCommerce Fréquemment Achetés EnsembleLes produits de la catégorie "produits de base" : Augmenter les recommandations d'achat de produits jumelés afin de promouvoir la vente incitative.

5. personnaliser la page du panier d'achat à l'aide de CSS et de crochets

Pour une conception plus personnalisée, les CSS et les crochets WooCommerce sont des outils puissants. Les crochets vous permettent d'insérer du code personnalisé à des endroits spécifiques, tandis que le CSS vous permet de personnaliser le style de la page du panier d'achat.

Utilisation des crochetsAjouter une fonction :

WooCommerce fournit plusieurs crochets tels que :

• woocommerce_before_cart_table: Ajouter du contenu avant le formulaire de panier d'achat.
• woocommerce_cart_totals_after_order_totalInsérer la fonction de personnalisation après avoir totalisé la commande.

Pour ce faire, il suffit d'ajouter ce qui suit au fichier functions.php pour ajouter du code permettant d'utiliser ces crochets. Par exemple, ajoutez un message à la page du panier d'achat :

add_action( 'woocommerce_before_cart_table', 'custom_cart_message' ) ;
function custom_cart_message() {
    echo '
Votre panier est plein, passez à la caisse maintenant!
' ; }
' ; }

Ajustement de la page du panier d'achat à l'aide de CSS :

L'apparence de la page du panier d'achat peut être personnalisée via la feuille de style du thème enfant. Par exemple, modifier le style des boutons :

.woocommerce-cart .button {
    background-color : #ff6600 ;
    couleur : #fff ;
    border-radius : 5px ;
}

Enregistrez le fichier et actualisez la page pour voir les résultats.

6. éditer les fichiers du modèle WooCommerce via PHP

Si vous n'êtes pas satisfait de la présentation par défaut de WooCommerce, vous pouvez modifier directement ses fichiers de modèle PHP pour une personnalisation plus avancée. Pour plus de sécurité, il est recommandé de copier ces fichiers dans un thème enfant pour effectuer des modifications.

Modifier le fichier du modèle de panier d'achat :

Les fichiers de modèle pour WooCommerce sont situés dans le répertoire wp-content/plugins/woocommerce/templates/cart/ . Placez les fichiers modèles nécessaires (par exemple cart.php) est copiée dans le thème enfant dans le fichier woocommerce/cart/ et commencez à éditer.

Par exemple, vous pouvez modifier l'affichage du nom du produit :

Code phpCopy
add_filter('woocommerce_cart_item_name', 'custom_cart_item_name', 10, 3 ) ;
function custom_cart_item_name( $product_name, $cart_item, $cart_item_key ) {
    return $product_name . '
Ce produit est très populaire!' ;
}

Conclusion :

En personnalisant les pages de votre panier d'achat WooCommerce, vous pouvez améliorer l'expérience de l'utilisateur, réduire les abandons de panier et augmenter les conversions. Que ce soit par le biais de plugins, de CSS, de crochets personnalisés ou de la modification de modèles PHP, la personnalisation des pages de panier peut fournir une présentation plus personnalisée de votre marque et améliorer sa fonctionnalité, créant ainsi un processus d'achat plus esthétique et plus efficace qui fera croître votre entreprise.