Tag: WooCommerce

WooCommerce on CSS-Tricks

I always get all excited when I accomplish something, but I get extra excited when I get it done and think, “well, that was easy.” As much as I enjoy fiddling with technology, I enjoy reaping the benefit of well set-up technology even more. That’s why I still get so excited about WordPress — I feel so powerful being able to accomplish big things without a huge amount of time and effort.

I had that exact feeling this past month when I was getting WooCommerce set up here on CSS-Tricks (again).

Lemme show you how I’ve got it set up, because I bet there are plenty of you who could do the same thing and make even more use of this setup than what I’m doing!

WooCommerce Powered Membership

Let’s say you want to have a membership site. Perhaps you have a fitness website and you make training videos and you build a membership paywall for pages that display those videos and training regiments. Or perhaps you have a cooking website, and paid members have access to additional features, like saved shopping lists.

Having a system for paid members is a foundational concept for making money online, and is typically no small task. Fortunately, WooCommerce makes quick work of it. Aside from the (free) WooCommerce plugin, you’ll need the ($ 199) WooCommerce Memberships plugin.

If you’re eying up some paid plugins for WooCommerce, you might circle July 21st on your calendar. That’s WooCommerce Day and there are going to be some big sales.

Once you have that installed, you’ll see a Memberships tab within your WooCommerce area in the WordPress admin. In there is a Membership Plans area where you can set up your plans. We have a very simple one-plan setup: CSS-Tricks Member.

You could have a whole variety of plans if you like (e.g. bronze, silver, gold).

These plans don’t do anything all by themselves just yet —they are just user roles, and the access control stuff comes later. You could make these plans such that only admins can add people to them, that anybody can register for them for free, or that they require the purchase of a product to join. That last one is the useful one for an eCommerce setup!

As a side note, you’ll probably want to limit the time length of the membership. You could make it unlimited, but it’s probably smarter to start with memberships that expire after a set time so you aren’t promising things for life.

Since I’m selling memberships, I’ve tied the Membership Plan to the sale of a product: MVP Supporter.

Buy this product, activate subscription, activate membership

The way to get access to that membership plan is to purchase this product. You’ll also always be able to manually add people to plans as an admin.

This product could have been a one-off charge, which supports the idea of an unlimited length membership, but like most memberships in the world, I wanted to set it up as a recurring billing product. That means we need a little additional setup.

Subscriptions to Memberships

I found this a tiny bit confusing. You might assume a membership plugin would support the idea of recurring billing for that membership, but it doesn’t do that out of the box. We need a second plugin for that: WooCommerce Subscriptions.

The subscription plugin is another $ 199, making this setup just shy of $ 400. That’s it for upfront costs though — you only need to renew the licenses next year if you need support and updates (I would). I find that cost to be more than fair for a system that works this efficiently, but you’ll have to do the business math for yourself.

Once you have that plugin installed, any product you create has the possibility of being a subscription product.

Here at CSS-Tricks, we’re charging $ 20/year for the membership. When someone signs up, they’ll be re-charged the next year at $ 20. That matches the length of the membership plan, which is an important step. Nothing forces you to do that but it would be weird to place a charge on a different date from the actual renewal.

Membership-Only Access to Posts

Wwe’ve done the two biggest parts of setup:

  1. Created a Membership Plan
  2. Created a product people can buy that subscribes them to that plan

Now for the part that actually gives the members some benefit! I am planning to sell access to a “book” that’s hosted on this site. The book is actually just a collection of posts. They are Custom Post Types we’ve set up called “Chapters.” In the editor for the chapter, below the content, there will be a Memberships area you can use for locking the chapter to a Membership Plan.:

This is in the post editor, underneath the post content.

Again, this example uses a Custom Post Type, but it could be any page or post type at all! It’s literally the flip of a switch to put something behind the membership wall.

There are two “faces” of a post with a content restriction:

  1. What members see: the content
  2. What non-members see: an excerpt and message on how to unlock the content

I think that’s a nice system. It shows people exactly what they could be reading if they were a member and shows them exactly how they can become a member.

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):

Products in my WooCommerce admin

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

Order dashboard on Printify

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.

The post WooCommerce on CSS-Tricks appeared first on CSS-Tricks.

CSS-Tricks

,

WooCommerce 4.0 & WooCommerce Payments Beta

Y’all know WooCommerce: it’s a plugin for WordPress that adds robust eCommerce functionality to your site. Notably, like WordPress itself, it’s open-source and free. You only pay for things if you need things like special plugins that extend functionality.

This is a huge month for WooCommerce! Two major releases:

WooCommerce is a major upgrade, to the point that there are things that aren’t compatible just yet. You should do all the normal best practices when upgrading, like making backups and testing on staging first. Once you’ve upgraded, you get:

  • New admin: You don’t need the separate admin plugin anymore, it’s baked right in! So you get very nice detailed reporting of just about any aspect of your sales performance. Stuff like comparing year-of-year sales and full customization of reports.
  • New onboarding: If you already use WooCommerce, you’re already all set, but for new users, you’ll be walked through setup in a much more clear way. Like a multi-step wizard that asks you questions about your business and gets things configured correctly.
  • Behind the scenes: A crucial bit to WooCommerce is the Action Scheduler and a change in 4.0 is moving that work to the database level for much better performance. For example, if you sell subscriptions, this is the thing that runs that updates all your users subscriptions and keeps them in the correct state and updates all the admin data.

If you’d like to read more about the 4.0 release…

WooCommerce Payments (Beta)

This is a brand new (free) plugin from WooCommerce. Funny name, right? Of course, WooCommerce could already take payments. If you wanted to take credit cards, your best bet was the Stripe plugin, as it worked great and also opened doors for taking Apple Pay, Google Pay, and others.

With WooCommerce Payments the entire payments experience is moved right into your WooCommerce dashboard. You go through a little onboarding experience as you activate it and then you’ve got a whole new area of your dashboard dedicated to payments.

This video does a good job of showing it off:

You can:

  • See all the payments
  • See deposits to your bank
  • Process refunds
  • Deal with your disputes

And all that type of stuff directly on your dashboard, rather than having to hop over to some other payment dashboard elsewhere to do things. It’s a totally custom-designed experience just for WooCommerce.

Want in? If you’re in the U.S., here’s a special link to skip the beta invite process and download the plugin. It’s not available quite yet for the rest of the world, but you can still sign up for the beta to help signal interest in your region.

What do we use it all for?

Here at CSS-Tricks, in the past, we’ve used WooCommerce for selling merchandise like t-shirts and the like. We’re not doing that at the moment, but maybe we will someday again! WooCommerce is still on the site and upgrading to 4.0 was painless for me.

Lately, I’ve been more interested in what it might be like to have memberships again. And actually, to be accurate, subscriptions to memberships, as those are different things and it took me a minute to wrap my brain around that. They are both separate plugins but work together:

So if you wanted a membership that you charged on a monthly or annual basis for (rather than a one-off cost membership), you use both plugins. Memberships deal with locking down the content and they expire at the end of a term. A subscription can keep a membership going by extending the membership upon recurring payments.

I’m still learning how all this can work, but here’s a whirlwind tour.

With the Memberships plugin in place, I can create a Membership plan for the site. Notice that’s it’s “subscription tied” to a length of time, thanks to the Subscription plugin.

Now say I publish something that I’d like to lock down to members. In the “Advanced Panels” area after the editor, there will be a content restriction area that comes from the Membership plugin.

I can choose to lock down content at the fine-grained post/page level if I like. I can also do whole hierarchies of pages or categories or custom post types or the like.

Now if I was to view that page as someone who wasn’t a member (and by the way, the User Switching plugin is nicely integrated so you can preview the site as people of different plans) I would see only an expert of the post and the rest of it hidden with a content-locked message.

From there, of course, the user could proceed with purchasing a membership to unlock the content.

I really like how easy this all is to set up and how well integrated into WordPress it is. Of course it is, that’s why WooCommerce is the most popular eCommerce platform out there.

The post WooCommerce 4.0 & WooCommerce Payments Beta appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]

How to Customize the WooCommerce Cart Page on a WordPress Site

A standard e-commerce site has a few common pages. There are product pages, shop pages that list products, and let’s not forget pages for the user account, checkout flow and cart.

WooCommerce makes it a trivial task to set these up on a WordPress site because it provides templates for them and create the pages for you right out of the box. This is what makes it easy to get your store up and running in a few minutes just by setting up some products and your payment processing details. WooCommerce is very helpful that way.

But this isn’t a post extolling the virtues of WooCommerce. Instead, let’s look at how we can customize parts of it. Specifically, I want to look at the cart. WooCommerce is super extensible in the sense that it provides a ton of filters and actions that can be hooked into, plus a way to override the templates in a WordPress theme. The problem is, those take at least some intermediate-level dev chops which may not be feasible for some folks. And, at least in my experience, the cart page tends to be the most difficult to grok and customize.

Let’s look at how to change the WooCommerce cart page by implementing a different layout. This is how a standard default cart page looks:

We’ll go for something like this instead:

Here’s what’s different:

  • We’re adopting a two-column layout instead of the single full-width layout of the default template. This allows us to bring the “Cart totals” element up top so it is more visible on larger screens.
  • We’re adding some reassurance for customers by including benefits below the list of products in the cart. This reminds the customer the value they’re getting with their purchase, like free shipping, easy exchanges, customer support and security.
  • We’re including a list of frequently asked questions beneath the list of products in an accordion format. This helps the customer get answers to questions about their purchase without have to leave and contact support.

This tutorial assumes that you have access to your theme files. If you don’t feel comfortable logging in to your hosting server and going to the file manager, I would suggest you install the plugin WP File Manager. With just the free version, you can accomplish everything explained here.

First, let’s roll our own template

One of the many benefits of WooCommerce is that it gives us pre-designed and coded templates to work with. The problem is that those template files are located in the plugin folder. And if the plugin updates in the future (which it most certainly will), any changes we make to the template will get lost. Since directly editing plugin files is a big ol’ no-no in WordPress, WooCommerce lets us modify the files by making copies of them that go in the theme folder.

It’s a good idea to use a child theme when making these sorts of changes, especially if you are using a third-party theme. That way, any changes made to the theme folder aren’t lost when theme updates are released.

To do this, we first have to locate the template we want to customize. That means going into the site’s root directory (or wherever you keep your site files if working locally, which is a great idea) and open up the /wp-content where WordPress is installed. There are several folders in there, one of which is /plugins. Open that one up and then hop over to the /woocommerce folder. That’s the main directory for all-things-WooCommerce. We want the cart.php file, which is located at:

/wp-content/plugins/woocommerce/templates/cart/cart.php

Let’s open up that file in a code editor. One of the first things you’ll notice is a series of comments on top of the file:

/**  * Cart Page  *  * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight  *  * HOWEVER, on occasion WooCommerce will need to update template files and you  * (the theme developer) will need to copy the new files to your theme to  * maintain compatibility. We try to do this as little as possible, but it does  * happen. When this occurs the version of the template file will be bumped and  * the readme will list any important changes.  *  * @see     https://docs.woocommerce.com/document/template-structure/  * @package WooCommerce/Templates  * @version 3.8.0  */

The highlighted line is exactly what we’re looking for — instructions on how to override the file! How kind of the WooCommerce team to note that up front for us.

Let’s make a copy of that file and create the file path they suggest in the theme:

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

Drop the copied file there and we’re good to start working on it.

Next, let’s add our own markup

The first two things we can tackle are the benefits and frequently asked questions we identified earlier. We want to add those to the template.

Where does our markup go? Well, to make the layout look the way we laid it out at the beginning of this post, we can start below the cart’s closing table </table> , like this:

</table>  <!-- Custom code here -->  <?php do_action( 'woocommerce_after_cart_table' ); ?>

We won’t cover the specific HTML that makes these elements. The important thing is knowing where that markup goes.

Once we’ve done that, we should end up with something like this:

Now we have all the elements we want on the page. All that’s left is to style things up so we have the two-column layout.

Alright, now we can override the CSS

We could’ve add more markup to the template to create two separate columns. But the existing markup is already organized nicely in a way that we can accomplish what we want with CSS… thanks to flexbox!

The first step involves making the .woocommerce  element a flex container. It’s the element that contains all our other elements, so it makes for a good parent. To make sure we’re only modifying it in the cart and not other pages (because other templates do indeed use this class), we should scope the styles to the cart page class, which WooCommerce also readily makes available.

.woocommerce-cart .woocommerce {   display: flex; }

These styles can go directly in your theme’s style.css file. That’s what WooCommerce suggests. Remember, though, that there are plenty of ways to customize styles in WordPress, some safer and more maintainable than others.

We have two child elements in the .woocommerce element, perfect for our two-column layout: .woocommerce-cart-form and .cart-collaterals. This is the CSS we need to split things up winds up looking something like this:

 /* The table containing the list of products and our custom elements */ .woocommerce-cart .woocommerce-cart-form {   flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */   margin-right: 30px; }  /* The element that contains the cart totals */ .woocommerce-cart .cart-collaterals {   flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */   margin-left: 30px; }  /* Some minor tweak to make sure the cart totals fill the space */ .woocommerce-cart .cart-collaterals .cart_totals {   width: 100%;   padding: 0 20px 70px; }

That gives us a pretty clean layout:

It looks more like Amazon’s cart page and other popular e-commerce stores, which is not at all a bad thing.

Best practice: Make the most important elements stand out

One of the problems I have with WooCommerce’s default designs is that all the buttons are designed the same way. They’re all the same size and same background color.

Look at all that blue!

There is no visual hierarchy on the action users should take and, as such, it’s tough to distinguish, say, how to update the cart from proceeding to checkout. The next thing we ought to do is make that distinction clearer by changing the background colors of the buttons. For that, we write the following CSS:

/* The "Apply Coupon" button */ .button[name="apply_coupon"] {   background-color: transparent;   color: #13aff0; } /* Fill the "Apply Coupon" button background color and underline it on hover */ .button[name="apply_coupon"]:hover {   background-color: transparent;   text-decoration: underline; } 
 /* The "Update Cart" button */ .button[name="update_cart"] {   background-color: #e2e2e2;   color: #13aff0; } /* Brighten up the button on hover */ .button[name="update_cart"]:hover {   filter: brightness(115%); }

This way, we create the following hierarchy: 

  1. The “Proceed to checkout” is pretty much left as-is, with the default blue background color to make it stand out as it is the most important action in the cart.
  2. The “Update cart” button gets a grey background that blends in with the white background of the page. This de-prioritizes it.
  3. The “Apply coupon” is less a button and more of a text link, making it the least important action of the bunch.

The full CSS that you have to add to make this design is here:

@media(min-width: 1100px) {   .woocommerce-cart .woocommerce {     display: flex;   }   .woocommerce-cart .woocommerce-cart-form {     flex: 1 0 70%;     margin-right: 30px;   }       .woocommerce-cart .cart-collaterals {     flex: 1 0 30%;     margin-left: 30px;   } } 
 .button[name="apply_coupon"] {   background-color: transparent;   color: #13aff0; } 
 .button[name="apply_coupon"]:hover {   text-decoration: underline;   background-color: transparent;   color: #13aff0; } 
 .button[name="update_cart"] {   background-color: #e2e2e2;   color: #13aff0; } 
 .button[name="update_cart"]:hover {   background-color: #e2e2e2;   color: #13aff0;   filter: brightness(115%); }

That’s a wrap!

Not too bad, right? It’s nice that WooCommerce makes itself so extensible, but without some general guidance, it might be tough to know just how much leeway you have to customize things. In this case, we saw how we can override the plugin’s cart template in a theme directory to future-proof it from future updates, and how we can override styles in our own stylesheet. We could have also looked at using WooCommerce hooks, the WooCommerce API, or even using WooCommerce conditions to streamline customizations, but perhaps those are good for another post at another time.

In the meantime, have fun customizing the e-commerce experience on your WordPress site and feel free to spend a little time in the WooCommerce docs — there are lots of goodies in there, including pre-made snippets for all sorts of things.

The post How to Customize the WooCommerce Cart Page on a WordPress Site appeared first on CSS-Tricks.

CSS-Tricks

, , , , ,
[Top]

Product Search and Filters Are a Snap With WooCommerce

Let’s say you visit an e-commerce site because you want to buy the latest banana peeler model. Bananas are hard enough to peel, right? Only a tool will do!

What’s the first thing you’re going to do on the site? Chances are, it’s entering something into the (hopefully) prominent search field. You need a way to tell the store what you’re looking for in order to get recommendations and that’s the first step.

What’s next? Again, chances are you will need to get more specific with what you’re looking for. You may need the search results to be filtered to get a more precise and increase the chance that your banana peeler surfaces to the top. That might be filtering by a specific brand, color, size, availability, or whatever.

Developing an e-commerce site is already a difficult task and throwing in things like search and filters make it even tougher. That’s why WooCommerce is worth looking into. It’s a WordPress plugin that transforms any site into a full-fledged e-commerce machine, complete with product inventory, shipping methods, payment gateways and, yes, front-end functionality for things like search and filtering.

Take the latest WooCommerce release for example. It introduces a new “All Products” block for the Gutenburg block editor. You can literally drop this block on any WordPress page and it will render a fully customizable grid of products from your inventory. Pretty slick!

Photo courtesy of WooCommerce

And what about filtering? There are specific blocks for that too. Drop any number of filtering options on the same page as the All Products block and the filters will automatically know to filter from the products in the block. And there’s a ton of ways to filter products, including price and attributes (e.g. color, size, etc.). Oh, and filters can be combined, of course, so they can be used together for even more fine-grained search results.

Photo courtesy of WooCommerce

This is just one of the many, many ways WooCommerce is lowering the bar to entry for e-commerce while setting high standards for what to expect on an e-commerce site. It’s free and has been downloaded more than 40 million times… now it’s your turn to give it a spin.

If you’re thinking of pulling the trigger on WooCommerce and think you might need to buy some plugins, it’s about to the absolute perfect time of year to do that. Kicking off on Black Friday and running through Cyber Monday, literally everything WooCommerce is 40% off. And if you’d rather do eCommerce on a totally hosted platform, WordPress.com can do that and that’s all 20% off.

The post Product Search and Filters Are a Snap With WooCommerce appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

WooCommerce

(This is a sponsored post.)

I just read a nicely put together story about WooCommerce over on the CodeinWP blog. WooCommerce started life as WooThemes, sort of a “premium themes” business started by just a couple of fellas who had never even met in person. Two years and a few employees later they launch WooCommerce, and 2 years after that it hits a million downloads. A major success story, to be sure, but a collaborative and remote-work based one that wasn’t exactly overnight. Another 2 years and Automattic picks them up and the WooThemes part is spun down.

Now we’re 3-4 years into WooCommerce being an Automattic project and it’s looking at nearly 60 million downloads, 4 million of which are active. A number they are saying is about 30% of all eCommerce on the web. Daaaaang. I’ve used WooCommerce a number of times and it always does a great job for me.

Direct Link to ArticlePermalink

The post WooCommerce appeared first on CSS-Tricks.

CSS-Tricks

[Top]