How to Build WooCommerce Powered Landing Pages for Maximum Impact

WooCommerce Powered Landing Pages

WooCommerce Powered Landing PagesLanding pages are arguably one of the most effective ways to sell products. WooCommerce is a powerful eCommerce solution that can power landing page purchase options. Here’s how to create landing pages using WordPress and WooCommerce.

The following article will explain how to setup a basic landing page with several options to integrate WooCommerce. These options range from easy to more advanced. Please keep in mind that, a high-conversion landing page not only has effective purchase options but also utilizes an optimized layout, a compelling use of copy, imagery and video.

Why WooCommerce for Landing Pages?

WooCommerce offers a robust solution to build full blown eCommerce shops. So why should you use it for landing pages? Well, there are a number of reasons:

  1. Advanced Reporting – Version 2.1+ features a much improve reporting interface so you know exactly how many sales occurred and when, plus much more.
  2. Checkout Options – With WooCommerce you have the ability to accept payments directly on site using pretty much any payment gateway
  3. Shipping Integrations – WooCommerce can tie into 3rd party shipping APIs such as UPS and FedEx to provide real time shipping rates for your physical products.
  4. Subscription Payments – Selling a service or membership? Use subscription payments for weekly, monthly and
  5. … much more – I’m not going to list all the enhancement WooCommerce offers for landing pages. So check out the site to learn more about what exactly this plugin can do.

Are you convinced WooCommerce is your preferred landing page backbone? Great. Let’s move on.

Before You Begin

Before beginning you first should have a WordPress install ready with WooCommerce setup with a few products. WooCommerce comes with product pages and a shop page listing various products but default. We’re not concerned with these default pages and depending on your use case you may not even want to use them.

Tip: if you don’t want to use any default pages of WooCommerce such as the single product posts, shop catalog, and cart then you may want to redirect these pages and ensure they are not in your sitemap.

Building an Effective Landing Page Layout

Landing Page Optimization
Photo credit: UXmag.com

Your landing page layout is vital to success of the page (ie conversion rate). Take extra time here to think about how you want it formatted and which messages you want to convey. Once you have a plan of action it’s time to decide which route to take to build it. There are several ways to build a landing page layout:

  1. Use a Plugin – There are several plugins available, both free a premium, that allow you to create landing pages without ever touching code. Two plugins I recommend are Parallax Gravity Landing Page Builder (freemium) and Parallax One Page Builder (premium). Be wary of the plugins that replace/shut off access to your theme and are rather considered ‘maintenance mode’ or ‘coming soon’ pages. These plugins may not be compatible with WooCommerce.
  2. Use a Landing Page Theme – There are lot of themes available for WordPress built specifically for landing page creation. Two that are worth checking out are Appos from Themes Kingdom and Onesie by Graph Paper Press. Essentially, these themes make it easy to build a landing page that’s WooCommerce compatible with relative ease, that’s responsive and requires no coding.
  3. Combination of Theme and Visual Builder – Plugins like Visual Composer and VelocityPage make building layouts using your current theme a breeze. They allow you to visually structure your page with columns and rows and insert content, images and media. They sit atop your existing theme and most offer a frontend editing capability that typically does a good job of showing you how the page will look once you are finished building it.
  4. 100% Hand Coded – For the ultimate flexibility you can always hand code your landing page. Of course, this requires that you have the knowledge necessary to build it. The plus side is that you’re not reliant on any outside theme or plugin. The downside is it takes longer.

Before you begin building it’s worthwhile to spend some time sketching the layout on paper or using a wireframing tool to decide the layout you want to build. That way, you know the structure you’re aiming for and have a plan of action when building the layout.

Integrating WooCommerce

landing-page-woocommerce-guyHow you want to integrate WooCommerce with your landing page depends on what kind of product you are selling. Is it a physical product or digital? Is it a simple or variable product? The type of product(s) you are selling will help determine the best route of integration.

Using WooCommerce Shortcodes

Out of the box WooCommerce comes equipped with several shortcodes that help you place product purchase options at various locations on your website. The downside of these shortcodes are they are not very intuitive or flexible. They also don’t work for complex or variable products. So if you are selling a simple product, this may be a viable route. Speficially, the [product] shortcode can be placed within your landing page to output a specific product by ID:

[product id="99"]

Which will output something similar to:

woocommerce-product-shortcode-output

Another Option using WooCommerce’s Shortcodes

There is another shortcode within WooCommerce that can bring more power to your landing pages and can support variable products. That is the [product_page] shortcode:

[product_page id="99"]

The trick is here that you will need to customize the single product page templates so that only the output you want on the landing page is displayed. For instance, you most likely don’t want all the bells-and-whistles such as ratings, images, etc. You can either disable their output using hooks, or override the single product template files, or simply hide them using CSS.

Using Code to Output Add a Variable Product Purchase Button

As mentioned, the standard WooCommerce shortcodes do not have the ability to add a variable product purchase button to your landing page. For instance, let’s say you are selling a service that has several levels of membership (ie gold, silver and bronze packages). There’s no way out of the box to include these buy buttons on page using the standard shortcodes.

remi-blog-post-woocommerceRemi Corson has an excellent tutorial on his blog that shows you how to create buttons/links to add a product variation to the cart. In a nutshell, he explains how to format a url with the proper attributes that once clicked will add a specific product variation to the cart. You can use this url within links, buttons and JavaScript/jQuery.

Tip: For higher conversion skip the cart and direct the user immediately to checkout upon choosing to purchase the product. This will reduce the clicks and time the user has to think about purchasing the product and help streamline the checkout process.

Using the Quick Checkout Extension for WooCommerce

WooCommerce Quick Checkout

Full disclaimer: I am the developer of this extension. With that said, I believe Quick Checkout that it’s the best option to optimize your landing pages for higher conversion rates. Essentially, this plugin allows your users to checkout directly on the landing page with zero redirects. This means less clicks and time required to purchase the product.

Quick Checkout Features:

  • Add a checkout form directly on page with a product ready to purchase in the cart. No need unnecessary carts or redirect. Simply fill out the form, click purchase and the product is purchased.
  • Display checkout in a responsive and light weight lightbox
  • Reveal checkout on page once a user elects to purchase a product by clicking the purchase button. Perhaps you don’t want to show checkout right away, or feel it clutters your layout. That’s where this option can help.

If you’re interested in purchasing Quick Checkout here’s a coupon code for 15% off: qc15off

Other Tips and Advice

Here are a few more quick tips I can offer up to help maximize your landing page’s impact:

  1. SSL Secure your landing pages for added user confidence – Everyone like to feel secure. You’d be surprised how effective the little green lock can be. You can use a plugin like WordPress HTTPS to help you secure your pages.
  2. Responsive, responsive, responsive – I recently took a trip to Asia. Everyone, everywhere, was on their phone. It’s no different in the USA (albeit less obvious). Globally, mobile has taken over. It’s essential that your landing page shines on mobile.
  3. Faster = Better – Using a slow host? Don’t! Load time is vital to higher conversion rates. People hate to wait and if have to wait too long they’ll bounce out and purchase somewhere else. I recommend WP Engine or Flywheel to host your WordPress sites.

In Conclusion

There are many ways to sell your products online. Landing pages are a popular method that users are familiar with and can help increase sales and conversion rates. Using the power of WooCommerce you can have your cake and eat it too. Meaning, you get all the benefits of using WooCommerce and also can employ landing pages to direct your traffic.

What do you think? Let us know your thoughts in the comments below.