En tant que propriétaire de boutique, vous voudrez peut-être donner à vos clients la possibilité de télécharger des PDF directement depuis WooCommerce. Que ce soit parce que vos utilisateurs ont besoin d’une version imprimée, que vos vendeurs ont besoin de brochures sur les produits lorsqu’ils rendent visite à des partenaires ou que vos clients ont besoin d’une version hors ligne de vos articles.Dans ce tutoriel, nous vous montrons comment vous pouvez configurer votre propre produit WooCommerce PDF personnalisé basé sur des données existantes. Apprenez à transformer vos données produit existantes en une brochure produit unique au format PDF, que les clients peuvent télécharger et consulter hors ligne.
Qu’est-ce que WooCommerce ?
Avant de commencer, vous devez savoir ce qu’est WooCommerce. WooCommerce est un plugin de système de boutique pour WordPress, qui vous offre toutes les fonctionnalités dont une boutique en ligne a besoin aujourd’hui. Vous pouvez créer des produits, définir des méthodes d’expédition et de paiement et commencer à vendre en ligne en quelques clics. Vous pouvez non seulement présenter vos articles à vendre, mais aussi réutiliser toutes les données pour créer une brochure de produit au format PDF.
Qu’est-ce que WooCommerce Print Products (PDF)?
Supposons que vous ne souhaitiez pas partir de zéro pour mettre en place une solution vous permettant de transformer les données de vos produits en ligne en un PDF imprimé. Il est complexe de mettre en place un moteur de rendu PDF, il faut trouver tous les crochets, filtres et fonctions essentiels de WooCommerce et on se perd vite dans l’univers de WordPress.C’est pourquoi vous pouvez utiliser le plugin Print Products (PDF) pour WooCommerce comme solution de base simple. Ce plugin vous offre une solution facile pour transformer des produits en PDF, Word ou Print. Vous pouvez choisir entre 3 mises en page différentes, masquer ou afficher des données et ajouter un en-tête et un pied de page personnalisés comprenant votre logo, le nom de votre marque, le nom de votre produit et bien d’autres choses encore.Nous utiliserons ce plugin pour créer nos propres PDF de produits personnalisés en utilisant les filtres fournis dans le plugin.
Utiliser les crochets WordPress dans un thème enfant
WordPress et de nombreux plugins professionnels vous offrent des filtres pour modifier le contenu, les données ou ajouter des textes personnalisés. Il existe deux types de filtres :
- Crochets d’action
- Crochets de filtre
La différence n’est pas facile à expliquer, car les deux crochets peuvent faire presque 1:1 la même chose. Mais l’intention des actions est d’ajouter du contenu supplémentaire et l’intention d’un filtre est de modifier des données déjà fournies par un plugin, un thème ou le noyau de WP.Le plugin WooCommerce Print Products PDF utilise des crochets de filtrage pour modifier le HTML qui est placé dans le fichier PDF du produit. Nous allons utiliser le filtre woocommerce_print_products_product_html pour créer un modèle personnalisé.Pour utiliser WP Hooks, il est recommandé de créer un thème enfant. Un thème enfant hérite de toutes les fonctionnalités du thème principal. Ici, vous pouvez créer des fonctions personnalisées ou modifier des styles sans tout perdre lors de la prochaine mise à jour du thème principal. La plupart des modèles de Themeforest, par exemple, proposent un thème enfant directement dans les fichiers téléchargés. Il suffit d’installer le thème principal + le thème enfant, d’activer le thème enfant et le tour est joué. Dans l’apparence, vous verrez alors 2 thèmes, celui de l’enfant doit être actif.
Création de notre modèle HTML personnalisé
As said we are going to use thewoocommerce_print_products_product_html filter. Ce filtre modifie la partie HTML complète du PDF, mais ne touche pas à l’en-tête et au pied de page, que vous pouvez définir dans les paramètres du plugin.Ouvrez donc les fonctions.php dans votre thème enfant et effectuez un petit test en ajoutant cette fonction :add_filter(‘woocommerce_print_product_product_html’, ‘custom_print_products_template’, 10, 2) ;function custom_print_products_template($html, $product_id){produit=wc_get_product($product_id) ;si(!$product) {retourner $html ;}$product_id=$product->get_id() ;$html=’test’ ;retourner $html ;}Appelez maintenant votre produit d’impression PDF URL comme ceci : https://yourdomain.com/product/YOUR_PRODUCT_URL/?print-products=pdfVous verrez une simple chaîne de test à l’intérieur du fichier incluant l’en-tête et le pied de page prédéfinis, qui proviennent du plugin. C’est aussi simple que cela, vous pouvez maintenant ajouter du HTML personnalisé au PDF comme vous le souhaitez.Nous allons ajouter d’autres données sur les produits au format HTML :
- Image du produit alignée à gauche
- Titre du produit + description à droite
- Champ méta personnalisé
Ajouter l’image, le nom et la description du produit au PDF
Modifions donc la fonction ci-dessus et ajoutons quelques données supplémentaires. Nous commençons par ajouter l’image, le titre et la description de notre produit. L’image sera placée dans une colonne de gauche et le bloc de titre dans une colonne de droite, nous avons donc besoin d’une feuille de style CSS personnalisée pour assurer le flottement.add_filter(‘woocommerce_print_product_product_html’, ‘custom_print_products_template’, 10, 2) ;function custom_print_products_template($html, $product_id){// Vérifier si le produit existeproduit=wc_get_product($product_id) ;si(!$product) {retourner $html ;}// Obtenir l’identifiant du produit$product_id=$product->get_id() ;// Stylisation CSS personnalisée$html=’.conteneur {padding : 20px ;}.col-12 {largeur : 100 % ;padding : 10px ;}.col-6 {largeur : 45% ;float : left ;padding : 10px ;}’ ;// Commencez par un conteneur$html .= ” ;// Obtenir l’URL de l’image du produit$product_image_url=get_the_post_thumbnail_url($product_id) ;si($product_image_url) {$html .= ‘
‘ ;}// Obtenir le nom et la description du produitNom du produit=$product->get_name() ;$product_desc=$product->get_description() ;si(Nom du produit) {$html .= ‘
‘ . Nom du produit . ‘
‘ . $product_desc . ‘
‘ ;}$html .= ” ;retourner $html ;}Nous avons ajouté des feuilles de style CSS personnalisées pour les blocs flottants et ajouté un peu de rembourrage. Nous utilisons ensuite l’objet $product et appelons des fonctions pour recevoir des données telles que le nom, la description, etc. Vous pouvez trouver une liste complète des fonctions à appeler sur l’objet produit de WooCommerce ici. Nous avons ensuite renvoyé le code HTML et voici ce que cela donne :
Ajout d’un champ de produit personnalisé au PDF
Si vous utilisez des champs d’articles personnalisés, vous pouvez utiliser la fonction get_post_meta de WordPress pour recevoir les valeurs. WooCommerce stocke également les métadonnées dans la table post_meta. Par exemple, le prix, qui peut également être récupéré en utilisant $product->get_price() ; function. Ainsi, pour les champs méta vraiment uniques comme ceux du plugin ACF ou d’autres plugins personnalisés, la fonction ci-dessus est cruciale pour obtenir les données. Un exemple d’utilisation de get_post_meta pour générer un champ personnalisé dans notre pdf WooCommerce :$html .= ” ;// Obtenir un champ personnalisé$custom_field=get_post_meta($product_id, ‘custom_field’, true) ;si($custom_field) {$html .= ‘
‘ . $custom_field . ‘
‘ ;}$html .= ” ;Et c’est tout. Si vous utilisez ACF par exemple, vous pouvez utiliser la fonction ACF get_field au lieu de get_post_meta.Si vous avez d’autres questions sur la façon de créer un modèle PDF personnalisé pour un produit, n’hésitez pas à commenter cet article ci-dessous.
