FOX - Professionnel du commutateur de devises WooCommerce

Comment déposer le sélecteur de devises Woocommerce dans le menu

Cet article n'est qu'un exemple dont le but est d'aider les utilisateurs à insérer un sélecteur dans le menu de leur site, et cela ne fait pas partie de la fonctionnalité WOOCS !

  • Installer le plugin Shortcode dans les menus
  • Ajouter à functions.php du code suivant de votre thème wp actuel :
    add_shortcode('woocs_in_menu', function() { if (defined('WOOCS_LINK')) { $styles_link = WOOCS_LINK . 'views/shortcodes/styles/for-menu/'; wp_enqueue_style('woocs-style-in-menu', $styles_link . "styles.css", array(), WOOCS_VERSION); wp_enqueue_script('woocs-style-in-menu', $styles_link . "actions.js", array('jquery'), WOOCS_VERSION); ob_start() ; ?> Cliquez sur moi !!  Sélectionnez la devise 
  • Accédez à la page Menus : wp-admin / nav-menus.php
  • Insérer un shortcode [woocs_in_menu] comme sur l'écran ci-dessous :
  • Enregistrez le menu et regardez-le sur le devant de votre site. Rappelles toi à propos du cache du site, alors réinitialisez-le si vous utilisez des plugins de cache
  • Utilisation du style CSS en le surchargeant comme vous le souhaitez à l'aide de hook wp_footer dans functions.php :
    .woocs-style-for-menu-dialog { position : absolue ; text-align : centre ; arrière-plan : #4478a0 ; marge : 13px 0 4px 4px ; affichage : bloc en ligne ; largeur : 256px ; box-shadow : 0px 0px 8px rgba (68, 140, 160, 0.5) ; } .woocs-style-for-menu-dialog:after, .woocs-style-for-menu-dialog:before { bottom: 100%; bordure : solide transparent ; teneur: " "; hauteur : 0 ; largeur : 0 ; position : absolue ; événements de pointeur : aucun ; } .woocs-style-for-menu-dialog:after { border-color: rgba(255, 255, 255, 0); border-bottom-color : #5C9CCE ; largeur de la bordure : 15 px ; gauche : 50 % ; marge gauche : -15px ; } .woocs-style-for-menu-dialog:before { border-color: rgba(170, 170, 170, 0); largeur de la bordure : 16px ; gauche : 50 % ; marge-gauche : -16px ; } .woocs-style-for-menu-dialog .woocs-style-for-menu-title { color: #fff; font-weight : gras ; text-align : centre ; bordure : 1px solide #5189B5 ; largeur de bordure : 0px 0px 1px 0px ; marge gauche : 0 ; marge droite : 0 ; marge inférieure : 4px ; marge supérieure : 8px ; rembourrage : 8px 16px ; arrière-plan : #5C9CCE ; box-shadow : 0px 1px 4px rgba (68, 120, 160, 0.1) ; taille de la police : 16px ; hauteur de ligne : 2em ; } .woocs-style-for-menu-dialog .woocs-style-for-menu-title:first-child { margin-top: -4px; } .woocs-style-for-menu-form { padding:16px; }
    
    add_action('wp_footer', function (){ ?>
          /********* overload any styles here ***********/
       
    

     


Voir la démo ici

A lire également: https://currency-switcher.com/how-to-insert-currency-switcher-into-site-menu/


Descriptif obsolète :

post-scriptum Incompatibilités CSS possibles qui devraient être résolues par vous ou votre développeur de site