Tag: WooCommerce

Shops & restaurants: easy curbside pickup with WooCommerce and Local SEO

Edwin Toonen

With restaurants, shops and other businesses closing due to the Coronavirus pandemic, their owners are looking for other ways to keep their business going. Luckily, many customers are searching for ways to support their local businesses. One of the ways for a restaurant to keep serving people is by offering local pickup of meals. All you need is a WordPress website, a simple ordering system using WooCommerce and a Local SEO plugin. Let’s see how that works. 

Thinking outside the box

At times like these, we all need to step outside our comfort zone and do things differently. Desperate times call for desperate measures, so to say. In this post, I’ll take a look at what a restaurant can do, but many of these things apply to other local businesses as well. 

All restaurants are closed for eating in, but if you try to get creative, there are still ways to keep the business going. For one, that would be offering gift cards for your restaurant to be cashed when you open again. Or, you could keep serving menus to customers and having them come pick it up at your location.

What do you need?

Of course, you would need a site for your restaurant. If you have a WordPress site, it’s quite easy to add a shop of sorts using WooCommerce. You wouldn’t even need a very complex setup with a thousand payment options and user account management or something. Keep it simple, you just want people to select a menu, pick it up and pay for it on the spot using contactless payment. If you wish to extend these options, feel free to do so. 

Besides a WordPress site with a WooCommerce shop, you can improve how these two work together by installing our Local SEO and WooCommerce SEO plugins. These not only enhance your site in a technical sense but also improve the chance of it showing up properly in the search engines.

How to start an online store for local pickup

In this post, you won’t find how to set up a WordPress site. I’ll assume you have a WordPress site. If not, there are a lot of guides on how to make a WordPress website out there that describe how to build one. We have a free WordPress for Beginners course that helps you get going quickly.

Whenever you are working on your site, it’s a good idea to set up a test site that mirrors the real one. This way, you can experiment to your heart’s content without breaking the actual site. Here’s how to set up a test environment for WordPress.

It goes without saying that your hosting plan should be able to facilitate WooCommerce. You should also serve your site over HTTPS (check the green lock icon in the browser bar), this is essential now that you are going to handle customer data.

Install WooCommerce

Go to the Plugin section of your WordPress site and click add new. Here, you can look for the WooCommerce plugin. This is the number one e-commerce solution for WordPress. It powers online stores in all shapes and sizes, including the one on our site. After downloading, the plugin installs and asks you to activate it. WooCommerce is now ready to set up. 

How to install the WooCommerce plugin in WordPress
Install the free WooCommerce plugin to transform your website into a webshop

Set up WooCommerce

WooCommerce has an awesome wizard that guides you through the setup process. If you follow these steps, you’ll have most of the essential things in place. If you want to do it by hand, you need to go to the settings in WooCommerce and go over the screens by yourself.

WooCommerce setup wizard
Easily configure your new webshop through WooCommerce’s setup wizard

Even if you’ve done the wizard, it’s a good idea to go over the settings to get acquainted with everything. Need to rerun the Wizard? Click the Help button in WooCommerce to find it on the left-hand side.

Go to the WooCommerce settings and set up or check the following settings: 

  • On the General tab:
    • Make sure your store address is correct and that you’ve limited selling to your country and location
    • Enable or disable tax calculation if needed
    • Enable or disable the use of coupon codes if needed
    • Pick the correct currency
  • On the Product tab:
    • Select the page where you want the shop to appear
    • Want users to leave reviews on your product? Activate that option here
    • On Inventory: Disable stock management unless you need it
  • On the Payments tab:
    • Pick an easy payment option, like cash on delivery or bank transfer
    • If needed, you can add more complex payment providers like PayPal
  • On the Accounts tab:
    • Allow guest checkout
    • Allow account creation if needed
    • Select the Privacy policy
    • Review the other options on this page carefully, you may need them
  • On the Emails tab:
    • Check the different email templates and activate the ones you want to use. For every email, change the text to match what you want to say
    • Scroll down to check the sender options
    • Also adapt the email template to fit your brand
  • Skip the Integrations tab
  • On the Advanced tab:
    • Map the essential pages for your shop, i.e. the cart, checkout, account page and terms and conditions. You can make these pages in WordPress:
      • Add the `[woocommerce_cart]` shortcode to the cart page
      • Add the `[woocommerce_checkout]` shortcode to the checkout page
      • Place the `[woocommerce_my_account]` shortcode to the account page

These are the settings that get you up-and-running quickly. WooCommerce is a solid piece of software with loads of options and it can be used to power tiny webshops selling one item to megastores carrying millions. Go over the settings to see if you need to set something that fits your goal.

Install Local SEO by Yoast SEO

The Local SEO plugin by Yoast is a great addition if you want your business to rank locally. It comes with a lot of cool options, like managing multiple locations, getting your correct business details to Google easily and creating an awesome map where customers can find your business.

One of the coolest options of the Local SEO plugin is the local store pickup option it adds to WooCommerce shops. As WooCommerce doesn’t offer this natively, the Local SEO plugin makes it much easier to offer this important option to your customers. Simply activate and customize it, that is all. It truly is a must-have addition!

WooCommerce local pickup settings
The Yoast Local SEO for WordPress plugin adds these options to WooCommerce

The same goes for the WooCommerce SEO plugin. This is optional, of course, but it is a great help if you want to get serious with WooCommerce. The plugin improves the product structured data WooCommerce generates, it cleans up the XML sitemap making it faster to load and it makes products stand out more on social media platforms by adding specific code.

Adding a shop to your theme 

You might use a WordPress theme that your developer built especially for you. Adding a WooCommerce store shouldn’t be too difficult. Often, it works out of the box or with limited edits. Look, you are not trying to build the world’s most beautiful restaurant website with a fully functioning online shop with all bells and whistles. You are looking for something quick and dirty to get you started.

A restaurants menu on display in their webshop
This is what your online store, displaying your menu’s, could look like

For most instances, you could simply add a special shop page to your site and accept the design it comes with. Or, you could override your own theme with a WooCommerce enabled restaurant/shop theme from the WordPress repository. Please see what works for you.

Payment options

Like you don’t have to have an astonishing design, for your shop, you don’t need to offer a gazillion payment options. Please pick the bare necessities. Simply offer contactless payment on the spot, or a low-cost payment method like we have in the Netherlands called Tikkie. This lets you easily send payment requests via a link that your customers can use to pay the invoice using their own bank. Big payment providers often charge big money and you want to save as much as you can, right? Plus, these can be a pain to implement and maintain.

WooCommerce payment options
Set up the payment options for your online store

Also, it might be a good idea to offer gift cards. In that case, you also need to turn on those settings in WooCommerce.

Add your products

Once you’ve set up a store for your restaurant, you can add products. Again, do this as you see fit. You might offer all dishes separately, but you can also offer complete menus. Or maybe you have a different idea on how you would go about this. There’s no wrong way, pick what works best for you.

Adding a product consists of giving it a strong product name, plus a description and images. You should also give the product a price. There are a lot of options here, but you probably won’t need most of them. Do take a look, though. To help you write great product texts that also do well SEO-wise, you can always have Yoast SEO take a look at them.

This image shows how to create a product in WooCommerce
How to add a new product to your online store

Publish your online store

After you’ve filled your store, it’s time to do a test run. Open your store, click all the buttons and make a test order. See if everything works. Check if all the order emails come in. Fulfil the order and celebrate! Now, if you haven’t run into too many errors, you should be good to go. Publish your store and communicate it to your customers. Hopefully the orders for your tasty food will come in quickly.

In WooCommerce, you can easily track the orders that come in and you can do all kinds of analysis to see how the money comes in. Click to your Dashboard to get an overview of what’s happening at the moment. There’s so much more you can do in WooCommerce, it’s silly. Read the WooCommerce documentation to see what else you can do to run and improve your shop. 

Communicate your new store

Now’s the time to start marketing your store. These are not exhaustive and you can probably think of a few good channels for your business. If nothing else, think about your social media and your email newsletters. Also, there might be a collection of other local restaurants that are in the same boat as you are. It might be a good idea to build a platform together?

Another important thing is your Google My Business account. Please update it with the latest information! Google is adding COVID-19/Coronacrisis management options as we speak. Restaurants can now pick special attributes if your restaurant is available for take out or delivery. This will show up in Google Maps. You can also use the Posts features in My Business to communicate with your customers.

Google's display of local restaurants
A new feature on Google’s search engine result page showing whether your restaurant offers takeout and/or delivery

WooCommerce and Local SEO help arrange local pickup

This post was meant to give you an idea of the steps you need to take to run a small-scale, WooCommerce-powered online store. Even a local shop, a restaurant or a cafe can run one just like it. The technology is there, and most of it is free to use. Of course, paying for a couple of premium plugins will greatly enhance the experience and save precious time as well. WooCommerce alone has a ton of purposely extensions for improving parts of a store for specific industries.

We hope you enjoy building your own online store. 

Stay safe!

The post Shops & restaurants: easy curbside pickup with WooCommerce and Local SEO appeared first on Yoast.

Yoast SEO 13.1: Schema.org structured data enhancements

Edwin Toonen

Yoast SEO 13.1 and WooCommerce SEO 12.6 are out today! In these two updated SEO plugins, you’ll find several fixes and enhancements, mostly focused at improving our Schema.org structured data implementation. In this post, you can learn more about the latest versions of Yoast SEO and WooCommerce SEO.

Yoast SEO 13.1

Back in Yoast SEO 11.0, we launched an innovative and expansive Schema.org implementation for Yoast SEO. For the first time ever, we can build a complete graph for a site and present it to a search engine on a silver platter. In subsequent releases, we fine-tuned the structured data implementation and we are continuously making improvements. You can find more technical detail on our implementation on Schema.org markup documentation.

In Yoast SEO 13.1, we’ve fixed a number of bugs and added a couple of enhancements in our Schema.org implementation. For one, we now set the Schema HowTo name and Article headline to the post title with a fallback to “No title”. In addition, we’ve added the inLanguage property to the Schema CreativeWork pieces. We try to determine the language of a specific piece of content in various ways, including the WordPress site language settings. This paves the way to handle a form of internationalization using Schema.org structured data.

WooCommerce SEO 12.6

Today, we’re also releasing WooCommerce SEO 12.6. This time, we’ve fixed a number of bugs and enhanced the Schema.org implementation. In WooCommerce SEO 12.5, we added the possibility to add a product identifier to your product, which makes it possible to output that number in the product Schema.org. In the 12.6 release, we’ve added some explanatory copy above the input fields for GTIN, ISBN et cetera to make this feature a little clearer.

At the end of this week, we’ll be raising the price of the Yoast WooCommerce SEO plugin. Are you serious about selling online? Get it today for only $49! That’ll save you some serious $$$. Don’t miss this chance…

Another enhancement to the structured data powers is the possibility to choose if you want to display the price in Schema.org structured data and OpenGraph with tax included. Simply check the box for the setting and you’re good to go.

WooCommerce SEO now lets you choose between tax or no tax for output in structured data

For bug fixes, we fixed a bug where the internal linking and additional keyphrase functionality went missing from the product edit page. Also, we fixed a bug where the meta description and Twitter and Facebook description could still contain HTML tags and redundant spaces.

Update your plugins

That’s it for today’s releases! We’ve enhanced both Yoast SEO and WooCommerce SEO, while also fixing a number of bugs. Please review the changes and update the plugins at your convenience. Thanks for using Yoast SEO!

The post Yoast SEO 13.1: Schema.org structured data enhancements appeared first on Yoast.

Search Console showing errors in your product structured data?

Edwin Toonen

Google’s recent run of enhancement reports in Search Console gives you lots of insights into how your site is performing in search. Sometimes, though, it gives you stuff to think about, like errors or improvements to make. For instance, if you run an online store, you’re bound to have come across this structured data error: “Either ‘offers’, ‘review’ or ‘aggregateRating’ should be specified.” There’s a very easy solution for this if you run WooCommerce and Yoast SEO: our WooCommerce SEO add-on.

The “Either ‘offers’, ‘review’ or ‘aggregateRating’ should be specified” error in Google Search Console 

The “Either ‘offers’, ‘review’ or ‘aggregateRating’ should be specified” happens for a lot of online stores. It means that Google misses several properties in your product schema implementation. By not offering these, your product listings will not reach their full potential in search. This way, Google has a hard time tying all the product-specific properties together to paint a full picture of your product. In some cases, though, they manage, but why let them figure it out? Fixing this becomes imperative if you want a better chance of standing out. 

Who doesn’t want a product listing like the one pictured below?

Valid product schema might lead to eye-popping rich results like this one from Reverb

Oftentimes, however, invalid or incomplete structured data might cripple your perfomance in search. Errors are all too common, like the one in the screenshot from Search Console below.

The “Either ‘offers’, ‘review’ or ‘aggregateRating’ should be specified” error is very common

Help is at hand: Yoast SEO & WooCommerce SEO

WooCommerce is huge in the WordPress world. According to W3Techs, 15% of all WordPress sites run an online shop on the WooCommerce platform. That’s amazing. We have a plugin that helps customers improve their online store: WooCommerce SEO. This addon ties neatly into Yoast SEO, including the big schema graph we build for every site. It also greatly improves the product schema output by WooCommerce. 

If your site runs on WooCommerce and Yoast SEO you need WooCommerce SEO. Besides all the cool behind-the-scenes improvements, it fixes that dreaded “Either ‘offers’, ‘review’ or ‘aggregateRating’ should be specified” error for you: automatically! It gives Google everything it needs to figure out your products are products and thus increases your chances of getting those important rich results.

Why you should fix this error

Google is increasingly betting on schema structured data to help understand the world. If your site offers search engines enough context about what’s on it, the rewards could be great: rich results. And for some types, visibility on other devices like smart speakers or visual assistants.

Getting your product schema right, means you can get these types of results. The one earlier in this article is from Reverb and shows a nicely formed product rich results, with breadcrumbs, product information, ratings and reviews, pricing details and an in-stock message. This is all powered by product schema. 

Reporting on the performance of products 

To help you track how your products are doing, Google recently added a Product enhancement report to Search Console. This report lets you know if your products are correctly structured and, therefore, eligible for rich results. This week, Google also announced that it will allow you to see the performance of your product in the search results. You can now find a new Product line in the Search Appearance section of the Search Performance section. 

Search Console now has a product results view in Search Appearance

This report shows exactly how well your products are doing: how many impressions did they have and how many clicks? This is invaluable data to improve your product listings. 

Fix the error and check your listings

Seeing the product schema error in Search Console? Using Yoast SEO and WooCommerce? Well, you’re in luck. The WooCommerce SEO add-on is the glue that ties the product schema structured data between those two platforms together. It fixes that dreaded error and gives you a better chance at getting your products noticed in Google!

The post Search Console showing errors in your product structured data? appeared first on Yoast.

WooCommerce 3.7 and Gutenberg 6.3 updates

Remkus de Vries

The past week was all about two big plugins releasing important updates. Both WooCommerce and Gutenberg got significant improvements. Gutenberg saw another accessibility improvement and WooCommerce now has even more integration with, well, Gutenberg ?. Let’s dive in and see what’s what!

WooCommerce introduces more Block Editor integration

WooCommerce 3.7 was released last week and it brings deeper integration with our new Block Editor. While WooCommerce already provided the option to use a Featured Category, Featured Product, and Best Selling Category blocks, for instance, this version added three more blocks:

  • Product Categories List block; this block allows you to show product categories in a list or dropdown.
  • Featured Category block; this block lets you select one or multiple categories to feature on your site, and it displays the category and a link to its category archive page to customers.
  • Products by Tag(s) block; this block gives you the option to feature a selection of products linked to a specific tag or set of tags.

Of course, the rest of the plugin also saw overall refinements. You can now, for example, find all WooCommerce Blocks more easily when you click on the plus symbol to create a new block by typing “WooCommerce”.  Read up on what these integrations look like in the WooCommerce 3.7 introduction post.

Gutenberg version 6.3

One of the areas where the Block editor still needs improvement is the accessibility of the editor. The block user interface introduces navigation from within the block itself, as well as from one block to another, which can be complex. This makes it very challenging for screen reader users to navigate the content of their posts. Gutenberg 6.3 fixes this with what they call a Navigation Mode. Or in their words:

To address that issue, we’re introducing the Navigation Mode. By default the editor is loaded in this mode, it allows you to move from block to block using a single Tab press. You can also use the arrow keys to navigate between blocks. Once you reach the block you want to edit, you can enter the Edit Mode by hitting the Enter key. The Escape key allows you to move back to the Navigation Mode.

Riad Benguella

This is a great start to make the editor more accessible for many different types of users. You can read more about why accessibility matters here.

As with the WooCommerce update mentioned above, this new Gutenberg release also comes with smaller improvements. Things like support for text alignments in table block columns, and border color support for the separator block. As usual, you can find out more about what’s new in Gutenberg 6.3 in their release post.

Bonus links

The post WooCommerce 3.7 and Gutenberg 6.3 updates appeared first on Yoast.

WooCommerce 3.6, AMP plugin update, WPGraphQL and WordPress news

Remkus de Vries

It’s time for another roundup, packed with updates. Today’s headlines: WooCommerce finally embracing the Gutenberg editor fully, AMP for WordPress delivering great improvements with their new update and an introduction to WPGraphQL. So much WordPress news to cover!

WooCommerce 3.6 Loves Gutenberg

WooCommerce saw an update that delivers much better integration with the new Block Editor. This update introduces blocks for Products by Category, Best Selling Products, Hand-picked Products, Newest Products, On Sale Products, Top-Rated Products, Products by Attribute and Featured Product. And I’ve got to say, having these blocks available is a huge improvement in this Gutenberg-powered era.

It’s also really good to see WooCommerce working hard on improving performance. That’s something we at Yoast are big fans of, and highly recommend all developers to have a strong focus on. You can learn more about WooCommerce 3.6 in their introductory post.

Big update for the AMP plugin

The AMP project aims to make the web faster. And that’s exactly what the new 1.1 release does. The WordPress AMP plugin saw some nice new features and bug fixes. I’m especially happy that the image rendering bug has been fixed.

WPGraphQL making strides!

If you haven’t yet heard of GraphQL, or its WordPress equivalent, WPGraphQL, I encourage you to check out this data query solution. It’s a very performant way to work with WordPress data.

With GraphQL, the client makes declarative queries, asking for the exact data needed, and in exactly what was asked for is given in response, nothing more. This allows the client to have control over their application and allows the GraphQL server to perform more efficiently by only fetching the resources requested.

WPGraphQL

They released a WPGraphQL integration plugin with ACF last week. This plugin makes working with custom data provided by ACF a very smooth experience, with a lot of potential.

WordPress and mental health

There’s a project growing inside the WordPress Community that deserves a bit more exposure: WP&UP. It aims to support and promote positive mental health within the WordPress community. From their website:

WP&UP recognizes that members of the WordPress community can potentially manifest mental health issues from a variety of pressures. The WP&UP Health Hubs are designed to provide holistic support for the individual.

WP&UP website

During WordCamp London, I met the team recently and learned more about their mission and goal. If mental health is (or should be) a focus of yours, do check out their website and see how they can help you.

WordPress 5.2 postponed for one week

Looks like the Release Candidate for WordPress 5.2 is going to be delayed for a week. And this invariably means the release itself is going to be postponed as well. So, what to do with all this extra time?! Well, you can start reading up on the Block Editor changes in WordPress 5.2 or a good summary of the new Fatal Error Recovery Mode in 5.2.

The post WooCommerce 3.6, AMP plugin update, WPGraphQL and WordPress news appeared first on Yoast.

PHP requirement for WordPress, WooCommerce dashboard and Gutenberg 5.4

Remkus de Vries

Today’s roundup is all about various upcoming updates across the WordPress ecosphere. From WordPress itself to Gutenberg, PHP, and WooCommerce. Let’s get started!

WordPress wants you to update your PHP

If you’ve been following my roundups, you may recall that WordPress is finally bumping its minimum PHP requirement in the upcoming WordPress 5.2 release. I usually don’t like to repeat myself, but in this case, I’ll make an exception. Partly, because there now is a post on WordPress.org by Aaron Jorbin. In it he says the following:

If your site is running on an unsupported version of PHP, the WordPress updater will not offer WordPress 5.2 to your site. If you attempt to update WordPress manually, that update will fail. To continue using the latest features of WordPress you must update to a newer version of PHP.

WordPress.org

More information about what this means for you, why you should want to upgrade anyway, and how to prepare can be found in the rest of the post. I highly encourage you to read it.

A new WooCommerce Dashboard is in the making

WooCommerce, the most popular e-commerce solution for WordPress, has shared some interesting news about a new feature. They’re going to completely overhaul the WooCommerce dashboard.

It will give store owners a quick overview of how their store is performing and the ability to customize the dashboard to their needs. Store owners can view charted data directly from the Dashboard via 14 different data points, and select any chart to load an associated report for deeper analysis.

With those 14 data points, store owners can track performance with statistics, analytics, and other reports

WooCommerce is bundling this new dashboard in a feature plugin which you can download for testing. Read all about it in their announcement post.

Gutenberg 5.4

Last but not least, let’s look at the progress in Gutenberg. From the Make WordPress Core blog:

Foundational work and initial UI explorations to implement the block-based widgets screen are on-going. In the meantime, the contributors worked on a number of bug fixes and improvements. All the bug-fixes will be included in the next beta of WordPress 5.2.

Meaning, even though the features added up until Gutenberg 5.3 will be added to WordPress 5.2, bug-fixes found to those features are still being included to the betas.

If you’d like to read more about how Gutenberg 5.4 now supports vertical alignment for the columns block – and more – you can do so here.

The post PHP requirement for WordPress, WooCommerce dashboard and Gutenberg 5.4 appeared first on Yoast.

New roles in the WordPress project, blocks and WordPress 5.1

Remkus de Vries

Today’s roundup is a nice collection of interesting things that happened in the WordPress Community in the last couple of weeks. There’s some very exciting news about expanding the WordPress leadership team and I’ll discuss a couple of new features of the next version of WordPress.

Expanding WordPress Leadership

Matt Mullenweg published a post this week on the Make WordPress site where he announced two new roles to be added to the WordPress Leadership team. The first new role is that of Executive Director and will be taken on by Josepha Haden. The second role is that of Marketing & Communications Lead and our very own Joost de Valk will be taking on that role. This is what Joost had to say about it:

WordPress is paving the cowpaths for the web with projects like Gutenberg, I’m looking forward to leading marketing & comms for WordPress and working with everybody to tell the story of this awesome project and community.

Both new roles combined mark a great step forward for the growth of the WordPress Project as a whole.

Genesis 2.8 introduces Gutenberg based onboarding feature

Genesis, the leading theme framework, has introduced an onboarding feature that is based on Gutenberg. Basically, a set of preformatted and configured blocks (called Block Templates) are made available when you activate a Genesis Child Theme. This is what they had to say about it in the Genesis 2.8 announcement post:

Genesis 2.8 includes a new onboarding feature theme that authors can use to define which demo content is loaded when a user installs a new theme. One-Click Demo Install makes it easy for theme authors to load in plugins and perfectly-designed Gutenberg blocks onto the home page of a new site using that theme.

 

The Gutenberg project may have had some people doubting over the need for a new editor, but integrations like this – alongside an improved editing experience – that make it awesome. And this is only the beginning: it’s one of the first types of integrations like this.

Block plugins

In fact, there are already a couple of really interesting plugins out there that provide for extra custom blocks. We, of course, have our own Yoast SEO How-To and FAQ block (and there are many more on their way), but here are six interesting block providing plugins you should definitely check out:

As I’ve mentioned in a previous roundup, WordPress.org has a dedicated view for plugins that provide blocks as a library or as an enhancement to their already existing core functionality. You should definitely check that out if you haven’t already.

What next for WordPress 5.1

The next WordPress release is called 5.1 and is scheduled for the 21st of February 2019. The work for 5.1 began long before the launch of WordPress 5.0 and therefore it’ll have two very interesting features:

Fatal Error Protection

WordPress 5.1 will introduce a so-called WSOD protection (white-screen-of-death protection). This feature will recognize when a fatal error occurs, and which plugin or theme is causing it. With this new feature, you’ll still be able to access the WordPress Dashboard and the respective plugin or theme will be paused. This allows users to still log in to their site so that they can at least temporarily fix the problem.

PHP upgrade notice

If your site is still running on an old and insecure version of PHP, WordPress 5.1 will let you know after the upgrade. The lowest PHP version still receiving security updates is currently 7.1. This means all the PHP 5.x versions are outdated and insecure and the PHP upgrade notice is intended to get people to have their hosting companies change the PHP version. With the latest PHP versions seriously boosting your performance as well, trust me, you want to be on the latest and greatest, as it will make your site faster.

You can read more about these features in Felix Arntz’s introduction post on the Make WordPress Core blog. And that’s it for this roundup. What are you most excited about?

The post New roles in the WordPress project, blocks and WordPress 5.1 appeared first on Yoast.

eCommerce usability: the ultimate guide

Michiel Heijmans

Usability is an integral part of holistic SEO. It influences factors such as bounce rate, time on page and conversion rate, to name a few, and many of these metrics affect your website’s SEO. Optimizing usability is essential for all sites, but even more so for eCommerce sites.

User testing is one way to optimize your eCommerce shop — read our introduction to user testing to get started –, but a lot can be done just by looking at best practice, comparing that with your site and making improvements. This ultimate guide to eCommerce websites takes you through that testing process and looks at everything you need to address to give your visitors the best experience possible.

In short, this usability guide for online shops will tell you all about:

That’ll cover most, if not all of your visitors’ on-site shopping experience. Let’s get started!

Online store homepage usability 101

Have you ever looked closely at the homepage of your online shop? Chances are you just went with the WooCommerce theme that your designer presented and implemented the available options. While most of these themes are nicely designed and set up with the user in mind, that might not be best for your particular target audience.

Out of the box, a stock WooCommerce theme is hardly ever a good fit for your site

Focus on your target audience

Before setting up a design, you need to understand the needs of your target audience. You need to investigate the search intent. Are your potential customers looking for the best price, or do they want to read a dozen reviews before buying? Are there cultural differences you need to take into account? These things determine the setup and layout of your shop’s homepage. Do you need to highlight sale items? Are you addressing a particular niche? If so, you’ll need to make that clear from the start.

If one of the pillars of your mission is to provide the best price possible, the sale banner should probably be the most prominent item on your homepage. But, if you are selling high-quality products that people are willing to pay a bit more for, sentiment and emotion should be your focus. You could use larger images and focus on core product features and benefits.

Homepage call-to-action

The job of your homepage is to guide the visitor to your products. The homepage of your online store shouldn’t necessarily be set up with SEO in mind but should focus on the user instead. That also means you’ll have to create a killer call-to-action on that homepage. Not having a great CTA is one of the most common SEO mistakes. Here are some useful tips for setting up that call-to-action:

  • Make sure it stands out from the design. Use a different color or button shape.
  • Make sure it looks like a button. I wouldn’t recommend so-called ghost buttons.
  • Use active text, so your button shouldn’t say ‘Submit’ but rather a variation of ‘buy our stuff’.
  • Use plenty of whitespace around it, or reduce clutter.
  • Using a hero image is popular these days and for good reason: it sets a mood.
  • Don’t use sliders, period.

After welcoming the visitor to your website, you can guide them to where you make your money: the product pages. Before we address these, let’s look at how to optimize internal search, and category/landing pages.

Internal search is the most important navigational option for your online store, and you should optimize it to the max. You’ll have noticed that the larger brands and online stores all focus a lot on their internal search. The reason is simple: if you can find the product you are looking for, you can buy it!

As well as optimizing that internal search option, you need to make sure that your search result pages look focused and give a great overview. You need to show the price and even an ‘Add to Cart’ button next to the product’s name and image, and a comparison option will come in handy if, for example, you have a shop selling Bluetooth speakers.

Target has a great internal search option, plus awesome landing pages

Filter options

After the search query, online clothing shops will allow for filtering by size, gender, color – the lot. Filtering options like these, or sorting by price or availability, will help your visitor to find the product they want as quickly as possible. To read more about this and see some examples, I recommend my post Enhance online shopping with eCommerce filters.

Category page optimization

Your category pages could be even more important than your product pages because these are the main entry points for customers. In addition, these give customers the option to choose and compare, much like your internal search result pages. Your shop category page should be considered a regular page for SEO, but is so much more important when it comes to usability.

Lego.com doesn’t just have a theme-based product category page, but also an About page featuring in-depth content about the chosen theme

Here are some of the things you need to keep in mind:

  • Make sure the page has a valuable piece of content — preferrably at the top of the page. It’s the glue that holds your products together and one of the reasons the potential buyer ended up here. Even if they scroll right to the product listings, they’ll appreciate the extra information (and Google certainly does).
  • List all other categories as well, or at least make them accessible via a drop-down, especially when you have a lot of categories like Amazon does. It makes more sense to make them available rather than listing them all. But if your shop only has ten categories, list them, for example in a sidebar or footer menu.
  • Product listings need a proper call-to-action, so don’t hide it. Add a button.
  • The product image in the listing will help convince the visitor to click, buy or compare an item. Use good quality, stunning images that display the product well.
  • Optimize the product title, for example by including the SKU as well. As well as having SEO benefits, people searching for specific products – like that one particular Lego set they are looking for – will thank you for it.
  • State whether a product is available. Nothing is more disappointing than finally finding the product you want only to find out it’s sold out when you get to the shopping cart. Add a notice to the category page listing instead.

You should also optimize your landing pages.

Landing page optimization

A landing page is a page where your visitors end up when they follow a link from outside the site, for example search engines or social media. Landing pages on your online shop should be optimized to evoke a particular reaction from the visitor, such as buying a specific product.

Focus on one product or product bundle and optimize that page to guide your visitor to the purchase — in other words, welcome them. Make sure the visitor feels safe paying you by setting up HTTPS on your site and maybe adding trust signals. Add social proof in the form of testimonials, so your visitor will understand why your product is so good, and why they need it.

We strongly recommend using headings and images to deliver your message as these help a lot, particularly for buyers scanning your landing page. Make sure these deliver the right message to your visitors.

To find out more about landing pages, see our article Landing pages and why they matter.

A special hats off to Apple’s epic Airpods Pro storytelling landing page

And so, on to product pages.

Product page optimization

Generally speaking, make your product page as usable as possible. Product pages need to be optimized for SEO, by using Schema.org data, for instance. If your shop runs on WooCommerce, our WooCommerce SEO plugin helps with a lot of these things. Read more about product pages in our article on product page SEO. But when your visitor arrives on that page, you need to convince them to buy.

Best practices

Let’s go over some best practices for product pages:

  • Create scarcity: if you have only a limited number of products available, that will encourage visitors to buy. But be honest about the numbers.
  • Add ratings and reviews. Social proof helps in comparisons and builds trust.
  • In stock or not? Be clear about that, as it will help manage visitor expectations.
  • Add to cart AND add to wish list. People might not want to purchase right away for budget or other reasons.
  • Multiple product images. Make up for the fact that the customer can’t pick up the product and look at it from all angles by adding more than one image.
  • Offer product bundles. Buy this and that, as these products belong together. You might offer a discount for that bundle as a sales promotion.
  • Free shipping, or free shipping on any orders over a certain amount. It’s a nice gesture and yet another reason to buy from you.
  • Related products, people who bought this product also bought that product, etc. If you show them more products, they might spend more money.
  • Show people using the product (as a part of your product images). People will find it easier to relate to and see why they need your product.

Call-to-action

Just like your homepage, your product page needs a strong call-to-action. In most cases that will be the Add to Cart button. Limit all distractions, make the text actionable, and use the right color. And if possible, add a review somewhere near that button. There’s more on calls-to-action here, and more on button design here.

Can’t miss that CTA, right?

There are more details and real-life examples in our product page UX article, and there are more insights on creating trust in this article: 7 ways to increase sales by creating trust. Our post on testimonials and reviews offers some great insights, and you should also read our post on The psychology of discounts.

After your product page, customers proceed to your shopping cart, which is part of your checkout process.

Checkout page optimization

Shopping cart abandonment

There are many reasons why people might leave your website without buying anything. They might even put products into their cart, only to abandon it. In our post on Shopping cart abandonment, we go over what might lead to this, like:

  • “I wanted to do more research.”
  • “I found it cheaper elsewhere.”
  • “I wanted to wait for it to go on sale.”

For mobile carts, there are even more reasons, like loading speed and poor design. Investigating this will make your online shop better and can increase your sales.

You are about to close the deal: the customer wants to buy your product, so let’s gently guide them to our payment page. The first thing we need is to tell them where we are in the checkout process, so be sure to add a progress bar.

At the start of the checkout process, we give the customer an overview of the products they want to buy. This is, of course, the same as the cart overview. There are a couple of elements that are required here:

  • Product image, even a small one will confirm to the soon-to-be customer that the right product is in the cart.
  • Prices, not just the price of one item, but also the number of items and the total price.
  • Additional costs, like shipping costs. There should be no extra surprise costs after the cart overview.
  • Payment options, just to let the customer know how they can pay.
  • Security signs, like the green padlock and address bar for SSL sites, plus perhaps extra logos like Trustpilot right below the cart overview.

Guest purchase

You should also make sure a guest purchase is possible. Having to register for a one-time sale is a deal-breaker for me.

Short forms

If you need to ask for more than just an email address, make sure to make the form as short as possible. Think about useful things like a checkbox to confirm that the delivery and invoice address are the same, instead of making customers fill in their details twice.

Payment

Make payment easy by choosing a trusted payment provider and offering convenient payment options. These will vary depending on the shop and its customer base.

Finally, after that optimized shopping process, a happy customer will leave your online shop. Now make sure you keep that customer happy. There are some extra things you can do to make that happen and you’ll find more tips in our article on checkout page UX!

Optimize site speed

Today, every shopper expects sites to load quickly. It doesn’t make sense to wait age for one site to load while the competitor loads in just a couple of seconds. Seconds truly count here. Google hasn’t deemed site speed a ranking factor for nothing, you know. Do everything you can to speed up those pages! We have several posts on site speed, with site speed tools and more on how to check — and think about — site speed.

Conclusion: eCommerce usability is a trade of its own

Don’t trust your theme or eCommerce platform to fill in the blanks for you. Put some real effort into optimizing the usability of your eCommerce website. You’ll find that a better user experience will bring the SEO and conversion of your online store to the next level.

Read more: WordPress SEO: The definitive guide to higher rankings for WordPress sites »

The post eCommerce usability: the ultimate guide appeared first on Yoast.

The Parrot Place

adminDbO

This site is for a thriving wife-and-husband business in Kerikeri, http://theparrotplace.co.nz, a bird park and breeding centre also selling pet products online.

Their WordPress-driven site had been using an outdated e-commerce system. Urban Legend converted it to the now-standard WooCommerce, which streamlines product management for the site owner, and vastly improves site useability for visitors.

We designed and coded the new theme, which went live in June 2016, based on the business’ colour motifs and logo.

Product page SEO: 5 things to improve

Michiel Heijmans

Besides optimizing your product pages for user experience, you want to make sure these pages are as good as possible for SEO as well. Obviously, you might think. In this post, we’ll show you a couple less obvious — at least for most website owners — elements of product page SEO and tell you why it’s so important to take these things into account.

1. The basics of product page SEO

A product page on an e-commerce site or online store is a page as well, so all the SEO things that matter for your content page, go for product pages as well. We could go even more into detail when discussing product page SEO, but for now, this will be your basic optimization. If you offer less than exciting products on your site, you may also want to read our post on SEO for boring products. But first:

  • Add a great title, focusing on the product name — including a manufacturer name, if applicable. If your product is, for instance, a small part of a larger machine (screw, tube), include the SKU as well. People might search that specific.
  • Add a proper, unique description of the product. Most of the times, that isn’t the description the manufacturer shipped with the product. That description might be used on hundreds of websites, only to be duplicate content and a sign of low quality for your website (to Google). Prevent duplicate content due to manufacturer descriptions at all times. If all your content (content pages, category pages, blog) is unique, and the content used on thousands of product pages isn’t, most of your site isn’t. Think about that and don’t take that lightly. Google’s collection of black and white animals is waiting for you. Create unique content.
  • Add an inviting meta description. Usually, a product page contains a lot of general information as well, varying from dimensions to terms of service. To avoid Google using that unrelated text in a meta description, you want to add a meta description to your product pages, even more than to content pages. We often see that meta descriptions are added in some kind of templated way, where just the product name is changed per product. That’s ok to start with, but ideally, all meta descriptions are unique.
  • Pick a great, easy to remember URL for your product pages.
  • Add high-quality, well-optimized images with proper ALT text. Include the product name in at least the main product image. This will help you do better in visual search. Also, don’t forget video — if applicable.
  • Add all the things mentioned in our Product Page UX post. UX is an important part of holistic SEO.

2. Add structured data for your products and get rich results

Structured data is an essential part of a modern SEO strategy and this also goes for product pages. There is specific Product Schema that helps you get highlighted search results, so-called rich results. In addition, you’d better mark up the reviews of your customers with Review structured data. All of this will make your product page stand out and increase the chance a potential customers clicks on your link in the search results.

The importance of this for your product page SEO is that the major search engines came up with this markup, not the W3C consortium. Google, Bing, Yahoo and Yandex agreed upon this markup, so they could identify product pages and all the product elements and characteristics more easily. Why would they want that? So they could a) index these pages a lot better and b) show you rich snippets like this:

That’s a lot of info in the search results, right?

The Product schema tells the search engine more about the product. It could include characteristics like product description, manufacturer, brand, name, dimensions, and color, but also the SKU we mentioned earlier. The Offer schema includes more information on price and availability, like currency and stock. It can even include something called priceValidUntil to let search engines know that the price offer is for a limited time only.

Schema.org has a lot of options, but only a limited set of properties are supported by search engines. For instance, see Google’s page on product page structured data to see what that search engines expects in your code and what it can do with it.

So this is why you want to add Schema.org data for product page SEO: easier to recognize for Google, and it makes sure to include important extra’s in Google already. If you have a WooCommerce shop, our WooCommerce SEO plugin takes care of a lot of this stuff behind the scenes.

Another reason to add it is to manage expectations from customers. Your visitor knows your price up front and knows that the product is in stock. Your potential client can even see how well-regarded your product or service is by looking at those beautiful stars in search. How’s that for user experience! And that brings us to number three.

3. Add real reviews

According to Pew Research, more than 80% of US consumers check reviews before buying anything online. Although not everyone trusts online reviews – research says they are probably right -, they can be very helpful. And if you are a local company online reviews are even more important. Most reviews tend to be extremely positive, but it might just be the negative reviews that give a better sense of what is going on with a company or product.

Leading Dutch online store Coolblue gives consumers a lot of options to make relevant and useful reviews of the products they buy

Try to get your customers to leave reviews and show them on your product page. Do you get negative reviews? Contact the writer, find out what’s wrong and try to mitigate the situation. Maybe they can turn their negative reviews into a positive one. And you’ve gained a great new insight into your work. Here’s how to grow your business with ratings and reviews. In addition, getting awesome testimonials is another way of showing your business means business.

Be sure to mark up your reviews and ratings with Review and Rating schema so search engines can pick them up and show rich results in the search results pages.

4. Make your product page lightning fast

People don’t like to wait. Waiting for a page to load costs money. In today’s mobile-focused world, every second counts. Even more so if you spent a lot of time and energy trying to get that potential customer to your product page in the first place. People expect a fast page and Google does so too. Of course, there’s a lot you can do. Here’s a small collection of posts that’ll you get started:

5. User test your product page

Looking at numbers in Google Analytics, Search Console or other analytical tools can give you a lot of insights into how people find and interact with your page. These insights might help you make changes to improve the performance of the page even more. While it’s essential to keep an eye on your product pages, there’s another way of ensuring the page is as awesome as it can be: user testing.

In their 2018 Product Page UX research project, the Baymard Institute found that “the average site has 24 structural UX issues on its product pages, and only 18% of the 60 top-grossing US and European e-commerce sites have a “good” or “acceptable” product page UX performance. The vast majority of benchmarked sites — 82% — have a “poor” or “mediocre” performance. And no sites have a “state of the art” product page UX performance.” You can read that fascinating study on their Product Page UX site.

The Baymard report has loads of insights into the most commons errors seen on product pages

There are loads of issues to check out, from terrible use of images, including non—functioning galleries to bad handling of out of stock products. It also seems that many sites fail to provide accurate shipping information and return information, which leads to trust issues – see the bonus item next in this article.

While you compare your product pages to external user research, don’t forget to do your own user testing! Doing proper research will give you eye-opening results that you probably wouldn’t have found yourself.

Bonus: Build trust and show people you are for real

Getting a stranger to buy something on your site revolves a lot about trust. Someone needs to know you are for real before handing you their hard-earned money, right? Google puts a lot of emphasis on the element of trust — it’s all over their famous Search Quality Raters Guidelines. The search engine tries to evaluate trust and expertise by looking at stuff like online reviews, the accolade a site or its authors receive, et cetera.

One of the most important things to come out of that is that you should really have your About us and Customer service pages in order. So be sure that people can easily find your contact information, plus information about returns and shipping, payment, privacy et cetera. Don’t forget!

TL;DR: Product page SEO

If you’re serious about optimizing your product page, you shouldn’t focus on the regular SEO and user experience alone. You’ll have to dig a little deeper into the other aspects of the product page on your online store. For instance, add Product and Offer Schema, so Google can easily index all the details about your product and show these as rich results in search result pages. Make your product pages load super fast, add user reviews and try to enhance the trustworthiness. Don’t forget to test everything you do!

The post Product page SEO: 5 things to improve appeared first on Yoast.