[Résolu] Bouton flottant configurable par page (Créer un compte)

  • WordPress :5.4
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2347101
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.1/5.6
    • Thème utilisé : Pictorico
    • Extensions en place : Woocomerce
    • Nom de l’hébergeur : OVH
    • Adresse du site : https://sabelya.fr

    Problème(s) rencontré(s) :

    Par soucis de lisibilité, je souhaiterais ajouter une icône flottante à certains Posts de mon site, avec un lien configurable (ajout au panier par ex.). J’ai essayé plusieurs plugins ‘sticky menu’ sans résultat.

    Merci d’avance.

    #2347110
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Bonjour,

    Vous pouvez utiliser un shortcode woocommerce pour ajouter un lien à une image/icone n’importe où sur le site. Voir ICI. Vous pouvez appliquer ce code de la manière suivante. Par exemple avec ce code, à ajouter dans la page en mode texte, vous pourrez en cliquant sur l’icône envoyer le produit avec l’id 100 au panier.

    <a class="ui large primary button" href="[add_to_cart_url id=100]">
    <img class="choisissez_une_classe" src="http://url_de_votre_icone"/></a>

    Bien sûr, il faut que le produit à mettre au panier soit dans la boutique (mais vous pouvez le masquer de manière à ce qu’il ne soit pas visible dans cette boutique).

    Vous pouvez aussi ajouter simplement une copie du bouton “ajouter au panier” classique (voir un peu plus bas dans le lien).

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
    #2347116
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Bonjour ferman,

    Merci de votre réponse. Je fais déjà qq chose comme cela qui fonctionne actuellement mais j’aimerais obtenir ce résultat avec un bouton flottant qui suit le lecteur dans la page. Est-ce possible SVP ?

    #2347124
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Vous pouvez fixer la position de l’icone dans la page avec du css. par exemple pour la page “scorpio distortion”, vous pouvez essayer ça, à mettre dans les css additionnelles du thème. C’est le principe. Après, si ça vous va il faudra ajuster.

    .entry-content h6 a{position:fixed;
    	top:300px;
    z-index:2;}

    #2347127
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Super ! Merci ferman, c’est l’idée absolument  🙂

    Maintenant à bidouiller pour voir.., dernière chose, pourrait-on faire une condition suivant la largeur de l’écran par ex. ? Car suivant le redimensionnent ce n’est pas tjrs une bonne idée.

    Merci de votre temps.

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par Sabelya.
    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par Sabelya.
    #2347132
    ferman
    Participant
    Maître WordPress
    2628 contributions

    C’est certainement possible mais précisez un peu ce que vous voulez. Icône non fixée sur portable? Et sur tablette?

     

    #2347133
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Tout à fait, icône non fixée sur smartphone.
    Merci.

    #2347136
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Essayez le code ci-dessous: ce n’est plus fixé pour smartphone en position verticale. En position horizontale à mon avis l’icône disparaît trop vite de l’écran mais si vous voulez modifier dites-le, ce n’est pas difficile. J’ai laissé “left” en blanc: vous pouvez y ajouter des valeurs en px pour positionner l’icône. Vous pouvez aussi bien sûr modifier la valeur “top”.

    @media screen and (min-width: 600px) {
    .entry-content h6 a{position:fixed;
    	top:300px;
    	left:;
    z-index:2;
    }
    }

    #2347137
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Merci beaucoup pour l’aide.
    Je vais tester ça.

    #2347138
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Je croyais que mon message n’est pas parti . Je vois finalement que si.

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par ferman.
    #2347224
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    Je suis en train de faire des essais, merci pour votre aide.
    En examinant une page via Firefox par ex., on identifie bien l’élément h6 (ajout au panier) qui se retrouve sur tous les Posts. Sur la page     https://sabelya.fr/retromatic/      j’ai remplacé l’icône du panier par une autre, du coup impossible d’identifier le nouvel élément, je ne comprends pas comment cela fonctionne.
    L’idée est de rendre l’icône la plus visible possible tout simplement, mais je n’arrive plus à faire du coup la manip que vous m’avez indiquer.

    MAJ :
    Je suis finalement arrivé à substituer le logo mais je ne comprends pas comment se définit cette zone qui est identique sur tous les Posts. Pas grave si cela fonctionne avec la bidouille  🙂

    • Cette réponse a été modifiée le il y a 1 semaine et 2 jours par Sabelya.
    • Cette réponse a été modifiée le il y a 1 semaine et 2 jours par Sabelya.
    #2347228
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Bonjour,

    Ce serait ça:

    @media screen and (min-width: 600px) {
    .entry-content h6 a img.wp-image-6222{position:fixed;
    	top:300px;
    	left:;
    z-index:2;
    }
    }

    Si vous devez encore changer, je vous propose de faire des essais et quand vous êtes satisfait on s’occupe des CSS. Ou alors vous essayez de repérer l’élément vous même.  Vous cliquez droit sur l’icône et vous regardez à gauche dans l’inspecteur. Voir pièce jointe. Il n’est pas nécessaire de tout mettre: par exemple, ici comme l’image est bien définie. Par exemple, ici, on peut omettre img et .alignone.  (Mettre tout est bien sûr OK, simplement quelquefois c’est long).

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2347230
    Sabelya
    Participant
    Initié WordPress
    40 contributions

    C’est parfait, merci encore ferman, je vais m’en sortir avec vos recommandations.
    Salutations,

13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.