WooCommerce en trucos CSS

Siempre me emociono mucho cuando logro algo, pero me emociono aún más cuando lo hago y pienso: “bueno, eso fue fácil”. Por mucho que disfruto jugando con la tecnología, disfruto aún más cosechando los beneficios de una tecnología bien configurada. Es por eso que todavía me entusiasma tanto WordPress: me siento tan poderoso al poder lograr grandes cosas sin una gran cantidad de tiempo y esfuerzo.

Tuve exactamente esa sensación el mes pasado cuando configuré WooCommerce aquí en CSS-Tricks (nuevamente).

¡Déjenme mostrarles cómo lo configuré, porque apuesto que hay muchos de ustedes que podrían hacer lo mismo y aprovechar aún más esta configuración que lo que estoy haciendo yo!

Membresía impulsada por WooCommerce

Digamos que desea tener un sitio de membresía. Quizás tenga un sitio web de fitness y haga videos de entrenamiento y cree un muro de pago de membresía para páginas que muestren esos videos y regimientos de entrenamiento. O tal vez tenga un sitio web de cocina y los miembros pagos tengan acceso a funciones adicionales, como listas de compras guardadas.

Tener un sistema para miembros pagos es un concepto fundamental para ganar dinero en línea y, por lo general, no es una tarea fácil. Afortunadamente, WooCommerce lo soluciona rápidamente. Aparte del complemento (gratuito) WooCommerce, necesitarás el complemento WooCommerce Memberships ($199) .

Si está buscando algunos complementos pagos para WooCommerce, puede marcar el 28 de julio en su calendario. Ese es el Día de WooCommerce y habrá grandes ventas.

Una vez que lo haya instalado, verá una pestaña Membresías dentro de su área de WooCommerce en el administrador de WordPress. Hay un área de Planes de membresía donde puede configurar sus planes. Tenemos una configuración de un solo plan muy simple: Miembro de CSS-Tricks .

Podrías tener toda una variedad de planes si lo deseas (por ejemplo, bronce, plata, oro).

Estos planes no hacen nada por sí solos todavía; son solo roles de usuario y el control de acceso viene más adelante. Puede hacer que estos planes solo los administradores puedan agregarles personas, que cualquiera pueda registrarse de forma gratuita o que requieran la compra de un producto para unirse. ¡Ese último es el útil para la configuración de un comercio electrónico!

Como nota al margen, probablemente querrás limitar la duración de la membresía. Podrías hacerlo ilimitado, pero probablemente sea más inteligente comenzar con membresías que caduquen después de un tiempo determinado para que no prometas cosas de por vida.

Como vendo membresías, vinculé el Plan de membresía a la venta de un producto: MVP Supporter.

La forma de obtener acceso a ese plan de membresía es comprando este producto. También siempre podrás agregar personas manualmente a los planes como administrador.

Este producto podría haber sido un cargo único, lo que respalda la idea de una membresía de duración ilimitada, pero como la mayoría de las membresías en el mundo, quería configurarlo como un producto de facturación recurrente. Eso significa que necesitamos una pequeña configuración adicional.

Suscripciones a Membresías

Esto me pareció un poco confuso. Se podría suponer que un complemento de membresía respaldaría la idea de facturación recurrente para esa membresía, pero no lo hace de manera inmediata. Necesitamos un segundo complemento para eso: WooCommerce Subscriptions .

El complemento de suscripción cuesta otros $199, lo que hace que esta configuración apenas cueste $400. Eso es todo por los costos iniciales: solo necesita renovar las licencias el próximo año si necesita soporte y actualizaciones (yo lo haría). Considero que ese costo es más que justo para un sistema que funciona de manera tan eficiente, pero tendrás que hacer los cálculos comerciales por ti mismo.

Una vez que tengas ese complemento instalado, cualquier producto que crees tiene la posibilidad de ser un producto de suscripción.

Aquí en CSS-Tricks, cobramos $20 al año por la membresía. Cuando alguien se registre, se le recargará el próximo año a $20. Eso coincide con la duración del plan de membresía, lo cual es un paso importante. Nada te obliga a hacer eso, pero sería extraño colocar un cargo en una fecha diferente a la de la renovación real.

Acceso solo para miembros a publicaciones

Hemos realizado las dos partes más importantes de la configuración:

1. Creó un plan de membresía
2. Creó un producto que la gente puede comprar y que los suscribe a ese plan.

¡Ahora veamos la parte que realmente les da algún beneficio a los miembros! Estoy pensando en vender el acceso a un “libro” alojado en este sitio. En realidad, el libro es solo una colección de publicaciones. Son tipos de publicaciones personalizadas que hemos configurado llamados “Capítulos”. En el editor del capítulo, debajo del contenido, habrá un área de Membresías que puede usar para bloquear el capítulo en un Plan de membresía:

Nuevamente, este ejemplo utiliza un tipo de publicación personalizada, ¡pero podría ser cualquier página o tipo de publicación! Es literalmente presionar un interruptor para poner algo detrás del muro de membresía.

Hay dos “caras” de una publicación con restricción de contenido:

1. Lo que ven los miembros : el contenido
2. Lo que ven los no miembros : un extracto y un mensaje sobre cómo desbloquear el contenido

Creo que es un buen sistema. Muestra a las personas exactamente lo que podrían estar leyendo si fueran miembros y les muestra exactamente cómo pueden convertirse en miembros.

Now there is some custom CSS happening here, but not much! I just use the default features, see what gets output onto the page, and there is always a sensible class name to hook onto to do styling — just how it should work.

Doing Things Programmatically for Members

In our case, the primary benefit to being a member is probably gaining access to the book, but it doesn’t have to stop there. I think giving as much as possible to a paying member is generally a good idea. And since advertising is the primary business model on this site, it seems fair to remove those ads if you have a paid supporter membership.

There are all kinds of APIs for these plugins to hook into whatever you need, but I like to keep things as simple as I can. For example, in any template, I can check to see if you’re a member or not.

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

I also do this before I run any other of the site’s JavaScript, so I can know in the JavaScript if a user is a member or not.

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

Some of the ads on this site are JavaScript-powered, so I can wrap the call for them in a !window.activeMember logic to not request them at all.

On-Demand Printing Fulfillment

Memberships and subscriptions are just two of the things I’m doing with WooCommerce. The other is selling physical products, which is something I’ve dabbled in over the years. In fact, we used to hand-fulfill each and every order by taking products to the post office! We’ve also partnered with fulfillment companies in the past, but we still had to physically print up a bunch of inventory ahead of time.

Things have come a long way since then and there are lots of companies that print on demand! One such company (and I have no affiliation with them) is Printify. They sell all kinds of stuff, including what you’d expect from a printing company: t-shirts, hoodies, mugs… and the best part for me is that it connects directly to WooCommerce.

So far, we’ve stocked the store with posters! On the Printify side, I pick the product, upload the art, choose some options, and that’s that!

The last step in the process is to “Publish product to your WooCommerce store” which has worked perfectly for me so far. I trust that it works, as it must be forming the connection between Printify and WooCommerce such that Printify receives the order and fulfills it when they come in.

From there, the products appear on my site and I can edit or customize them from WordPress if I need to (like the copy and such):

I can check orders at any time and watch as they are ordered, produced, prepped, and shipped:

I ordered some posters myself, of course, so I could try it out before putting it in front of other people. The poster came in a nice triangular tube thing in perfect condition on thick bright white paper. I hung it right up next to my office computer:

Mobile App

If you’re like me and get excited to look at how your little store is doing and get notifications for sales, there is a mobile app.

I haven’t had the need to update order statuses or manage reviews and the like, but that’s all in there too.

There is a lot of technology at work here!

But my actual time commitment has been minimal. I’ve spent longer writing this blog post than I have setting up all of this eCommerce stuff. I’m just an integrator here. I’m not inventing anything — just taking advantage of some best-in-class software to make my ideas happen.