Ajouter un fichier téléchargeable automatiquement dans une fiche produit WooCommerce sans plugin

Comment insérer un PDF automatiquement (ou autre) à télécharger dans votre fiche produit ?

Lien télécharger la fiche produit
Bouton télécharger le PDF

Un client souhaitait pouvoir mettre à disposition dans la plus part de ces produits de sa boutique en ligne, une fiche technique à télécharger au format PDF pour le produit qu’il vendait.

N’étant pas fan d’ajouter des extensions / plugins à la base et encore moins sur des demandes de ce type, qui relève plus du petit développement, je devais trouver une solution simple d’utilisation pour le client (en évitant d’utiliser un FTP pour placer les fichiers par exemple) et si possible sans maintenance technique par la suite lors d’évolution.

Il fallait donc trouver une solution, car nativement WooCommerce propose d’uploader des fichiers pour un produit (fonction Produit virtuel) dans une fiche produit. L’astuce serait donc, d’utiliser ceci pour en suite le capter (le fichier) et l’afficher à l’endroit souhaité (dans mon exemple il sera dans et sous la Description courte du produit.

Version de WooCommerce
Cette modification a été faite pour un WooCommerce 3.7.1 et WorPress 5.2.4, mais elle devrait fonctionner sur d’autres versions, quitte à l’adapter un peu.

Besoin d'un site WordPress ?

Ajouter la fonction (code) qui va permettre l’affichage du PDF à télécharger depuis votre fiche produit

Dans un premier temps vous devez avoir un thème enfant afin de préserver vos modifications, si vous n’en avez pas je conseils fortement de la faire ; vous pouvez voir dans cet article comment réaliser ou télécharger un thème enfant (Chlid Theme).

Suivre ces étapes :

  1. Copier le fichier original short-description.php depuis /wp-content/plugins/woocommerce/templates/single-product
  2. Modifier ce fichier avec la fonction / code ci-dessous
  3. Placer ce fichier dans /wp-content/themes/VOTRE_child/woocommerce/single-product/
    Attention vous devrez certainement créer les dossiers : /woocommerce/ et /single-product/
  4. Rendez-vous dans votre fiche produit pour insérer votre PDF

Fonction / code à placer sous le bloc de la courte description

Sous cette ligne :
<?php echo $short_description; // WPCS: XSS ok. ?>

Placer ce code :

<?php
//Affiche le fichier téléchargeable de la fiche produit
global $product;
$downloads = $product->get_files();
foreach( $downloads as $key => $each_download ) {
echo 'Télécharger la fiche technique';
break 1;
}
?>

CSS utilisé que vous placerez dans votre thème enfant :

/* Lien télécharger la fiche produit */
.dl-fiche-produit {
display: block!important;
margin-bottom:20px!important;
background-color: #1A73E8!important;
border-radius: 4px!important;
width:46%!important;
opacity:0.8;
}
a:hover.dl-fiche-produit {
opacity:1;
}

Activer « Téléchargeable » de la fiche produit et ajouter le PDF

Une que vous avez fait tout ceci, vous pouvez vous rendre dans la fiche produit en question, cocher Téléchargeable puis Ajouter un fichier et sauvegarder le tout.

Et voilà vous avez votre fichier en ligne et facilement gérable !

Fonction Produit téléchargeable Porduit Virtuel
Ajouter un fichier téléchargeable pour un produit d’une boutique WooCommerce

Voici le résultat final avec la CSS

Lien télécharger la fiche produit
Bouton télécharger le PDF

10 réponses

    1. Bonjour,
      Avez-vous les mêmes versions ? Sinon peut-être qu’il faut faire un ajustement du code pour votre cas.

    2. Bonjour,

      J’essaye de réaliser votre manipulation, mais j’ai une erreur qui apparais à chaque fois.
      Il semblerait que get_files soit déprécié et qu’il faille utiliser get_downloads à la place, mais cela ne fonctionne pas quand même. Je ne suis pas forcément un novice les étapes sont claires mais cela ne fonctionne pas.

    3. Bonjour,
      merci pour ce code mais malheureusement cela ne fonctionne pas, j’ai un code erreur « syntax error, unexpected ‘global’ (T_GLOBAL) » pour global $product;
      J’ai une version woocommerce 4.8.0 et une version WP5.6.2. Merci pour votre retour

    4. Bonjour,
      C’est ce dont j’ai besoin mais malheureusement cela ne marche pas!!!

      j’ai les versions 4.9.2 de WooCommerce et 5.7.1 de WordPress

    1. ok c’est juste le commentaire en /** */ qui fait bugger le php

      comme cela ca fonctionne :

      get_files();
      foreach( $downloads as $key => $each_download ) {
      //echo $key;
      echo '';
      echo ' '.$each_download["name"].'';
      echo '';
      break 1;
      }
      ?>

  1. Bonjour,

    Version Woocommerce 6.2.0
    Version wordpress 5.9
    Theme : Astra

    Ca ne fonctionne pas chez moi … j’ai bien le texte qui apparait sous la descritpion, mais le CSS ne fonctionne pas ni la fonction en elle même … une idée ?

Répondre à Jean Annuler la réponse

Votre adresse e-mail ne sera pas publiée.