At the very first WooConf Cyndie Shaffstall talked about some of the conversion rate optimization (CRO) techniques. One of those techniques was to add an arrow to the Add to Cart button. The arrow helps people find the add to cart button and should increase conversions as it did with many of her clients. So with that knowledge I thought I'd document how you can do that with WooCommerce.
Category Archives: Code Snippets
WooCommerce: When to Use Hooks and When to Use Templates
One of the best reasons to use WooCommerce is that it's a fully featured e-commerce platform and it's open source. That means you can customize every. single. line of code. If you don't like the way something works you can change it or you can hire a developer to change it for you. It's great knowing that as your business grows your software will grow with you.
There are two ways of changing the way WooCommerce works:
- Overriding templates
- Adding & removing hooks
Both of these methods are good at different things so I'll share when is an appropriate time to use each of them.
WooCommerce Sort Shipping Methods By Cost
WooCommerce has plenty of shipping options. You can use USPS, FedEx, UPS, flat rate shipping, free shipping, or even create your own table rates. Lots and lots of options for you. If you want to give your customer the choice between these options it can be a bit difficult. WooCommerce will lump the different services together which is nice if you want to see all the USPS, FedEx, UPS, etc. options together. But it doesn't help you if you want to sort by cost and that's how most users want to see things. Either by cost or by delivery time. With a bit of code you can sort the options by cost.
The WooCommerce shipping methods in the default order.
WooCommerce Redirect to Category Page
In WooCommerce when you add a product to your cart the product page refreshes with a little banner confirming you added the item to the cart.
The “added to cart” notice in WooCommerce
This is useful for big e-commerce stores like Amazon where users are likely to buy multiple items with every checkout. But this isn't useful for every retailer. Some retailers sell very different products and users rarely buy more than one at a time. For example if you sell computer desks like Rebel Desk (yes they totally use WooCommerce) it's unlikely that someone will buy more than desk. And in that case it may help your users to redirect them to another page. Maybe the shop page, maybe a specific category, or maybe directly to the checkout. With a snippet of code you can do that in WooCommerce.
How to Customize the WooCommerce Sorting Dropdown
Being able to organize your store however you want is one of the best parts about using WooCommerce. You could stick with the default ordering functionality or you may want to customize it a bit for your store. Maybe you want to remove the option to sort by price, or you want to remove the sorting all together (because you only have 5 products), or you want to add a whole new way to sort. That's all possible with WooCommerce.
Removing Sorting Options
The default sorting in WooCommerce
WooCommerce Always Include Shipping Information on Checkout Page
The other day I received this question from a WooCommerce user:
I have virtual products in my store but I still want to collect the shipping information from my customers so that I can mail them a card at the end of the year. But a cart with virtual products automatically hides the shipping information on the checkout page. How can I force it to show up?
Customizing WooCommerce Email Styles
There are 269 free WooCommerce themes on WordPress.org which is amazing. And many of them are absolutely gorgeous. And while many of them are gorgeous there is one aspect that developers leave out. And that is making sure that WooCommerce email styles match the theme. As a store owner you want to have a unified experience. Unfortunately in most cases no matter what colors your theme has your emails tend to look like this:
The standard New Customer email for WooCommerce
That won't work well if your theme is like my blog's theme: big header, a vibrant purple, and my face in the header. The emails don't resemble that at all.
Luckily there are two good solutions to this problem. The first is a plugin and the second, for savvy developers, is to use custom code.
How to Add a Call to Order Button in WooCommerce
WooCommerce is a fully featured e-commerce solution and you can do just about anything with it. But just because you can doesn't mean you should. Many businesses aren't ready for run an e-commerce site. Maybe they can't increase inventory fast enough, they don't have a good fulfillment system setup, or they just aren't ready to take their business online.
When this happens WooCommerce can still be really useful to show off your products to your customers. There are categories, tags, filters, multiple tabs, video tabs, 360-degree images, and all sorts of other really useful features you can use to help customers browser your catalog. The only thing you have to do is disable that Add to Cart button and replace it with a Call to Order button. There are two good ways of doing this. The first is to use a plugin and the second is to code it yourself. I'll show you how to do both.
How to Change the Style of the Add to Cart Button in WooCommerce
One of the questions I get asked all the time is, “how do I change the color of the Add to Cart button in WooCommerce?” And depending on what theme you have it could be as easy as clicking a few buttons in the WordPress customizer or if you're creating a theme from scratch you'll have to write a bit of CSS. I'll show you all of the options below.
Append OptinMonster to Post Based on Tag
I started my newsletter a little less than a year ago and at the time I set it up quickly because I was just experimenting with newsletters. As I've done more research and as I've seen my list grow to 350+ subscribers without an incentive I've decided to take my opt-ins more seriously. That's why I've been playing with OptinMonster and it's actually really great.
It's not a form builder and it won't make your contact form. What it can do though is give you a really nice interface to build an opt-in form. You choose a type of opt-in (sidebar, after the post, popup, etc), define some styles, tell it when to appear (only on this page), connect it to your list and press save. It's pretty slick.
This post though isn't about opt-ins. It's about being able to choose exactly where I want to place them. I write a lot about WooCommerce. In fact, 50 of my 192 posts are about WooCommerce. And I have an newsletter for people who want to learn more about WooCommerce so it makes sense to automatically add an opt-in form to any post that's tagged woocommerce. And that's something that OptinMonster doesn't handle natively. Luckily their support was great and pointed me in the right direction.