WOOCS - Sélecteur de devise WooCommerce

Comment personnaliser la vue du sélecteur de devises woocommerce

"Concepteur intelligent"(à partir de v.2.3.5 / 1.3.5) fait partie de la fonctionnalité de WooCommerce Currency Switcher qui permet de créer un sélecteur déroulant multi-devises à l'aide d'un tableau de bord pratique. Vous pouvez créer un nombre illimité de conceptions de listes déroulantes pour différents endroits de votre site et même les insérer directement dans le code du site. Vous pouvez également créer un shortcode-wrapper personnalisé pour afficher des commutateurs de devises de différentes conceptions en fonction des pages du site ou de toute autre condition logique, par exemple :

add_shorctode('woocs_set1', function($args) { global $post; //$args - ici peut être un commutateur de paramètres personnalisés ($post->ID) { case 17: echo do_shortcode('[woocs sd=2]') ; break; case 27 : echo do_shortcode('[woocs sd=3]'); break ; case 44 : echo do_shortcode('[woocs sd=4]'); break ; par défaut : echo do_shortcode('[woocs sd=1 ]'); Pause; } });

Dans l'exemple ci-dessus en utilisant un shortcode personnalisé [woocs_set1 custom_param=1] permet d'afficher différents modèles de changeurs de devises en fonction des pages du site.

Sur la même page peut être placé un nombre illimité de commutateurs, par exemple : dans l'en-tête '[woocs sd=1]', dans la barre latérale '[woocs sd=2]', dans le pied de page '[woocs sd=3]'. Cela ajoute plus de fonctionnalité aux clients de votre site et, de la même manière, les changeurs de devises s'intègrent facilement dans le paysage de votre site.

Pour créer un tel design, vous devez aller à l'onglet "Designs" sur la page des options WOOCS, et appuyez sur le bouton "Créer". Après la création cliquez sur le bouton 'éditer' du design qui vient d'être créé. Sur le tableau de bord des options de conception, vous verrez 4 sections : Général, Titre de propriété, Description, Drapeau. Vous pouvez naviguer dans les sections en utilisant le menu en haut à droite. Le résultat de l'édition est instantané et vous pouvez voir la liste déroulante modifiée en haut de la page avec les paramètres appliqués.

Chaque section a ses propres options. Revoyons:

Rubrique « Général » :

  • curseur de plage "Largeur” – largeur de la liste déroulante des devises en pixels, les valeurs minimales sont de 80px et les valeurs maximales sont de 900px
  • commutateur "Largeur 100%” - si activé, la liste déroulante aura 100% de la largeur du conteneur où il est placé
  • curseur de plage "Échelle” - définissez l'échelle des listes déroulantes. Ajoute de la commodité pour le rendre plus petit à placer par exemple dans le pied de page du site
  • curseur de plage "Largeur de la bordure” – largeur de la bordure de la liste déroulante du sélecteur de devise en pixels, les valeurs minimales sont 0 et les valeurs maximales sont 10px
  • curseur de plage "Rayon de bordure” – rayon de bordure de la liste déroulante du sélecteur de devises en pourcentages, les valeurs minimales sont de 0 et les valeurs maximales sont de 100 %
  • pipette à couleurs "Couleur de la bordure” – couleur de la bordure du commutateur. Après avoir cliqué sur le bouton de sélection, vous pouvez sélectionner le schéma de couleurs que vous souhaitez utiliser : RVB, HSL, HEX
  • pipette à couleurs "Couleur de fond” – couleur de fond pour chaque option
  • pipette à couleurs "Couleur du pointeur” – couleur du pointeur des listes déroulantes que vous pouvez voir sur les listes déroulantes à droite
  • pipette à couleurs "Options de couleur de séparation” – couleur des lignes qui divise les options lorsque le sélecteur de devises est ouvert
  • curseur de plage "Taille du diviseur d'options” – largeur de bordure de la ligne qui divise les options lorsque le sélecteur de devises est ouvert, les valeurs minimales sont 0 et les valeurs maximales sont 10px
  • curseur de plage "Hauteur ouverte max” – hauteur maximale de la liste déroulante ouverte. Si la somme des hauteurs d'options est plus verticale, la barre de défilement apparaît

Section titre":

  • commutateur "Montrer le titre” – permet d'afficher ou de masquer le texte du titre dans chaque option du sélecteur déroulant de devise
  • saisie de texte "Valeur du titre” – contenu de chaque texte de titre d'option. Utilisez des mots-clés spéciaux et leur combinaison : __CODE__ [USD], __SIGNE__ [$], __DESCR__ [n'importe quel texte]. Vous pouvez également utiliser du texte statique habituel. Exemple : __CODE__ – __SIGN__ [vous verrez : USD – $]
  • curseur de plage "Taille de la police du titre” – taille de la police du texte du titre en pixels pour chaque option, les valeurs minimales sont de 8px et les valeurs maximales sont de 48px
  • commutateur "Titre en gras" - si activé, le texte du titre a un poids de police en gras pour chaque option
  • pipette à couleurs "Couleur du titre” – couleur du texte du titre pour chaque option
  • saisie de texte "Police de titre" - chaque famille de polices de texte de titre d'option

Rubrique « Description » :

  • commutateur "Montrer la description” – permet d'afficher ou de masquer le texte de description dans chaque option du sélecteur déroulant de devise
  • curseur de plage "Description taille de la police” – taille de police du texte de description en pixels pour chaque option, les valeurs minimales sont de 8px et les valeurs maximales sont de 48px
  • pipette à couleurs "Couleur descriptif” – couleur du texte de description pour chaque option
  • saisie de texte "Police de description" - chaque famille de polices de texte de description d'option

 

Rubrique « Drapeau » :

  • commutateur "Afficher le drapeau” - permet d'afficher ou de masquer l'image du drapeau pour chaque option du sélecteur déroulant de devise
  • commutateur "Position du drapeau” – permet de définir le côté de l'image du drapeau pour chaque option : droite ou gauche
  • curseur de plage "Hauteur du drapeau" - définir la hauteur de l'image du drapeau en pixels pour chaque option, les valeurs minimales sont de 5px et les valeurs maximales sont de 100px
  • curseur de plage "Position verticale du drapeau" - définir la position verticale du drapeau pour chaque option en pixels, les valeurs minimales sont de -20px et les valeurs maximales de 30px

À l'aide de la navigation dans les sections placée en haut à droite, vous pouvez naviguer rapidement dans les paramètres de conception actuels et définir ses options. N'oubliez pas de cliquer sur le bouton « Enregistrer » que vous pouvez toujours trouver fixe en bas de la fenêtre du navigateur. Après avoir modifié les économies de conception, quittez le tableau de bord de conception et copiez le code court, par exemple « [woocs sd=7] ». Vous pouvez maintenant le placer dans le widget texte habituel, le contenu texte de votre page de site, ou directement dans les fichiers php du site, par exemple dans le fichier footer.php en utilisant le code suivant :


Page de démonstration SD de WOOCS.