[Résolu] Mettre une icone de fichier téléchargeable sur un produit (Créer un compte)

Accueil › Forums › WooCommerce › [Résolu] Mettre une icone de fichier téléchargeable sur un produit
  • WordPress :6.2
  • Statut : résolu
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • 17 septembre 2023 à 10 h 52 min #2460689
    Valentin62
    Participant
    Initié WordPress
    25 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
      • PHP : 7.4.27
      • MySQL client :mysqlnd 7.4.27
      • MySQL server : 10.5.12-MariaDB-0+deb11u1
    • Thème utilisé : Divi
    • Extensions en place : All-in-One WP Migration, All in One SEO, Jetpack, Maintenance, WooCommerce, WooCommerce Payments, WooCommerce PayPal Payments, WooCommerce Shipping & Tax
    • Nom de l’hébergeur : Delya
    • Adresse du site : https://ebook.valentin-gratz.xyz/

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

    Ce n’est pas un problème, mais je fais un site de vente d’ebook en téléchargement, et je souhaiterais savoir s’il est possible de faire comme sur cette capture, donc d’ajouter une icon qui montre que c’est un fichier à télécharger.

    Je cherche à avoir cette fonctionnalité, qui « joue » avec WordPress, de si j’ai coché ou pas la case « téléchargeable » de la fiche produit woocommerce :

    (pièce jointe)

    Donc je souhaiterais faire cela, soit en passant par Woocommerce ou par Divi (gratuitement, sans forcément acheté de nouveau plugin).

    Merci de votre aide

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    17 septembre 2023 à 20 h 32 min #2460712
    momofr@free.fr
    Modérateur
    Maître WordPress
    7462 contributions

    Salut, tu peux faire ça avec le pseudo-element :after.

    Tu as une classe CSS dans la boucle de la grille de produits pour les produits téléchargeable (downloadable).

    Il te faut trouver, soit une icône dans les polices de symbole embarquées par Divi (je ne connais pas), soit utiliser une image avec un règle comme celle-ci par exemple :

    .downloadable:after {
    content: url(/wp-content/uploads/2023/09/download-stack.svg);
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px 14px;
    border-radius: 200px;
    background-color: #2ea3f2;
    }

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    17 septembre 2023 à 21 h 24 min #2460722
    Valentin62
    Participant
    Initié WordPress
    25 contributions

    Merci

    J’ai réussi à le mettre pour la grille de la page boutique. avec ton code dans le CSS personnalisé de wordpress :

    .downloadable {
        position: relative; /* Assurez-vous que l'élément parent a une position relative */
    }

    .downloadable:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px 14px;
        border-radius: 200px;
        background-color: #2ea3f2;
        width: 20px !important;
        height: 20px !important;
        background-image: url(/wp-content/uploads/2023/09/download-icon.png);
        background-size: cover;
    }

    (code améliorer avec chatgpt)

    J’ai aussi tenté directement sur la fiche produit (via divi builder), hélas je n’ai pas réussi.

    Voici une capture d’écran de mon site (je l’ai mis en maintenance pour travailler un peu dessus) :

    • Cette réponse a été modifiée le il y a 1 année et 4 mois par Valentin62. Raison: correction lien d'insertion d'image dans la réponse impossible
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    18 septembre 2023 à 10 h 45 min #2460734
    momofr@free.fr
    Modérateur
    Maître WordPress
    7462 contributions

    Salut, pas besoin de la page modèle c’est des CSS, ça joue partout sur le site.

    18 septembre 2023 à 11 h 07 min #2460741
    Valentin62
    Participant
    Initié WordPress
    25 contributions

    Ah, car j’avais mis dans le CSS personnalisé dans la personnalisation du thème, dans le grid

    et sur la page produit ça ne fonctionne pas, voici 2 captures

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    18 septembre 2023 à 11 h 11 min #2460744
    momofr@free.fr
    Modérateur
    Maître WordPress
    7462 contributions

    Salut, que veux-tu dire par « sur la page produit« , où ça dans cette page ?

    Ta capture est une grille produits, la classe CSS est liée à la grille de produits.

    18 septembre 2023 à 11 h 58 min #2460748
    Valentin62
    Participant
    Initié WordPress
    25 contributions

    En fait, sur la page produit (divi) je souhaite mette l’icon téléchargement (comme pour la boutique), mais au niveau du (rond noir) sur la capture que j’ai fait

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    18 septembre 2023 à 14 h 14 min #2460752
    momofr@free.fr
    Modérateur
    Maître WordPress
    7462 contributions

    Salut, tu veux garder la fonction de zoom ? Ça ne vas être simple sur mobile.

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