Accentsconagua
Share
Dans ce tutoriel pour débutant, je vais vous montrer la bonne façon d’ajouter la compatibilité WooCommerce à votre thème WordPress. Vous apprendrez également à l'étendre de manière discrète, sans modifier les fichiers principaux du plug-in. Nous allons couvrir ces étapes logiques:
Imaginons que nous développons un thème WordPress. Nous aimerions exploiter certaines des superbes fonctionnalités de WooCommerce, et nous aimerions également personnaliser certaines de ces fonctionnalités. Il y a deux manières d'étendre WooCommerce sans éditer les fichiers du plugin:
woocommerce_content () fonctionner dans notre thèmeJe trouve qu'une combinaison de ces options fonctionne le mieux pour produire des résultats fiables. Commençons par déclarer le support WooCommerce dans le fichier «functions.php» de notre thème et désactivons le style par défaut de WooCommerce; nous allons coiffer WooCommerce avec notre propre thème.
add_action ('after_setup_theme', 'woocommerce_support'); fonction woocommerce_support () add_theme_support ('woocommerce'); Cela masquera le message «Votre thème ne déclare pas le support WooCommerce»..
Pour désactiver le style par défaut de WooCommerce, nous ajoutons ce qui suit:
if (class_exists ('Woocommerce')) add_filter ('woocommerce_enqueue_styles', '__return_empty_array'); Avec le class_exists () fonction, nous vérifions si le plugin WooCommerce est installé et actif. Une fois est actif, nous désactivons son style par défaut. Plus tard dans le tutoriel, nous ajouterons quelques actions et configurations de hooks dans cette si déclaration.
Pour l'instant, dupliquez le fichier «page.php» du thème et nommez-le «woocommerce.php». Ce fichier doit être situé comme suit: wp-content / themes / YOURTHEME / woocommerce.php.
Ouvrez votre fichier nouvellement créé dans un éditeur de texte ou l'éditeur de code de votre choix. Ensuite, vous devez trouver la boucle, qui commence généralement par:
et se termine généralement par:
Cela varie entre les thèmes. Une fois que vous avez trouvé la boucle, supprimez-la. A sa place, mettez:
Notre modèle woocommerce.php utilise désormais la boucle de WooCommerce.
woocommerce_content ()charge la liste des produits sur la page principale de la boutique, les pages de catégories de produits, la page de recherche de produits et le contenu d'un seul produit lors de l'affichage de la page d'un seul produit.
Comme woocommerce.php fait maintenant partie de votre thème, vous pouvez le personnaliser avec vos autres fichiers. Par exemple, j'ajoute toujours la section de titre de page et le fil d'Ariane, car mes pages habituelles contiennent généralement ces éléments. Aucune de ces choses n'affecte la woocommerce_content (). À ce stade, vous pouvez également ajouter d'autres éléments à l'aide de balises conditionnelles de WooCommerce et WordPress..
Par exemple, ajoutons la fonction de pagination de produit unique, comme ceci:
// votre fonction de navigation va ici.
La liste complète des actions, des points d'ancrage et des filtres WooCommerce est disponible dans la documentation WooCommerce..
Si vous êtes novice dans les actions, les points d'ancrage et les filtres de WordPress, je vous recommande vivement de consulter ces ressources:
Pour une meilleure compréhension des emplacements des crochets, je vous recommande de lire la série de crochets Visual Bloom de Business Bloomer..
Pour une compréhension un peu plus complexe, mais encore plus profonde, du fonctionnement de la logique WooCommerce, je vous recommande d'examiner les fichiers centraux du plug-in (woocommerce> modèles)..
Par exemple, voyons ce que nous pouvons faire dans la page boutique. Pour modifier la mise en page de la page de magasin avec des crochets, vous avez deux options:
Quelle méthode est la meilleure dépend de votre tâche. Par exemple, imaginons que vous souhaitiez supprimer l'option de commande de produit de votre page de magasin:
remove_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);C’est tout ce que vous devez ajouter à votre fichier functions.php à l’intérieur du si la classe existe déclaration. WooCommerce comprend maintenant que vous n'avez pas besoin de cette fonctionnalité.
Et imaginons que nous voulions ajouter un widget de recherche à la place de la commande de produits. Après l'action de suppression, ajoutez ce code:
add_action ('woocommerce_before_shop_loop', 'custom_woocommerce_product_search', 30); fonction custom_woocommerce_product_search () the_widget ('WC_Widget_Product_Search', ",");En outre, imaginez que vous souhaitiez supprimer le classement des produits sur la page de la boutique. Collez le code suivant dans votre fichier functions.php:
remove_action ('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);Vous aurez remarqué que chaque action a un numéro en dernier paramètre. C'est la priorité utilisée pour spécifier l'ordre dans lequel les fonctions associées à une action particulière sont exécutées. Les nombres les plus faibles entraînent une exécution antérieure et les fonctions ayant la même priorité sont exécutées dans l'ordre dans lequel elles ont été ajoutées à l'action..
Ceci est très important dans les situations où plusieurs fonctions sont appliquées au même crochet d’action. Par exemple, je pourrais vouloir emballer les détails du produit (titre, note, prix, bouton Ajouter au panier) avec un div.
Tout d'abord, nous ajoutons la balise d'ouverture d'ouverture div:
add_action ('woocommerce_shop_loop_item_title', 'custom_woocommerce_loop_product_content_wrapper_start', 2); fonction custom_woocommerce_loop_product_content_wrapper_start '() ?>Ensuite, nous ajoutons une balise de fermeture:
add_action ('woocommerce_after_shop_loop_item', 'custom_woocommerce_loop_product_content_wrapper_end', 50); fonction custom_woocommerce_loop_product_content_wrapper_end '() ?>Jouer avec la priorité crochet d’action peut rendre notre travail beaucoup plus facile.
Le même principe est appliqué à une seule page de produit. Et ici, vous devez être très prudent, car les modifications que vous apportez avec les crochets d'action pour les produits de la page loop / archive / shop sont ignorées pour la page de produit unique. Ici, vous devez modifier la présentation du produit unique séparément, mais le principe est le même..
Savoir comment utiliser les actions WooCommerce étend votre thème au prochain niveau. Voici quelques exemples de ce que je fais dans mes thèmes en matière de compatibilité WooCommerce:
Si vous souhaitez ajouter à votre thème des extensions WooCommerce, le principe est presque identique. Toujours soutenir les extensions officielles de haute qualité, car ils auront des directives d'intégration et une équipe de support. Par exemple, j'étend la boutique de mes thèmes avec ces deux plugins:
Comme il s’agit d’extensions WooCommerce, vous devez d’abord vous assurer que WooCommerce est installé et actif. Par conséquent, tous les raccords, actions ou filtres de l’extension que vous utiliserez doivent être placés dans le dossier. if (class_exists ()) déclaration que nous avons écrit au début. Et bien sûr, vous devez vous assurer que vos extensions sont également installées et actives en vérifiant la classe, la fonction ou le nom de la constante du plug-in. À titre d'exemple de mon code de thème:
if (class_exists ('Woocommerce')) if (class_exists ('YITH_WCQV')) remove_action ('yith_wcqv_product_image', 'woocommerce_show_product_images', 20); add_action ('yith_wcqv_product_image', 'infinitum_ninzio_woocommerce_show_product_images', 20); fonction infinitum_ninzio_woocommerce_show_product_images () ?>… Pour savoir quelle classe, fonction ou constante vérifier, examinez le fichier principal file.php de l'extension..
Conclusion
WooCommerce est un plugin de commerce électronique génial et, pour être tout à fait franc, tout nouveau thème premium devrait le prendre en charge. Suivez toujours les guides d'intégration de WooCommerce. Cela garantira que votre thème passe le processus de révision et ne cassera pas la structure et la logique de WooCommerce..
Après tout travail de développement de ce type, vous devez toujours tester WordPress et WooCommerce. Activer WordPress WP_DEBUG, et testez votre thème en utilisant Theme Unitest de WordPress et le test de contenu factice de WooCommerce.
Ressources utiles
