WooCommerce on CSS-Tricks

Full of accomplishment! Especially when I finish something and feel "it's so relaxed!", I'm even more excited. Although I like to tinker with techniques, I enjoy the convenience of efficient tools more. That's why I'm still passionate about WordPress - it allows me to do big things efficiently without spending a lot of time and effort.

Last month, I felt this feeling again when I built WooCommerce on CSS-Tricks again.

Let me show you my setup method, which I believe many people can do, and even make better use of it than I do!

WooCommerce membership system

Suppose you want to create a membership website. Maybe you have a fitness website that makes fitness videos and set up a paid membership wall for the pages that showcase these videos and training plans. Or you have a cooking website where paid members can access other features such as saved shopping lists.

Establishing a paid membership system is the basis for making money online, and it is usually not easy. Fortunately, WooCommerce makes it a breeze. In addition to the (free) WooCommerce plugin, you also need the ($199) WooCommerce Memberships plugin.

If you are following some WooCommerce paid plugins, mark July 28 on your calendar. That's WooCommerce Day , and there will be big promotions at that time.

Once the installation is complete, you will see a membership tab in the WooCommerce area of ​​the WordPress management backend. There is a membership plan area where you can set up your plan. We have a very simple single-plan setup: CSS-Tricks membership .

If you like, you can create various plans (e.g. bronze, silver, gold).

These plans themselves can’t do anything at this moment—they are just user roles, and the access control feature will appear later. You can set these plans to only administrators can add people, anyone can sign up for free, or need to purchase a product to join. The last one is very useful for e-commerce setup!

By the way, you may need to limit the expiration date of your membership. You can set it to indefinitely, but it is best to start with a membership that sets a valid period so you don't commit to lifelong service.

Because of my sales membership, I connect membership programs to the sales of the product: MVP supporters.

The way to get this membership program is to purchase this product. You can also always manually add people to the plan as an administrator.

This product can be a one-time fee, which supports the idea of ​​indefinite membership, but like most memberships in the world, I want to set it up as a regular billing product. This means we need some extra settings.

Membership Subscription

I found this a little confusing. You might think that the membership plugin will support the idea of ​​regular billing for members, but it doesn't offer this out of the box. We need a second plugin to achieve this: WooCommerce Subscriptions.

The subscription plugin is also $199, so the total cost of this setup is just under $400. However, this is an upfront cost – you will only need to renew your license next year if you need support and updates (I will). I think this is very reasonable for such an efficient system, but you need to do your own business calculations.

After installing this plugin, any product you create may become a subscription product.

Here at CSS-Tricks, we charge a membership fee of $20 per year. When someone signs up, they will pay $20 again in the next year. This is consistent with the length of the membership program, which is an important step. Nothing forces you to do this, but it's weird if the charge date is different from the actual renewal date.

Articles only for member access

We have completed the two most important parts of the setup:

1. Create a membership plan
2. Create products that people can buy and subscribe to the program

Now is the part that really benefits members! I plan to sell access to “books” hosted on this site. This book is really just a collection of articles. They are the custom article types we set, called "Chapters". In the chapter editor, there will be a membership area below the content that you can use to lock chapters to the membership plan:

Again, this example uses a custom post type, but it can be any page or post type! Just press the switch and place the content behind the member wall.

Articles with content limitations have two "faces":

1. What members see : Content
2. Content seen by non-members : How to extract and unlock content

I think this is a good system. It shows people exactly what they can read if they are members and shows them exactly how to become a member.

Now there are some custom CSS here, but not many! I just use the default function to see what is output to the page, and there is always a reasonable class name to use for style-this is exactly how it should work.

Perform actions programmatically for members

In our case, the main benefit of being a member might be gaining access to books, but that doesn’t stop there. I think it is usually a good idea to provide as much service as possible for paid members. Since advertising is the main business model for this website, it seems fair to delete these ads if you have paid supporter membership.

These plugins have various APIs to connect to whatever you need, but I like to keep it as simple as possible. For example, in any template, I can check if you are a member.

 <code><?php if ( !wc_memberships_is_user_active_member() ) { ??><div>

  </div></code>
<?php } ??>

I also do this before running any other JavaScript on the website so that I can know in JavaScript if the user is a member.

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

Some of the ads on this site are JavaScript-driven, so I can wrap their calls in the !window.activeMember logic so that they are not requested at all.

Print and fulfillment on demand

Membership and subscription are just two things I do with WooCommerce. Another thing is selling physical products, something I've been trying for years. In fact, we used to manually complete every order by delivering products to the post office! We have also worked with fulfillment companies in the past, but we still have to print large inventory ahead of time.

Things have changed a lot since then, and there are a lot of companies offering print on demand! One of the companies (I have no connection with them) is Printify. They sell all kinds of things, including what you expect from a printing company: T-shirts, hoodies, mugs… The best part for me is that it can be connected directly to WooCommerce.

So far, we have prepared posters for the store! In Printify, I choose products, upload artwork, and choose some options, that's it!

The final step in this process is "Publish the product to your WooCommerce store" , which has worked very well for me so far. I believe it works because it has to establish a connection between Printify and WooCommerce so Printify receives the order and fulfills the order when the order arrives.

From there, the products appear on my website and I can edit or customize them from WordPress if needed (like a copy, etc):

I can check the order at any time and observe how the order is ordered, produced, prepared and shipped:

I certainly ordered some posters myself so I could try it before putting it in front of others. The poster is housed in a beautiful triangular tube and placed intact on thick bright white paper. I hang it next to my office computer:

Mobile Apps

If you are like me, excited to see how your store operates and get sales notifications, you can use the mobile app.

I don't need to update order status or manage comments etc, but these are all inside.

There are a lot of techniques at work here!

But I actually invested very little time. I've been writing this post longer than setting up all this e-commerce content. I'm just an integrator. I didn't invent anything - just leverage some top-notch software to implement my ideas.

The above is the detailed content of WooCommerce on CSS-Tricks. For more information, please follow other related articles on the PHP Chinese website!