Home » Blog » WooCommerce Landing Pages That Convert
Blog

WooCommerce is by far the most popular e-commerce plugin for WordPress.

In fact, they recently held their first conference, WooConf, the week this post was published and announced their 5 millionth download on WordPress.org. This is great news for their company and the WordPress ecosystem at large. If you’re looking for one of the best WordPress e-commerce plugins, WooCommerce is sure to be a safe bet for your business.

In today’s lesson, we’re exploring how we can level-up our WooCommerce experience using Conductor. As easy as it is to setup and launch a new WooCommerce powered website, there’s still some skill needed to fine-tune your pages for conversions. Specifically if you’re trying to change the layout of landing pages for your products.

Hopefully you find this guide useful as a WordPress consultant helping your client launch their new e-commerce site or if you’re a shop owner looking for a plugin to help you customize your website.

Let’s dive in!

The goal

If you fail to plan, you are planning to fail! ~ Benjamin Franklin

Our goals:

  • Focused landing pages of featured WooCommerce product
  • Capture a leads and build future marketing funnels

In this example, we want to create unique product landing pages that display 1 – 3 products to entice a purchase or capture a lead. Unique landing pages like this are super-useful for targeted ads on social, PPC campaigns, or even in traditional advertising.

Instead of relying on our visitor to find the product in the search results of our store, we’ll build unique targeted pages that are perfect for direct traffic, PPC campaigns, or even traditional advertising channels.

Video overview

 

Warning: Loads of information ahead! I summarize the fundamentals in the video above and invite you to dive in.

What we need to get started:

In this example, I’ll be using vanilla WooCommerce with no add-ons from their store. Conductor is the Poweruser license pack, which includes our WooCommerce add-on. Modern Business Pro is our theme which has a handy Hero Text widget that I like to use for placing large attention grabbing call to actions.

Let’s go!

Data: Don’t get caught promoting the wrong product

Conductor WooCommerce Landing Pages and Google Trends

Analyze the data for better results!

 

Winter is coming.

It’s starting to get cold in the Northeast and our example store will be selling mittens. I used Google trends to examine the data of searches in the US for mittens, versus bathing suits. Two very opposite products for this time of year, but hopefully this serves as a helpful tip for planning your own e-commerce store.

Looking at the data

The above graph shows 12 months of search trend data for mittens vs. bathing suits. It’s important to look at last year’s seasonal trend because you can get a sense of when your product’s search traffic will peak. So in this case, mittens search traffic hit a high in the week of December the 8th and then decline from there.

Why? Christmas shopping is probably winding down, demand has been met, etc. This is awesome information for planning how long we should be investing in our landing page’s PPC campaign, social push, or other promotional channel.

Why is this important?

  • Understand the positive swing of your product’s search traffic.
  • Be ready for traffic to hit it’s peak.
  • Plan for your seasonal or promotional push.
  • Get a better understanding of selling accessory product.

Leveraging this data and data from other analytics services is what makes e-commerce so unique. This is just the tip of the iceberg as you can collect data from many other services around the web:

And the list goes on and on — so now that we know mittens is the product to push this month — let’s setup our pages.

Example 1: The Full-Width Landing Page

In this example I’m only going to review 2 unique layouts. However, Conductor allows you to create many more than what we see here.

Step 1: Set your page to display full-width

Conductor: Set page to full-width layout.

Conductor: Set page to full-width layout.

 

The full-width landing page is one that delivers less distraction. There are no additional sidebars or attention-grabbing advertisements, so the chances of your visitor going off of this desired page are much slimmer.

I created a page called Blue Mittens and we’ll use this to build our promotion for blue mitten inventory. Using Conductor, I gave it a full-width layout and now we’ll add our content.

Step 2: Build your page to include a single call to action and 1 WooComerce product

Using Modern Business Hero widget and Conductor with WooCommerce add-on

Using Modern Business Hero widget and Conductor with WooCommerce add-on

 

Let’s start from the top of the page.

After enabling full-width layout, I used the Modern Business Pro hero widget to display a unique value proposition. Chances are our visitor has landed on this page via a promotional link — so I need to close the deal. Remember, you don’t need to use the theme and widget I use here — Conductor will work on any WordPress theme.

Call to action

Winter sale: Never let your hands freeze again!

  1. I’m letting the visitor know there’s a sale going on.
  2. It gets cold. Who wants their hands to freeze? No one.
  3. Descriptive line that emphasis the above. Why do you want to buy these mittens and what can they do for you?

Then, I added a Conductor Widget and told it to display my single product. Remember, we only want one here!

Conductor WooCommerce Widget Settings

Conductor with WooCommerce add-on fields

 

Display your WooCommerce products without code

Moving along the widget settings,  I adjusted some of it’s display properties. I set it as a large display to ensure it would take up the 100% width of my page. Then I cleaned up some of the default WordPress fields like author byline and the read more link.

Now this is where the magic comes in.

Using the WooCommerce add-on I can display supported WooCommerce fields. In this example, WooCommerce price field and it’s built-in add-to-cart button.  Conductor’s custom field settings allows me to overwrite default ‘Price’ and “add to cart” labels. I spiced things up a bit with more call to action to help convert.

Hurry! Sale ends soon!

And

Yes, I want to stay warm! 

These minor call to actions should help trigger the urgency of the sale ending soon and the emotional factor of staying warm with these mittens. Did you notice you didn’t have write a line of code to create this page? Let’s get to the next example.

Example 2: Products on the left with a lead magnet on the right.

Time for a new goal and this time it’s all about capturing a lead.

The goal in this example is display a small subset of WooCommerce products but this time we’re introducing a lead magnet. The magnet serves as an attractor to learn more about the product or some affiliated topic. Perfect for an automated drip campaign series of e-mails. In this case, we’ll use Easy Opt-ins for Mailchimp to achieve that.

Step 1: Create the layout for products + sidebar

Conductor: Set the layout to Content + Sidebar

Conductor: Set the layout to Content + Sidebar

 

Lead magnets and e-mail funnels

Why aren’t we trying to get the sale right now?

Well, it depends on your marketing campaign and your product. For example, if your mittens contain some new-market technology like fitness tracking, perhaps your target audience wants to learn more about the benefits. That also means that your mittens are probably 20x the cost of commodity mittens and the lead time to buy is naturally going to take longer. Landing an opt-in now might help you realize better conversions in the long run.

Benefits for having a lead magnet that leads to a drip campaign:

  • It’s a softer and more intimate sales process.
  • Product education via content like guides, tutorials, videos and other new media.
  • Easier to segment potential customers.
  • It’s more “exclusive” content than what’s available on your website.
  • You have a longer pipeline to follow-up with your potential customer.

E-mail marketing and marketing automation is very hot right now. If you want to learn more about this for your business, I suggest this post about Onboarding Emails.

Step 2: Drop in our products via Conductor and our lead magnet from Easy Opt-ins for Mailchimp

Display your WooCommerce products in the content area. Lead Magnet in the sidebar.

Display your WooCommerce products in the content area. Lead Magnet in the sidebar.

 

Landing page #2 is done!

Here we see our featured WooCommerce products on the left with our lead magnet on the right. The beauty is, you don’t have to stop here. You could add additional content above or below the products or add more widgets to the sidebar to beef up the content on this page.

Even if your visitor doesn’t buy when they hit this page, there’s an opportunity for them to jump into other automated funnels through your lead magnet.

Just remember, less is more when we’re trying to build landing pages that convert!

Data: Test test test

Now that your pages are built, you have to test them!

Conductor Ecommerce tracking

Conversion percentage: Is your business healthy?

The most common place to track your e-commerce conversions is using Google Analytics. You can learn about that right from Google’s blog. If you’re a Yoast SEO fan, they made a plugin that makes is super-simple to setup. It supports WooCommerce and Easy Digital Downloads.

Want it? Grab Yoast’s e-Commerce tracking plugin

heatmap

Heat maps: Are your users finding what they need?

Over at CrazyEggg, you can find yourself one of the most straight-forward tools availablehttp://mattreport.com/leadin-plugin-review/ for tracking visitor on-page usability.

Remember the research we did with Google Trends to determine which products to sell? Click and scroll heatmaps will validate if we’ve created the right headlines, positioned the products the right way, and have enough scrollable content. Every landing page that you’re trying to improve conversions on should have this installed.

leadin-full-contact-history

Lead tracking: Organize potential leads and past customers 

Leadin is a great WordPress plugin that will organize and report on leads to your site. Once a visitor submits a form, be it a purchase page or a lead magnet, Leadin will store that in your database. You can tag them as customers or future leads. While this doesn’t impact direct on-page conversions, this kind of historical data is invaluable when making future landing page decisions.

Learn more in this Leadin plugin review.

How will you use this

Whew…loads of information here and we’re just scratching the surface!

If you’re spending more than a nickel on PPC or Social advertising — creating proper landing pages is a must, if you want to see higher conversions.

There’s an infinite amount of ways we can setup our landing pages for better conversions. Do you have any interesting ways you solve this now? I invite you to share your ideas in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *