Comment changer l'apparence de votre formulaire de commande

Vous voulez que votre formulaire de commande corresponde au design de votre boutique ? Le générateur de WooCommerce Wholesale Order Form inclut des contrôles de style pour chaque élément, couvrant l'espacement, les couleurs des boutons et l'affichage des étiquettes de champ. Cet article vous guide à travers chaque option.

Prérequis

• WooCommerce Wholesale Order Form installé et activé
• Au moins un formulaire de commande déjà créé. Si vous ne l'avez pas encore fait, consultez le Guide de démarrage de WooCommerce Wholesale Order Form.

Ouverture du panneau des paramètres de l'élément

Les options de style et d'affichage sont disponibles pour chaque élément individuel de votre formulaire de commande. Pour les ouvrir :

1. Accédez à Vente en gros → Formulaires de commande dans votre administration WordPress.
2. Cliquez sur le formulaire de commande que vous souhaitez modifier pour l'ouvrir dans le générateur.
3. Survolez n'importe quel élément du formulaire. Une icône d'engrenage apparaîtra dans le coin supérieur droit de cet élément.
4. Cliquez sur l'icône d'engrenage pour ouvrir le panneau des paramètres dans la barre latérale droite.

La barre latérale affiche deux sections : Styles (espacement et ajustements visuels) et Options (paramètres spécifiques à l'élément). Cliquez sur un titre de section pour le développer. Les sections ci-dessous expliquent ce que contient chacune d'elles.

Ajustement de l'espacement des éléments

Utilisez la section Styles pour contrôler l'espace autour de n'importe quel élément. Chaque élément prend en charge les valeurs de marge et de remplissage, vous pouvez donc affiner la mise en page pour qu'elle corresponde au design de votre boutique.

1. Cliquez sur l'icône d'engrenage de l'élément que vous souhaitez ajuster.
2. Développez la section Styles dans la barre latérale.
3. Entrez les valeurs pour la Marge (espace extérieur à l'élément) ou le Rembourrage (espace intérieur à l'élément). Les valeurs sont en pixels par défaut. Utilisez le sélecteur d'unité pour passer à %, em ou rem si nécessaire.
4. Les quatre côtés sont liés par défaut, donc une valeur que vous entrez s'applique à la fois au haut, à droite, au bas et à gauche. Cliquez sur l'icône de lien pour dissocier les côtés, puis entrez chaque côté indépendamment.
5. Cliquez sur Enregistrer le brouillon (ou Mettre à jour si le formulaire est déjà publié) dans la barre d'outils supérieure pour enregistrer le formulaire.

Modification des couleurs des boutons

Les éléments de bouton, tels que le bouton Ajouter au panier et le bouton Rechercher, ont des contrôles de couleur dans leur section Styles. Vous pouvez définir des couleurs distinctes pour l'arrière-plan du bouton et le texte du bouton.

1. Cliquez sur l'icône d'engrenage du bouton que vous souhaitez modifier.
2. Développez la section Styles dans la barre latérale.
3. Cliquez sur l'échantillon de couleur à côté de Couleur du bouton pour ouvrir le sélecteur de couleurs et choisir votre couleur d'arrière-plan.
4. Cliquez sur l'échantillon de couleur à côté de Couleur du texte du bouton pour définir la couleur de l'étiquette.
5. Cliquez sur Enregistrer le brouillon (ou Mettre à jour si le formulaire est déjà publié) dans la barre d'outils supérieure pour enregistrer le formulaire.

Affichage ou masquage des étiquettes de champ méta produit

Si votre formulaire de commande inclut une colonne Méta produit, utilisée pour afficher des données produit personnalisées telles que le poids, les dimensions ou d'autres attributs stockés dans les méta produits, vous pouvez choisir si l'étiquette du champ apparaît à côté de chaque valeur. Ceci est utile lorsque vous souhaitez une mise en page plus épurée qui affiche uniquement les valeurs, sans les noms des champs affichés à côté d'elles.

1. Cliquez sur l'icône d'engrenage de votre colonne Méta produit pour ouvrir ses paramètres.
2. Développez la section Options dans la barre latérale.
3. Localisez la case à cocher Afficher les étiquettes des champs. Par défaut, elle est cochée, ce qui signifie que les étiquettes sont visibles à côté de chaque valeur.
4. Décochez Afficher les étiquettes des champs pour masquer les étiquettes, ne laissant que les valeurs visibles dans le formulaire de commande.
5. Cliquez sur Enregistrer le brouillon (ou Mettre à jour si le formulaire est déjà publié) dans la barre d'outils supérieure pour enregistrer le formulaire.

Remarque : Les clés méta qui commencent par un trait de soulignement (par exemple, _my_field) sont privées dans WordPress et ne s'afficheront pas dans le formulaire de commande, quelle que soit cette option.

Dépannage

Mes changements d'espacement ne s'affichent pas sur le frontend

Assurez-vous d'avoir enregistré le formulaire avec Enregistrer le brouillon ou Mettre à jour dans la barre d'outils supérieure après avoir saisi vos valeurs d'espacement. Si vous avez enregistré mais que le changement n'apparaît toujours pas, essayez de vider le cache de votre navigateur et de tous les plugins de mise en cache (tels que WP Rocket ou W3 Total Cache), puis rechargez la page.

La colonne Meta produit n'affiche aucune valeur

Vérifiez les clés méta que vous avez ajoutées dans le tableau Meta produit sous la section Options. La clé doit correspondre exactement à ce qui est stocké dans les champs personnalisés du produit, y compris la casse. Confirmez également que la clé méta ne commence pas par un trait de soulignement, car les champs méta privés sont exclus de l'affichage.

La case à cocher Afficher les étiquettes des champs ne s'enregistre pas

Cette option nécessite la version 3.0.9 ou ultérieure de WooCommerce Wholesale Order Form. Vérifiez la version de votre plugin sous Plugins → Plugins installés et mettez à jour si nécessaire.

Questions fréquemment posées

Puis-je masquer les étiquettes de certains champs méta mais les afficher pour d'autres ?
Non. Le paramètre Afficher les étiquettes des champs s'applique à tous les champs méta de cette colonne à la fois. Si vous avez besoin d'un affichage mixte, envisagez d'ajouter deux colonnes Meta produit distinctes : une avec les étiquettes affichées et une avec les étiquettes masquées, chacune configurée avec des clés méta différentes.

Puis-je changer la taille de la police ou la couleur du texte des éléments ?
Les contrôles de style intégrés couvrent actuellement l'espacement et les couleurs des boutons. Pour le style du texte, vous pouvez ajouter du CSS personnalisé via Apparence → Personnaliser → CSS additionnel et cibler les classes CSS du formulaire de commande.

Besoin d'aide ?

Si vous avez une question ou rencontrez des problèmes, nous sommes là pour vous aider.

• Utilisateurs premium : Ouvrir un ticket de support
• Utilisateurs gratuits : Visitez notre forum communautaire