WooCommerce 在 CSS-Tricks 上

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

每当我完成一件事时,我总是很兴奋,但当我完成一件事并且认为“嗯,这很容易”时,我会变得格外兴奋。尽管我喜欢摆弄技术,但我更喜欢享受设置良好的技术的益处。这就是为什么我仍然对 WordPress 感到如此兴奋 - 我感觉自己能够在无需大量时间和精力的情况下完成大事,这让我感到非常强大。

上个月,当我再次在 CSS-Tricks 上设置 WooCommerce 时,我也有这种感觉。

让我向您展示我是如何设置的,因为我相信你们中有很多人都可以做同样的事情,并且比我正在做的更充分地利用这种设置!

WooCommerce 支持的会员资格

假设您想要一个会员网站。也许您有一个健身网站,您制作培训视频,并为显示这些视频和训练计划的页面构建付费会员墙。或者,也许您有一个烹饪网站,付费会员可以访问其他功能,例如保存的购物清单。

拥有一个针对付费会员的系统是在线赚钱的基础概念,通常这并非易事。幸运的是,WooCommerce 可以轻松完成此任务。除了(免费)WooCommerce 插件之外,您还需要(199 美元)WooCommerce 会员资格 插件。

如果您正在关注一些 WooCommerce 付费插件,您可能需要在日历上圈出 **7 月 28 日**。那是 **WooCommerce 日**,届时将会有许多大促销活动。

安装完该插件后,您将在 WordPress 管理员中的 WooCommerce 区域看到一个 **会员资格** 选项卡。其中有一个 **会员计划** 区域,您可以在其中设置您的计划。我们有一个非常简单的单计划设置:**CSS-Tricks 会员**。

如果您愿意,可以拥有各种不同的计划(例如,青铜、白银、黄金)。

这些计划目前还不能自行执行任何操作 - 它们只是用户角色,访问控制功能将在稍后提供。您可以创建这些计划,使得只有管理员可以向其中添加人员,任何人都可以免费注册,或者需要购买产品才能加入。最后一个是电子商务设置中很有用的一个!

作为旁注,您可能希望限制会员资格的时限。您可以将其设置为无限期,但从设定时限的会员资格开始可能更明智,这样您就不会承诺终身服务。

由于我正在销售会员资格,因此我已经将会员计划与产品销售联系起来:MVP 支持者。

购买此产品,激活订阅,激活会员资格

获得该会员资格计划的途径是购买此产品。您也可以始终以管理员身份手动将人员添加到计划中。

此产品可以是一次性收费,这支持无限期会员资格的想法,但与世界上大多数会员资格一样,我想将其设置为循环计费产品。这意味着我们需要进行一些额外的设置。

会员资格订阅

我发现这一点有点令人困惑。您可能会假设一个会员资格插件将支持会员循环计费的想法,但它不会开箱即用。我们需要另一个插件:WooCommerce 订阅

订阅插件另一个 199 美元,使这种设置略低于 400 美元。不过,这是预付成本 - 只有在需要支持和更新的情况下,您才需要在明年续订许可证(我建议这样做)。我发现该成本对于如此高效的系统来说是合理的,但您需要自己进行商业计算。

安装完该插件后,您创建的任何产品都有可能成为订阅产品。

在 CSS-Tricks,我们收取每年 20 美元的会员资格费用。当有人注册时,他们将在下一年被重新收取 20 美元。**这与会员资格计划的时长一致,这是一个重要的步骤。**没有任何东西强迫您这样做,但将费用与实际续订日期不同的日期进行收取将很奇怪。

仅限会员访问的文章

我们已经完成了两个最重要的设置部分

  1. 创建会员计划
  2. 创建人们可以购买的产品,并将其订阅到该计划

现在到了真正让会员受益的部分!我计划出售访问此网站上托管的“书籍”的权限。该 书籍 实际上只是文章的集合。它们是我们设置的称为“章节”的自定义帖子类型。在章节的编辑器中,内容下方将有一个会员资格区域,您可以使用它将章节锁定到会员计划。

它位于帖子编辑器中,帖子内容下方。

同样,此示例使用自定义帖子类型,但它可以是任何页面或帖子类型!将某些内容置于会员墙之后只需要轻触一下开关。

具有内容限制的帖子有两个“面孔”

  1. **会员看到的内容:**内容
  2. **非会员看到的内容:**摘录和关于如何解锁内容的消息

我认为这是一个很好的系统。它向人们展示了如果他们成为会员,他们可以阅读哪些内容,并向他们展示了如何成为会员。

现在这里有一些自定义 CSS,但不多!我只是使用默认功能,查看页面上的输出内容,并且始终有一个合理的名称类可以用来进行样式设置 - 就像它应该工作的那样。

为会员以编程方式执行操作

在我们的案例中,成为会员的主要好处可能是获得访问 书籍 的权限,但这并非止步于此。我认为尽可能多地为付费会员提供服务通常是一个好主意。由于广告是该网站的主要商业模式,因此如果您拥有付费支持者会员资格,删除这些广告似乎很公平。

这些插件有各种 API 可以连接到您需要的任何内容,但我喜欢尽可能地保持简单。例如,在任何模板中,我都可以检查您是否是会员。

<?php if ( !wc_memberships_is_user_active_member() ) { ?>
  <div>
     <!-- Show an ad if you're not a member. -->
  </div>
<?php } ?>

我也在运行网站的任何其他 JavaScript 之前这样做,这样我就可以在 JavaScript 中知道用户是否是会员。

<?php if ( wc_memberships_is_user_active_member() ) { ?>
    <script>
      window.activeMember = true;
    </script>
<?php } ?>

该网站上的一些广告是使用 JavaScript 驱动的,因此我可以将对它们的调用包装在 !window.activeMember 逻辑中,从而完全不请求它们。

按需印刷和履行

会员资格和订阅只是我使用 WooCommerce 的两件事。另一件事是销售实体产品,这是我多年来一直在尝试的事情。实际上,我们过去曾手工完成每一笔订单,将产品送到邮局!我们过去也与履行公司合作过,但我们仍然需要提前印刷大量库存。

从那以后,情况发生了很大的变化,有很多公司提供按需印刷!其中一家公司(我与他们没有任何关联)是 Printify。他们出售各种各样的东西,包括您对印刷公司的期望:T 恤、连帽衫、马克杯……对我来说,最棒的是它可以 直接连接 到 WooCommerce。

到目前为止,我们已经 在商店里备货了海报!在 Printify 方面,我选择产品,上传艺术品,选择一些选项,就完成了!

该过程的最后一步是 **“将产品发布到您的 WooCommerce 商店”**,到目前为止,它对我的效果很好。我相信它可以正常工作,因为它必须在 Printify 和 WooCommerce 之间建立连接,以便 Printify 在订单到来时收到订单并完成订单。

从那里,这些产品会出现在我的网站上,如果需要,我可以从 WordPress 中编辑或自定义它们(比如文案等)

我 WooCommerce 管理员中的产品

我可以随时查看订单,并观察订单是如何被下单、生产、准备和发货的

Printify 上的订单仪表板

当然,我自己也订购了一些海报,这样我就可以在将其展示给其他人之前试用一下。海报装在一个漂亮的三角形管子里,用厚实明亮的白色纸张包装,状况完好。我把它挂在我的办公室电脑旁边。


移动应用程序

如果您像我一样,对查看您的小商店的运营情况并获得销售通知感到兴奋,那么有一个移动应用程序

我还没有更新订单状态或管理评论等需求,但这些功能也都包含在内。


这里有很多技术在运作!

但我实际投入的时间很少。我花在撰写这篇博文上的时间比设置所有这些电子商务内容的时间还要长。我只是一个整合者。我没有发明任何东西——只是利用一些最好的软件来实现我的想法。