Minimalist + WooCommerce

WooCommerce

Pour ceux qui ne connaîtraient pas WooCommerce, il s’agit d’un plugin WordPress permettant de transformer son site en e-commerce. D’après le site BuiltWith, en mai 2020, il existe près de 4 millions de sites l’utilisant. Il est possible de l’installer avec n’importe quel thème, mais l’intégration n’est pas forcément optimale. De plus, WooCommerce utilise ses propres couleurs, ce qui peut être gênant visuellement.

Étant donné sa popularité, j’ai souhaité ajouter le support de WooCommerce au thème Minimalist. Pour cela, il a fallu faire quelques changements. Le thème en lui-même n’a subi qu’une modification : le style des articles épinglés (« sticky posts »). Les autres changements ne sont que des ajouts.

Les modifications de Minimalist

La feuille de style

J’ai hésité à intégrer le support de WooCommerce en créant un thème enfant. Malheureusement, WordPress ne prévoit pas les thèmes enfants de thème enfant, ce qui est donc gênant pour ceux qui souhaitent utiliser Minimalist comme thème parent tout en profitant de WooCommerce. Je l’ai donc directement intégrer au thème de départ tout en gardant l’esprit du thème de départ : rester minimaliste.

J’ai désactivé les feuilles de style de WooCommerce et j’ai rajouté des règles dans la feuille de style de Minimalist pour une meilleure intégration. Le fichier CSS est alourdi de quelques octets, mais vous ne devriez pas voir un grand changement au niveau des performances.

Les hooks

J’ai utilisé quelques hooks pour que WooCommerce utilise la même structure que Minimalist. J’en ai profité pour séparer les catégories de la liste de produits : je ne comprends pas pourquoi WooCommerce ne le propose pas dès le départ. Les hooks sont rassemblés dans un fichier PHP dédié à WooCommerce dans le dossier /inc.

Les templates

Je n’ai modifié aucun fichier de template. Le but n’était pas de restructurer WooCommerce mais uniquement de mieux l’intégrer dans Minimalist.

Les articles épinglés

Pour intégrer au mieux WooCommerce, j’ai du modifier le style visuel des articles épinglés. Le fond prenait toute la largeur de l’écran. Désormais, il n’y a plus de fond, mais une bordure autour de l’article et la largeur est identique au reste du contenu.

Minimalist + WooCommerce en images

Pour vous faire une idée de l’aspect visuel, voici quelques captures d’écran. Les images sont cliquables, n’hésitez pas à les visionner en taille réelle.

• 

• 

• 

• 

• 

• 

• 

Télécharger Minimalist

Le thème n’a pas bougé, il est toujours disponible sur Github et Gitlab. Vous pouvez toujours utiliser Composer pour l’installer. Si vous souhaitez le thème sans les fichiers de développement, il faudra vous rendre dans l’onglet « release ».