Comment Réorganiser WooCommerce Commander Champs ?

WooCommerce vous permet de réorganiser et réorganiser un certain nombre d’éléments dans votre site Web de commerce électronique pour améliorer les taux de conversion. Parmi eux, les champs de caisse peuvent également être réorganisés pour répondre aux besoins de votre site Web et clients.

Mais avant de passer par les étapes, nous allons voir pourquoi vous pourriez avoir besoin de les changer.

Pourquoi changer l’ordre des champs Commander?

Lorsque vous installez WooCommerce dans votre boutique en ligne, il y a quelques pages essentielles que le plugin crée par défaut. Ils comprennent le panier, boutique, mon compte, la page de la caisse, et ainsi de suite. Mais quand il vient à la page de paiement, la champs par défaut pourraient ne pas être applicable pour chaque type de site de commerce électronique.

En fonction de votre site Web et les clients, vous pourriez avoir besoin de réorganiser les champs de caisse de WooCommerce périodiquement. Par exemple, sur la page de paiement par défaut, le client doit entrer le prénom suivi du nom de famille. Mais dans certains cas, vous trouverez peut-être que la saisie du nom de famille au début, ou de demander l’adresse de facturation du client d’abord peut-être plus approprié.

Par conséquent, si vous souhaitez personnaliser ces champs en fonction des situations similaires, vous devrez les réorganiser.

Comment Réorganiser WooCommerce Commander Les champs?

Vous pouvez modifier l’ordre des champs de caisse en utilisant WooCommerce 2 façons principales dans WordPress:

• avec Plugins
• Par programmation

Nous allons passer par chaque étape en détail pour ce guide. Cependant, s’il vous plaît assurez-vous que vous avez correctement configuré WooCommerce pour votre site Web et d’utiliser l’un des thèmes de WooCommerce compatibles avant de commencer.

Réorganiser WooCommerce Commander Les champs signalés par Plugins

Plugins peut aider beaucoup à augmenter les fonctionnalités de votre site Web. De même, l’un des moyens les plus faciles Pour modifier l’ordre des champs WooCommerce est à l’aide d’un plug-in. Tout ce que vous avez à faire est d’installer le plug-in sur votre site WordPress et réorganiser les champs de caisse à travers elle.

Il y a beaucoup de plugins checkout WooCommerce que vous pouvez utiliser pour personnaliser votre page de paiement. Mais, seulement quelques-uns vous fournir la possibilité de réorganiser les champs de caisse dans WooCommerce.

Pour ce tutoriel, nous utiliserons la Gestionnaire de paiement pour WooCommerce plug-in car il est très facile à utiliser. Il est aussi l’un des meilleurs plugins pour personnaliser la page de paiement et vous pouvez même l’utiliser pour réorganiser les champs de caisse.

Mais pour commencer à utiliser le plug-in, vous devez installer et l’activer.

1. Installez et activez le plug-in

Pour installer le plug-in, allez à Plugins> Ajouter un nouveau à partir de votre tableau de bord de WordPress et de recherche pour les mots-clés pour le plug-in. Une fois que vous trouvez le plugin, cliquez sur Installer maintenant.

Une fois l’installation terminée, Activer le plug-in.

Vous pouvez également installer le plug-in manuellement si vous souhaitez utiliser un plug-in premium ou un plug-in qui ne sont pas inclus dans le référentiel de WordPress. Les besoins du plugin à télécharger à partir du marché et téléchargées sur votre site Web. Jetez un oeil à notre guide pour installer un plugin WordPress manuellement pour plus d’informations.

2. Champs de caisse Réorganiser WooCommerce à partir des options plug-ins

Une fois le plug-in est activé, vous pouvez commencer à l’utiliser pour réorganiser les champs de caisse de WooCommerce. Allez juste à WooCommerce> Paramètres à partir de votre tableau de bord WordPress et ouvrez le Vérifier languette.

Une page de paiement comprend habituellement les détails de facturation et de livraison. Nous allons réorganiser les champs de facturation en premier. Donc, sélectionnez la Facturation option dans l’onglet Checkout. Ici, vous pourrez voir tous les champs pour les détails de facturation.

Maintenant, tout ce que vous avez à faire est de glisser-déposer utiliser pour réorganiser les champs des données de facturation. Juste faites glisser les champs et les déposer aux positions où vous voulez les placer sur votre page de paiement. Vous pouvez également utiliser le flèches vers le haut et vers le bas pour déplacer les champs vers la position désirée.

De plus, vous avez également l’option de position pour chaque champ. Les champs peuvent être soit placés sur le côté gauche ou à droite de l’écran ou avec une large zone de terrain. Les champs peuvent même être cachés si elle est nécessaire en activant la bascule sur la colonne Désactivé.

Après avoir réorganisés tous les champs de caisse pour votre magasin WooCommerce, cliquez sur Sauvegarder les modifications. Lorsque vous rechargez la page de paiement, vous pourrez voir les champs nouvellement commandés.

De la même façon, vous pouvez réorganiser les champs de détails de l’expédition aussi. Il suffit de sélectionner l’option de livraison à partir de l’onglet Checkout et réorganiser les champs à nouveau. Une fois que vous avez réarrangé tous les champs nécessaires, vous serez en mesure de voir qu’ils sont réorganisés sur la page de paiement frontend ainsi.

Réorganiser WooCommerce Commander Champs Programmatically

Vous pouvez également réorganiser les champs de caisse WooCommerce en utilisant des extraits de code si vous ne voulez pas ajouter des plugins supplémentaires à votre site Web. Mais cette approche est appropriée pour vous que si vous avez connaissances avancées en matière de programmation.

Également des extraits de code sont introduits dans le functions.php fichier de votre site Web et vous pourriez les perdre lorsque vous mettez à jour votre thème WordPress. Donc, vous devez créer un thème enfant d’ajouter les extraits. Si vous avez besoin d’aide, car WordPress pour créer un, vous pouvez même utiliser l’un des meilleurs plugins thème de l’enfant.

Toutefois, nous vous recommandons également sauvegarder votre site WordPress avant d’ajouter les extraits de code. Le fichier functions.php est l’un des fichiers de base de votre site Web et toute modification indésirable qu’il pourrait entraîner plus de problèmes. Maintenant, nous allons passer le processus.

1. Accédez au fichier functions.php dans l’éditeur de thème

Vous aurez besoin d’ajouter des extraits de code dans le fichier functions.php de l’éditeur de thème. Pour y accéder, allez à Apparence> Editeur de thème à partir de votre tableau de bord WordPress. Ensuite, sélectionnez le fonctions.php fichier à partir du côté droit de votre écran dans les dossiers thématiques.

Maintenant, vous pouvez commencer à ajouter des extraits de code après que vous faites défiler la bas de l’éditeur et mettre à jour le fichier. Nous avons utilisé le thème Divi pour ce tutoriel. Donc, cela peut paraître un autre bit que votre éditeur en fonction du thème que vous utilisez.

2. Ajoutez le code Snippets

Il y a un certain nombre d’extraits de code que vous pouvez ajouter à votre site Web pour réorganiser les champs de caisse de WooCommerce. Mais d’abord, vous devez comprendre que les champs sont divisés en 4 groupes:

• Adresse de facturation – facturation
• Adresse d’expédition – expédition
• Connexion Compte – Compte
• Informations complémentaires – ordre

En outre, chacun des champs de ces groupes a sa priorité spécifique. Vous devez également connaître leur priorité si vous souhaitez réorganiser les domaines.

Vous pouvez trouver les champs dans la liste ci-dessous ci-dessous. Le nombre représenté après les champs est leur priorité.

• Facturation
  • billing_first_name – dix
  • billing_last_name – 20
  • billing_company – 30
  • billing_address_1 – 40
  • billing_address_2 – 50
  • billing_city – 60
  • billing_postcode – 70
  • billing_country – 80
  • billing_state – 90
  • billing_email – 100
  • billing_phone – 110
• Expédition
  • shipping_first_name – dix
  • shipping_last_name – 20
  • shipping_company – 30
  • shipping_address_1 – 40
  • shipping_address_2 – 50
  • shipping_city – 60
  • shipping_postcode – 70
  • shipping_country – 80
  • shipping_state – 90
• Compte
  • account_password (Pas de priorité)
• Commande
  • order_comments (Pas de priorité)

Maintenant, regardons quelques exemples:

2.1. Déplacer un champ vers le haut

Si vous souhaitez déplacer un champ de commande pour l’afficher en haut, ou la première ligne, vous pouvez utiliser le code suivant.

add_filter( 'woocommerce_checkout_fields', 'quadlayers_email_top' );

function quadlayers_email_top( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 5;
return $checkout_fields;
}

Par défaut, le premier nom a la première priorité avec 10. Donc, si vous voulez modifier l’ordre d’un champ vers le haut, assurez-vous que la la priorité du champ est inférieure à 10.

Dans notre cas, la priorité du champ e-mail est 5. Ceci est la raison pour laquelle il est placé en haut dans le domaine de la caisse.

2.2. Déplacer un champ à un autre groupe

En utilisant l’extrait de code pour réorganiser le champ de la caisse de WooCommerce ne se limite pas seulement à déplacer un champ vers le haut. Vous pouvez modifier ou créer d’autres extraits de code pour déplacer un champ à un autre groupe aussi bien.

Par exemple, nous allons examiner l’extrait suivant:

add_filter( 'woocommerce_checkout_fields', 'quadlayers_billing_email_another_group' );
function quadlayers_billing_email_another_group( $checkout_fields ){
// 1. We assign a field array to another group here
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Remove a field from a previous location
unset( $checkout_fields['billing']['billing_email'] );
return $checkout_fields;
}

Comme vous pouvez le voir, l’e-mail de facturation a été déplacé vers le groupe d’informations supplémentaires. De même, vous pouvez modifier le code en fonction des besoins de votre site Web et l’utiliser pour déplacer des champs dans les différents groupes aussi.

Si vous avez besoin de plus d’aide sur elle, même WooCommerce a fourni un guide détaillé pour modifier les champs de caisse à l’aide de codes. Cliquez ici pour la voir.

Bonus: Activer Direct Checkout WooCommerce

Puisque vous êtes familier avec le processus de réorganiser les champs de caisse WooCommerce, il pourrait être préférable de raccourcir le processus de commande pour votre site web. Et si vous voulez simplifier le processus, sauter la page du panier est l’une des meilleures pratiques. De cette façon, les clients peuvent être redirigés vers la page de paiement directement s’ils veulent acheter quelques produits.

Pour activer Finalisez votre commande, nous utiliserons la Paiement direct pour WooCommerce brancher. Il est un simple plugin qui permet à vos clients sauter la page du panier et les rediriger vers la page de paiement. Mais pour commencer à utiliser le plug-in, vous devez installer et l’activer en premier.

Alors, allez à Plugins> Ajouter un nouveau à partir de votre tableau de bord WordPress encore une fois et la recherche du plug-in. Ensuite, cliquez sur Installer maintenant et activer le plug-in dès que l’installation est terminée.

Maintenant, vous devez ajuster certains paramètres de WooCommerce par défaut. Ils peuvent être trouvés dans WooCommerce> Paramètres sous le Des produits onglet de votre tableau de bord WordPress. Ici, sélectionnez la Général option et vous pourrez voir les options générales pour les produits WooCommerce.

Ensuite, accédez au ajouter au comportement de panier et vérifier les deux options afin qu’ils ne gênent pas les paramètres du plug-in.

Après cela, ouvrez le Paiement direct onglet et sélectionnez la Général l’option ici. Maintenant, réglez le Ajouté au panier redirection vers comme Vérifier dans le menu déroulant. Finalement, enregistrer les modifications.

Ca y est, les clients seront redirigés vers la page de paiement au lieu de la page du panier sur votre site. Nous avons aussi un guide détaillé pour sauter la page du panier si vous avez besoin de plus d’informations.

Conclusion

Ce sont les différents moyens par lesquels vous pouvez Réorganiser les champs de caisse WooCommerce sur votre site Web. Il est une très bonne personnalisation que vous pouvez appliquer à votre page de paiement pour la satisfaction de vos clients. Et en fonction de votre site, il peut être plus facile pour vous aussi.

Résumer, Nous avons examiné les deux meilleures façons de réorganiser les champs de caisse. Elles sont:

• L’utilisation d’un plug-in
• Par programmation

L’utilisation d’un plug-in est l’un des moyens les plus rapides pour réorganiser les champs. Vous avez juste besoin de régler certaines options de votre tableau de bord WooCommerce et réorganiser les champs. Cependant, si vous voulez une approche plus avancée et avoir des connaissances techniques, vous pouvez également réorganiser les utiliser des extraits de code.

Nous avons en outre également inclus un court tutoriel pour simplifier le processus de paiement en sautant la page du panier. Si vous voulez améliorer votre page de paiement plus, nous avons également des guides détaillés pour optimiser la caisse de WooCommerce, créez votre commande d’une page, le changement de procéder au texte de la caisse, et ainsi de suite.

Nous espérons que ce tutoriel vous a été utile.