Photo by Matthew Henry from Burst
WordPress

Using Gutenberg editor to list your products directly in a post

Today I am going to talk to you about Gutenberg Editor for WordPress and one specific feature we found particularly useful for our visual arts store.

We have decided to set up our website to be able to sell products with our designs printed on them directly. Previously we were using third-part Print-On-Demand platforms that are well established in the market. I have talked about our reasons for setting up our own website and ecommerce shop in my previous post.

Having gone though the main steps of setting up our website on WordPress we wanted to create a visually appealing gallery for our visitors. For that we used the minimalist Fukasawa WordPress Theme, which is also free.

The theme is fully integrated with WooCommerce, which is the ecommerce platform we have decided to use. The online shop worked seamlessly with the theme with only minor changes we were able to add with a few additional lines of CSS code.

To set up the gallery on the homepage we simply followed this YouTube video with only minor changes for our specific preferences in style of the website.

The difficulty came when we wanted to direct the visitor from the main image of a painting on the homepage directly to the shop page showing a selection of products relevant to this painting.

One possible solution was to create an image gallery using the standard editor and add a custom URL to each image in the gallery. This was not the option that was available in the standard image settings, but was easily fixed using a free “Gallery Custom Links” plug in.

However, we were not entirely happy with this solution, because while the gallery of product images looked very nice on the page, it created an extra step for the potential customer. What more – this step was completely unnecessary. What was really needed was a way of inserting the products directly into the post such that the customer had the following route through the site:

  1. Come to the homepage
  2. Select the image
  3. Clock into the main image
  4. Get redirected into the gallery of products featuring the selected image
  5. Add the product to the card directly from this page or
  6. Select the product to read more about it or pick the desired variant if more than one size or configuration is available.

And this is where the new Gutenberg Editor came in. This editor utilises a new block layout for the posts and WooCommerce has released a WooCommerce Blocks plug in to work alongside the Gutenberg Editor. This solved our issue entirely.

There are many reasons to be cautious with the new technologies. However, we decided to play tough more through and implemented the changes directly on our website. (We only had 5 posts in at this time, which were all backed up on a hard drive, so not much risk really!)

However, for those of you who have been working on your website for some period of time and have something to loose should the entire construction go down and burn, we would advise creating a backup copy of your website and implementing the changes on that copy rather on the actual website.

 The following steps allowed us to achieve the desired customer experience:

  1. First we needed to make sure our WordPress installation was Gutenberg compatible, which means it should be later then version 5.0.
  2. Install and activate Gutenberg Editor Pugin
  3. Once Gutenberg was activated we de-activated all other editors plugins (we didn’t delete them just in case this whole idea turns sour)
  4. Install WooCommerce Blocks Plug in and activate it
  5. Now that the infrastructure is in please, head to the post tab and create a new post (Press “Add New” on the post page in the WordPress Development page)
  6. Type in the post title
  7. Press the plus sign on the top left hand corner of the next block where the icons will appear for the various blocks available – pick the icon that offers to add products to the page
  8. Select the products you want to have displayed on the page and press “Done” at the bottom of the block
  9. The images will appear with prices and the “Add to Cart” button ready t be published.
  10. Press the settings button in the top panel of the editor to add tags, select category and select the cover image for the post on the right hand side panel.
  11. When you feel the post is ready to be published – press “publish”. Gutenberg Editor makes  sure that you are sure about being ready to publish the post. This feature can be disabled in the settings (which are the three vertical dots also in the top editor panel)

So here you are – go ahead and check what the post looks like on your www.soapsandroses.com gallery home page. Do feel free to leave us a comment if it worked or not and if there is anything else you might be struggling with for your WordPress website and we’ll try to dig up an answer for your problem.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.