WooCommerce and Gutenberg – Great stuff ahead!

WooCommerce and Gutenberg.. What will happen when Gutenberg Editor gets introduced to your WooCommerce site in WordPress 5.0? Will it be Armageddon and will all product fields below the description and title field break? Do you need to deactivate Gutenberg just to keep your ecommerce business up and running?

What is Gutenberg?

Gutenberg is the new WordPress Editor. We wrote about it before at the beginning of this year actually. It will allow you to create content for posts, pages and custom post types just like WooCommerce Products using blocks. Here is a screenshot of what you see looking for blocks:

Gutenberg Blocks

 

And here one with some text added:

Text Block

Think of it as some of the Page Builders out there like Visual Composer, Beaver Builder or Divi. What is more, it will also make these options available in the customizer and perhaps frontend in the future as well.

Custom Fields and Gutenberg

As all is still under development it tends to be foggy sometimes and a lot of developers and end users are freaking out about it as it might break the way meta boxes / custom fields are used now. WooCommerce relies heavily on custom fields to add product data. And these fields may not work properly, or be moved to the new sidebar and so on. When you currently run the Gutenberg plugin to check you see it in action on a product page the WooCommerce custom fields are below it.

WooCommerce Custom Fields

But it is going to be way more integrated. Either they will be show below the block in a different way, go to the sidebar or they are going to come up with another solution.

Product Blocks

I am all for it and the sneak preview WooCommerce has shown looks very promising. And WooCommerce is working on product blocks already in their repo using a separate branch (code to be merged once done).

I installed the product blocks branch on my local WooCommerce Gutenberg Laravel Valet site and I can already see we can add a product block with ease inside a post:

Product Search Inside Woo Block

I just cannot search for my existing dummy products yet.  There seems to be a 404 issue

https://woo-guteberg.dev/index.php?rest_route=/wc/v2/products/?search=v

Here the no products found message:

Product Block Search

So I can’t go and add a product yet, but I can see we are closer than I thought and that is nice to see.

It is work in progress and perhaps my setup needs some REST API changes..? But the WooCommerce REST API is turned on though..

WooCommerce REST API

 

Well, that is something to try another time. Just like add products in x numbers and columns as Woo demoed. That I seem to not be able to do with this test branch yet.

The Future of WooCommerce with Gutenberg

I must say I am really exciting. I always found most page builder lacking a lot. Especially in the WooCommerce field. I want to be able to change the product page layout around. I want to be able to decide where the

  • product gallery,
  • description
  • cart button,
  • price and
  • other tabs with data

 

will be added. And I am positive that we will. Do see great options for the category or shop page in progress already. Rows and columns can be decided and hopefully thumbnail sizes in the future too. As for product page changes, well I expect to be able to move the mentioned elements around and WooCommerce did mention these as possibilities as well.

I expect to see way more in the upcoming weeks and months! Can’t say I am too worried. Big changes yes, but changes for the better to keep WordPress ahead of the game and compete with the likes of Shopify and Magento. And for WordPress to show others like Wix, Squarespace, Weebly and so on who’s boss. Exciting times!

Boost Sales with Algolia Search

Let’s face it, WordPress built-in search kind of blows. You can improve search and boost sales with Algolia Search. It will upgrade search to site wide search including products and offers suggestions! And it really easy to get going.

Improving WordPress Search

Visitors as we know can be an impatient bunch. So if we allow them to find what they need faster they are more likely to buy. Also, if search provides suggestions on what is available he or she might also go to a product though he was searching for blog content he saw earlier.

Unfortunately WordPress search out of the box sucks. Even a plugin like Better Search does not quite cut it. Sure it searches not just post, but other post types as well such as pages, but still it does not suggest other possible content, nor is it really fast.

Algolia Search to the rescue

Lighting fast search with search suggestions Google style  can now all be done with the power of Algolia Search. Algolia Search is used heavily in the Laravel community and at Laracasts.com and with good reason.

Algolia Search

It is simply an amazing search integration. This is what is has on offer:

  • site-wide search
  • content suggestions while typing
  • suggests other options when the customer misspells something*

*Here example of misspelling where correct search term is suggested:

Misspelling and suggestions

And while you could integrate Google Search this is way prettier as in really integrates well. Just test it on our site. On typing suggestions popup in a dropdown from where a customer can click on a link. Each suggestion is also displayed with a small thumbnail based on the featured image.

Better Conversion and Lower Bounce Rate

All these features will prove that you can boost sales with Algolia Search. It will suggest possible products to buy and it will show these directly while searching. That is pretty amazing isn’t it. Besides a sales boost it is also just a general retention boost. It will lower your bounce rate as visitors will with ease be able to find follow up content, products and services to look at.

Pricing

Let me just quote what they mentioned on the plugin description page here:

Algolia offers its Search as a Service provider on a incremental payment program, including a free Community Plan which includes 10,000 records & 100,000 indexing operations per month.
Beyond that, plans start at $35/month.

So you can stay on the free community plan post registration – needed for key – as long as you do not pass 10,000 records & 10,000 indexing operations per month. Indexing wise you should not have issues with that anytime soon on most sites and neither should you record wise.

We have had 2,452 records and 3,311 indexing operations so far with with 150+ post and close to 30 pages. Also during the trial the sky’s the limit really.

Setup

First of all you need to install their plugin. That is easy as always.

Search by Algolia – Instant & Relevant results

Next you will need to register to get your

  • application id,
  • search-only api key and
  • admin api key

and get your trial up and running. The plugin will guide you with this.

Algolia Settings

Autocomplete

Then you need to choose the content you would like to be part of the searches and allow Algolia to index it under autocomplete and activate this. This will take some time as in will need to index and store it at Algolia for lightning fast future searches and suggestions.

Algolia Auto Complete

Search Page Choice

On Search page you can choose to use WordPress Search Page or the Algolia Search page:

Search Page and Algolia

This really depends on your preference. We are testing with at the moment.

 

Algolia Dashboard

Once you are setup you can keep track of indexing, searches done and much much more in their Dashboard.

Algolia Dashboard

I like the design and UI in general. It is easy to see what is going on. Do think I won’t be needing to check things here that much, but it is nice to have when search starts getting used a lot.

Rolling your Own

If you want to run it all for free and under your control you can clone the repo and roll your own on your own server. Just to to the repository at Github and get your own copy. Then install in on the same web server or a separate on, and integrate it with your site. Doing this all by yourself will require more technical knowhow and more server power of course, but you do keep all the data under your control