Catégories
Astuces et Design

WooCommerce sur CSS-Tricks | Astuces CSS

Je suis toujours tout excité quand j'accomplis quelque chose, mais je reçois supplémentaire excité quand je le fais et pense, "Eh bien, c'était facile." Autant j'aime jouer avec la technologie, j'aime encore plus profiter des avantages d'une technologie bien configurée. C’est pourquoi je suis toujours aussi enthousiasmé par WordPress – je me sens tellement puissant de pouvoir accomplir de grandes choses sans pour autant énormément de temps et d'efforts.

J'ai ressenti exactement le même sentiment le mois dernier lorsque je faisais installer WooCommerce ici sur CSS-Tricks (encore).

Laissez-moi vous montrer comment je l'ai installé, parce que je parie que vous êtes nombreux à pouvoir faire la même chose et utiliser encore plus cette configuration que ce que je fais!

Adhésion optimisée WooCommerce

Supposons que vous souhaitiez avoir un site d'adhésion. Peut-être que vous avez un site Web de remise en forme et que vous créez des vidéos d'entraînement et que vous créez un paywall d'adhésion pour les pages qui affichent ces vidéos et les régiments d'entraînement. Ou peut-être que vous avez un site Web de cuisine et que les membres payants ont accès à des fonctionnalités supplémentaires, comme des listes de courses enregistrées.

Avoir un système pour les membres payés est un concept fondamental pour gagner de l'argent en ligne, et ce n'est généralement pas une mince tâche. Heureusement, WooCommerce en fait un travail rapide. En plus du plugin WooCommerce (gratuit), vous aurez besoin du plugin WooCommerce Memberships (199 $).

Si vous regardez certains plugins payants pour WooCommerce, vous pourriez encercler 21 juillet sur votre calendrier. C'est Journée WooCommerce et il va y avoir de grosses ventes.

Une fois que vous l'avez installé, vous verrez un Adhésion onglet dans votre zone WooCommerce dans l'administrateur WordPress. Il y a un Plans d'adhésion zone où vous pouvez configurer vos plans. Nous avons une configuration à un seul plan très simple: Membre CSS-Tricks.

Vous pouvez avoir toute une variété de plans si vous le souhaitez (par exemple bronze, argent, or).

Ces plans ne font rien par eux-mêmes pour l'instant – ce ne sont que des rôles d'utilisateur, et le contrôle d'accès vient plus tard. Vous pouvez faire ces plans de telle sorte que seuls les administrateurs peuvent y ajouter des personnes, que tout le monde puisse s'enregistrer gratuitement ou qu'ils nécessitent l'achat d'un produit pour y adhérer. Ce dernier est utile pour une configuration de commerce électronique!

En guise de remarque, vous souhaiterez probablement limiter la durée de l'adhésion. Tu pourrait rendez-le illimité, mais il est probablement plus intelligent de commencer avec des adhésions qui expirent après une période définie, de sorte que vous ne promettez rien pour la vie.

Depuis que je vends des adhésions, j'ai lié le plan d'adhésion à la vente d'un produit: MVP Supporter.

Achetez ce produit, activez l'abonnement, activez l'adhésion

La façon d'accéder à ce plan d'adhésion est d'acheter ce produit. Vous pourrez également toujours ajouter manuellement des personnes aux plans en tant qu'administrateur.

Ce produit aurait pu être un paiement unique, qui soutient l'idée d'un abonnement de durée illimitée, mais comme la plupart des abonnements dans le monde, je voulais le configurer comme un produit de facturation récurrent. Cela signifie que nous avons besoin d'une petite configuration supplémentaire.

Abonnements aux adhésions

J'ai trouvé cela un peu déroutant. Vous pouvez supposer qu'un plugin d'adhésion prendrait en charge l'idée d'une facturation récurrente pour cette adhésion, mais il ne le fait pas tout de suite. Nous avons besoin d'un deuxième plugin pour cela: les abonnements WooCommerce.

Le plugin d'abonnement coûte 199 $, ce qui rend cette configuration juste timide de 400 $. C'est tout pour les coûts initiaux – vous n'avez besoin de renouveler les licences que l'année prochaine si vous avez besoin d'assistance et de mises à jour (je le ferais). Je trouve que ce coût est plus que juste pour un système qui fonctionne efficacement, mais vous devrez faire les calculs commerciaux par vous-même.

Une fois ce plugin installé, tout produit que vous créez a la possibilité d'être un produit d'abonnement.

Chez CSS-Tricks, nous facturons 20 $ / an pour l'adhésion. Lorsque quelqu'un s'inscrit, il sera rechargé l'année prochaine à 20 $. Cela correspond à la durée du plan d'adhésion, ce qui est une étape importante. Rien ne vous oblige à le faire, mais il serait étrange de facturer une date différente du renouvellement réel.

Accès réservé aux membres

Nous avons fait les deux parties les plus importantes de la configuration:

  1. Créé un plan d'adhésion
  2. Création d'un produit que les gens peuvent acheter et qui souscrit à ce plan

Maintenant, pour la partie qui donne réellement des avantages aux membres! Je prévois de vendre l'accès à un "livre" hébergé sur ce site. Le livre n'est en fait qu'une collection de publications. Ce sont des types de publication personnalisés que nous avons configurés, appelés «chapitres». Dans l'éditeur du chapitre, sous le contenu, il y aura une zone d'adhésion que vous pouvez utiliser pour verrouiller le chapitre sur un plan d'adhésion:

C'est dans l'éditeur de publication, sous le contenu de la publication.

Encore une fois, cet exemple utilise un type de publication personnalisé, mais il peut s'agir de n'importe quelle page ou type de publication! C’est littéralement le basculement d’un interrupteur pour mettre quelque chose derrière le mur des membres.

Il existe deux «faces» d'un article avec une restriction de contenu:

  1. Ce que les membres voient: le contenu
  2. Ce que les non-membres voient: un extrait et un message sur la façon de déverrouiller le contenu

Je pense que c'est un bon système. Il montre aux gens exactement ce qu'ils pourrait lire s'ils étaient membres et leur montrer exactement comment ils peuvent devenir membres.

Maintenant, il y a du CSS personnalisé ici, mais pas beaucoup! J'utilise simplement les fonctionnalités par défaut, je vois ce qui est affiché sur la page, et il y a toujours un nom de classe judicieux auquel se connecter pour faire du style – juste comment cela devrait fonctionner.

Faire des choses par programme pour les membres

Dans notre cas, le principal avantage d'être membre est probablement d'accéder au livre, mais cela ne doit pas s'arrêter là. Je pense que donner autant que possible à un membre cotisant est généralement une bonne idée. Et puisque la publicité est le principal modèle commercial sur ce site, il semble juste de supprimer ces publicités si vous avez un abonnement payant.

Il existe toutes sortes d'API pour que ces plugins se connectent à tout ce dont vous avez besoin, mais j'aime garder les choses aussi simples que possible. Par exemple, dans n'importe quel modèle, je peux vérifier si vous êtes membre ou non.


  

Je le fais également avant d'exécuter tout autre code JavaScript du site, afin que je puisse savoir dans le code JavaScript si un utilisateur est membre ou non.


    

Certaines des annonces sur ce site sont alimentées par JavaScript, je peux donc conclure l'appel pour elles dans un !window.activeMember logique de ne pas les demander du tout.

Impression et traitement à la demande

Les adhésions et les abonnements ne sont que deux des choses que je fais avec WooCommerce. L'autre vend des produits physiques, ce que j'ai essayé au fil des ans. En fait, nous avions l'habitude de répondre à chaque commande en transportant les produits à la poste! Nous avons également établi des partenariats avec des sociétés de traitement des commandes dans le passé, mais nous devions encore imprimer physiquement un ensemble de stocks à l'avance.

Les choses ont bien avancé depuis et il y a beaucoup d'entreprises qui impriment à la demande! L'une de ces sociétés (et je n'ai aucune affiliation avec elles) est Printify. Ils vendent toutes sortes de choses, y compris ce que vous attendez d'une imprimerie: des t-shirts, des sweat-shirts à capuche, des tasses… et la meilleure partie pour moi est qu'il se connecte directement à WooCommerce.

Jusqu'à présent, nous avons stocké le magasin d'affiches! Du côté de Printify, je choisis le produit, télécharge l'illustration, choisis quelques options, et c'est tout!

La dernière étape du processus consiste à "Publier un produit sur votre boutique WooCommerce" qui a fonctionné parfaitement pour moi jusqu'à présent. J'espère que cela fonctionne, car il doit établir la connexion entre Printify et WooCommerce de telle sorte que Printify reçoive la commande et l'exécute lorsqu'elle entre.

À partir de là, les produits apparaissent sur mon site et je peux les modifier ou les personnaliser à partir de WordPress si j'en ai besoin (comme la copie et autres):

Produits dans mon administrateur WooCommerce

Je peux vérifier les commandes à tout moment et les regarder comme elles sont commandées, produites, préparées et expédiées:

Tableau de bord de commande sur Printify

J'ai commandé des affiches moi-même, bien sûr, afin de pouvoir l'essayer avant de le mettre devant d'autres personnes. L'affiche est venue dans un joli tube triangulaire en parfait état sur du papier blanc brillant épais. Je l'ai accroché juste à côté de mon ordinateur de bureau:


Application mobile

Si vous êtes comme moi et que vous êtes impatient de voir comment va votre petite boutique et de recevoir des notifications de vente, il existe une application mobile.

Je n'ai pas eu besoin de mettre à jour le statut des commandes ou de gérer les avis, etc., mais c'est tout là aussi.


Il y a beaucoup de technologie à l'œuvre ici!

Mais mon engagement de temps réel a été minime. J'ai passé plus de temps à rédiger ce billet de blog qu'à en configurer tout de ce truc de commerce électronique. Je suis juste un intégrateur ici. Je n’invente rien, je profite simplement de certains des meilleurs logiciels de leur catégorie pour concrétiser mes idées.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *