Une introduction à WooCommerce pour WordPress

WooCommerce est une plate-forme de commerce électronique populaire pour WordPress qui est rapidement développée par WooThemes. Dans cet article, je vais vous expliquer les principes de base de la thématisation pour WooCommerce..

Cet article émet quelques hypothèses sur votre environnement de développement:

Vous avez WordPress et WooCommerce installé.
Vous êtes habitué à créer des thèmes WordPress et à utiliser HTML et CSS.
Vous avez utilisé les outils de développement Chrome ou des outils de développement Web similaires tels que Firebug..

Personnaliser le CSS WooCommerce

WooCommerce est livré avec certains CSS intégrés qui visent à le rendre compatible avec autant de thèmes que possible. Le CSS par défaut est un excellent point de départ, mais il est peu probable qu'il corresponde parfaitement au style de votre thème juste après l'installation..

En tant que tel, il existe deux façons de modifier le code CSS d'un thème WooCommerce:

Vous pouvez utiliser les styles par défaut comme base et les remplacer.
Vous pouvez choisir de désactiver les styles par défaut et de recommencer à zéro.

WooCommerce ajoute une classe de corps de "woocommerce" à toutes ses pages

Remplacement des styles par défaut

Remplacer les styles par défaut est le moyen le plus rapide de commencer et conviendra probablement à la plupart des gens..

Vous pouvez copier l’ensemble du fichier CSS WooCommerce par défaut (situé dans wp-content \ plugins \ woocommerce \ assets \ css \ woocommerce.css ou woocommerce.less), supprimez tout ce dont vous n’avez pas besoin et changez tout ce dont vous avez besoin; cependant, cela peut prendre beaucoup de temps et entraîner de nombreuses répétitions de CSS..

À cette fin, j'utilise normalement l'approche suivante:

Je navigue sur le site à la recherche des styles que je dois changer.
Après cela, j'utilise les outils de développement Chrome (ou un outil similaire) pour identifier les classes et même apporter les modifications dans le navigateur pour m'assurer de bien comprendre à quoi il va ressembler. Cela se fait généralement en cliquant avec le bouton droit de la souris sur la page et en choisissant “inspecter l’élément” dans la liste déroulante..
Ensuite, je copie le CSS à partir des outils de développement Chrome dans le fichier CSS de mon thème..
Je passe en revue les CSS dans les outils de développement de Chrome, car elles risquent de barrer ou de grisonner les styles préfixés par le fournisseur pour les autres navigateurs. Il est important de modifier ces valeurs afin de maintenir la cohérence de votre CSS entre les différents navigateurs que vos visiteurs utilisent peut-être..
Enfin, je supprime les valeurs que je n’ai pas modifiées dans le fichier CSS copié. Par exemple, si j'ai changé la largeur de quelque chose mais que je n'ai pas la hauteur, je n'ai pas besoin d'inclure la hauteur dans mon fichier CSS personnalisé.

Personnellement, je trouve que cette approche fonctionne mieux dans la plupart des cas et réduit réellement le temps de développement..

Dans Google Chrome, vous pouvez cliquer avec le bouton droit de la souris sur un élément de la fenêtre Outils de développement pour basculer entre les différents états (survol, actif, etc.). Cela vous permet de voir tous les états sans chercher dans le fichier CSS original.

Désactiver la feuille de style par défaut et recommencer à zéro

La feuille de style par défaut peut être désactivée en ajoutant un petit extrait de code à vos thèmes. functions.php:

define ('WOOCOMMERCE_USE_CSS', false);

Le moyen le plus rapide d'obtenir toutes les classes WooCommerce est de copier le fichier CSS WooCommerce d'origine dans le vôtre et de supprimer tout ce dont vous n'avez pas besoin..

Déclaration du support WooCommerce dans votre thème

Ceci est particulièrement important si vous vendez des thèmes ou les publiez au public..

Sans déclarer spécifiquement le support WooCommerce dans votre thème, les utilisateurs recevront un message d'erreur lors de l'installation de WooCommerce et celui-ci y restera jusqu'à ce qu'il soit licencié..

Heureusement, tout cela peut être résolu avec un petit extrait de code inséré dans vos thèmes. functions.php fichier:

add_theme_support ('woocommerce');

Plonger un peu plus loin: Édition de modèles

La modification du code CSS dans WooCommerce vous fera faire beaucoup de chemin, mais qu’en est-il si vous voulez vraiment personnaliser la mise en page des pages? Heureusement, il y a un bon moyen de le faire.

Le plugin WooCommerce est livré avec un certain nombre de modèles HTML frontaux ainsi que de modèles de courrier électronique. Au lieu d'éditer ces fichiers directement dans le plugin (ce qui est une très mauvaise idée car une fois mis à jour le plugin et toutes vos modifications seront perdues!), Vous pouvez les copier dans votre thème:

Dans votre répertoire de thèmes, créez un nouveau dossier appelé «woocommerce».
Naviguez jusqu'au répertoire du plugin WooCommerce et ouvrez le dossier "templates". Le dossier des modèles contient de nombreux sous-dossiers avec tous les différents modèles utilisés par WooCommerce. Heureusement, la structure et la dénomination des fichiers de modèle dans WooCommerce sont faciles à suivre.
Dans votre nouveau dossier "woocommerce", copiez le fichier de modèle que vous souhaitez modifier. Rappelez-vous de garder la même structure de répertoire ici. Si le modèle que vous souhaitez modifier se trouve dans un sous-dossier, n'oubliez pas de créer ce sous-dossier dans le répertoire de votre thème..
Editez le fichier depuis votre dossier «woocommerce» et enregistrez les modifications.

Un exemple pratique

Disons que nous souhaitons modifier une partie du code HTML dans l'écran "Mes commandes" de WooCommerce..

La première chose à faire est de localiser le bon modèle. Dans ce cas, la section "Mes commandes" se trouve sous "Mon compte" dans WooCommerce. La structure du répertoire ressemble à ceci:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Créez ensuite un dossier dans votre thème appelé «woocommerce», puis créez un deuxième dossier appelé «myaccount». Ensuite, copiez le mes-commandes.php déposer dans ce répertoire.

Vous devriez être laissé avec ce qui suit:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Toute modification apportée à ce fichier remplacera désormais celle d'origine..

La boucle WooCommerce

Si vous avez déjà créé ou modifié des thèmes WordPress, vous devez être familiarisé avec The Loop. WooCommerce a sa propre boucle que vous pouvez utiliser, ce qui vous permet de personnaliser les pages WooCommerce. Par exemple, vous pouvez le faire lorsque vous souhaitez charger une barre latérale différente pour vos pages WooCommerce..

C'est l'intégration la plus élémentaire et en créant un modèle WooCommerce personnalisé, cela sera appliqué à chaque page WooCommerce, y compris les produits, les catégories et les archives. Si vous ne souhaitez pas que votre modèle WooCommerce soit différent de votre modèle standard, vous n'avez pas besoin de créer un modèle WooCommerce personnalisé..

La création du modèle est un processus simple:

Dupliquez votre thème page.php déposer et renommer woocommerce.php.
Trouvez la boucle WordPress dans votre woocommerce.php fichier. Cela ressemblera à quelque chose comme:

Remplacez votre boucle par la boucle WooCommerce:
Maintenant, effectuez toutes les modifications que vous souhaitez apporter, telles que la permutation dans une barre latérale différente ou la modification de la présentation..

Finissons-en

Vous connaissez maintenant les bases de l'intégration de la plateforme de commerce électronique WooCommerce dans vos thèmes WordPress..

Les compétences décrites dans cet article vous permettront de vous familiariser avec la plupart des situations dans WooCommerce. Si vous avez besoin d'une intégration de thème plus avancée ou plus flexible, l'étape suivante consiste à explorer les divers crochets, filtres et instructions conditionnelles disponibles pour une utilisation avec WooCommerce..

Liens utiles: Plugins WooCommerce de CodeCanyon.

Code