Comment modifier le texte du bouton "Ajouter au panier" dans WooCommerce

WooCommerce être WordPress Il s'agit d'un plugin de commerce électronique largement utilisé sur la plateforme. Le bouton "Ajouter au panier" est un élément important d'un site de commerce électronique et joue un rôle clé dans la décision d'achat de l'utilisateur. Parfois, les commerçants peuvent souhaiter modifier le texte de ce bouton pour l'adapter à leurs besoins commerciaux spécifiques ou au style de leur site web.

Image [1] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Dans cet article, nous présenterons deux approches permettant d'atteindre cet objectif : l'utilisation de la fonction Loco Translate Plugin répondre en chantant personnalisation CSS.

Méthode 1 : Changer le texte du bouton "Ajouter au panier" en utilisant le plugin Loco Translate

Étape 1 : Installer et activer le plugin Loco Translate

Tout d'abord, vous devez installer et activer Loco Translate Plugin. Après l'installation, le plugin sera WordPress Une nouvelle option a été ajoutée au tableau de bord pour faciliter la modification du texte sur le site web.

  • Dans le tableau de bord de WordPress, cliquez sur Plugins > Installer des pluginsRecherche Loco Translate.
  • Installez et activez le plug-in.

Étape 2 : Aller dans les paramètres de Loco Translate

  • Dans le tableau de bord, cliquez sur Loco Translate > Accueil.
  • Une fois que vous aurez accédé à Plugins, vous verrez une liste de tous les plugins installés sur le site.
Image [2] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 3 : Sélectionner le plugin WooCommerce

Dans la liste des plugins, trouvez le plugin WooCommerce Et cliquez dessus.

Étape 4 : Ajout d'une nouvelle langue

frappe (sur le clavier) + nouvelle langue pour sélectionner la langue à modifier.

Image [3] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 5 : Recherche du texte "ajouter au panier

Dans le champ de recherche situé en haut de la page, tapez "Ajouter au panier pour trouver le texte du bouton.

Image [4] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 6 : Modifier le texte du bouton

  • option "Ajouter au panier Apporter des modifications.
  • Dans le champ de traduction ci-dessous, saisissez le nouveau texte que vous souhaitez afficher. Par exemple, ce texte pourrait être modifié comme suit "Demander des renseignements".

Étape 7 : Enregistrer les modifications

Après avoir effectué les modifications, cliquez sur enregistrer (un fichier, etc.) (informatique) Rendez-le efficace.

Image [5] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

De cette manière, le texte des boutons peut être facilement modifié pour s'adapter aux différentes langues et aux besoins de l'entreprise.

Méthode 2 : Modifier le style du texte du bouton à l'aide du personnalisateur

Si vous souhaitez modifier globalement le style de texte de tous les boutons de votre site, vous pouvez le faire dans la section personnalisateur Voici les étapes détaillées pour effectuer les réglages :

Étape 1 : Aller dans Apparence > Personnaliser

  • Dans le tableau de bord, cliquez sur Apparence > Personnalisation, accéder à l'interface de personnalisation du site.
Image [6] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 2 : Cliquez sur "Global" Settings

  • Dans le Customiser, sélectionnez situation en matière de sécurité Le cadre.
Image [7] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 3 : Cliquez sur le bouton Paramètres de style

  • option boutonspour entrer dans l'interface de réglage du style du bouton.
Image [8] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Étape 4 : Modifier le style de police du bouton

  • frappe (sur le clavier) style calligraphique L'icône du crayon à côté permet d'accéder aux paramètres de la police.
Image [9] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS
  • option text-transform : capitalizepour mettre le texte du bouton en majuscules.
Image [10] - Personnaliser le texte des boutons de WooCommerce avec Loco Translate et CSS

Ce paramètre affecte le style de texte de tous les boutons.

Méthode 3 : Modifier le style du texte du bouton "Ajouter au panier" à l'aide d'une feuille de style CSS personnalisée

Si vous souhaitez uniquement modifier le "Ajouter au panier sans affecter les autres boutons, vous pouvez ajouter un style de texte personnalisé. CSS Code.

Pour les pages de produits individuels :

.woocommerce div.product.cart button.single_add_to_cart_button {
    text-transform : capitalize ;
}

Pour la page de la boutique :

.woocommerce ul.products li.product .button, .
.woocommerce-page ul.products li.product .button {
    text-transform : capitalize ;
}

Grâce à ces CSS Code, seulement "Ajouter au panier Le texte des boutons passe en majuscules, tandis que les autres boutons restent tels quels.

résumés

modifications WooCommerce a fait mouche "Ajouter au panier Le texte du bouton est suffisamment simple pour être passé par la fonction Loco Translate Plugin peut-être personnalisation CSS pour terminer. Si vous souhaitez modifier le style de texte du boutonpersonnalisateur répondre en chantant CSS Des solutions flexibles sont proposées. Ces méthodes permettent de personnaliser les boutons à la demande et d'améliorer la personnalisation et l'aspect général d'un site web.

Mises à jour récentes


Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
Service clientèle WeChat
Service clientèle WeChat
Tel : 020-2206-9892
QQ咨询:1025174874
(iii) Courriel : info@361sale.com
Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.
© Déclaration de reproduction
Cet article a été écrit par : les voleurs seront des souris et des rats.
LA FIN
Si vous l'aimez, soutenez-le.
félicitations1321 partager (joies, avantages, privilèges, etc.) avec les autres
commentaires achat de canapé

Veuillez vous connecter pour poster un commentaire

    Pas de commentaires