Last updated - May 20, 2020
One of the best factors of WordPress is its capability to provide easy-to-use interface for users of any skill level; technical and non-technical folks. Now, with Gutenberg Block Editor, WordPress has become even more user-friendly and accessible enabling creation of pages through ‘drag and drop’ of content blocks – also called the WooCommerce Blocks. With these blocks you do not have to write shortcodes or edit existing lines of code to achieve a certain format or look on your page. With WooCommerce Blocks you can select and display products, categories, filters, and much more with a few clicks.
The entire editing experience has become flexible. These content blocks are a great tool to provide engaging content where you can add blocks and within these blocks there are more options to either add multimedia, static images, text, and more.
More about WooCommerce Blocks
When you open the editor, you can place the blocks anywhere. Simply take your cursor to the position on the page where you would like to edit, and then click the ‘+’ symbol that in the top left corner. Upon clicking the plus symbol, a menu will open displaying all available blocks.
Short Cut Key: To quickly add blocks into the content, use ‘/’ keyboard shortcut. This will show you the available WooCommerce blocks to you. After choosing the block, you can click on it and it will be added to your page that will show you more options for that particular block.
Product Blocks
The product blocks, as the name implies, allow you to display products inside page and post content. With this block, you can even link your products in a blog post, create custom pages, and display your latest products on a landing page.
Featured Product Block
This block is where you can highlight a single product and is customizable. You can add a button and show the price with the product title; all the necessary information to encourage purchases. These Featured Product Block on your landing pages is a great way to grab users’ attention and entice them to make a buy. You can also directly incorporate that into your blog post as a visual product link.
Moreover, there are plenty of settings for the overlay as well, that include image focal point, background opacity, overlay color, and background positioning.
All Products Block
This page is where all your items/products are displayed. The All Products Block is useful when you want to add additional content like text, images, videos, and more. So not only your products are on display giving a nice visual, but with important details regarding the products, your page becomes an online catalog – which was its purpose to begin with.
All Products Block include two important things
- Layout Settings
- Content Settings
Layout Setting:
- Settings the number of columns and rows in your page and customizing the product grid layout.
- Alignment of buttons – setting them below the content or aligning them.
Content Setting:
- Order products through the default order for products based on price, ratings, sales, or latest.
- Edit the information that is displayed for the products which includes – adding of sales badge, including description, removing reviews and comments, and more.
- Show the sorting dropdown.
Filter Blocks
In any product page should have a great search function with the assistance of filters. Otherwise, you might lose your customers when they have to manually search for the right item amongst the many displayed. Not only will this make it time-consuming but also useless for them to consider your brand up-to-the-mark.
So for this, these filter blocks when combined with the All Products Block allow site visitors to do effective and precise product search. Whenever a user selects a filter, the products are updated according to the criteria set by the user.
There are three filter blocks that are available in WooCommerce Blocks.
- Filter by price; min and max
- Filter by attributes; color, size, etc
- Show selected filters on the side
Hand-Picked Products Block
This particular block allows you to hand-pick the items you want to display. Let us assume you have a blog post to write, and it follows a certain theme, like Halloween Costumes. What you can do is you could display specific products that best suit Halloween costume idea directly inside your blog post. Once the block is added, you have option to either select from a list of products or manually search for the exact one you want.
Options for Hand-Picked Products Block include:
- Number of columns; you can choose up to six
- Align buttons; set them below content or align them
- Show or hide the product title, product rating, price, and add to the cart button
Review Blocks
Reviews are important when you are dealing with a commerce business, as reviews show for the authenticity of the product, and other potential buyers trust these reviews more than the product claims. So make sure you provide this block for each product to increase their trust in your site and the products you have to offer.
Again, you have the liberty to display this blog anywhere; at the home page, landing page or in a separate page dedicated to testimonials and reviews.
Review Block options include:
- Display or hide the product title or rating, reviewer name, review date, review content, and image (of the product or the reviewer’s)
- You can allow users to order by highest rating, lowest rating and most recent items
- Set starting number of reviews to display
- Give users the option to ‘load more’ reviews
Reviews by Product and Category Blocks
They function the same as the All Reviews Block but give you an additional product or category to select and narrow down the reviews for your selection only. This can help your own blog post where you are promoting a certain category and want to include the list of its product reviews.
Summing Up
With WooCommerce Blocks you can take your content marketing to another level, and the best part is, that you do not need experts to do that for you. With these blocks, anyone can use WordPress to their advantage; add media, content, customized pages, and blog posts.
Your online store with the help of these blocks is given a design and layout that is flexible and easily changeable. If you are seeking professional help, find some expert WooCommerce developers and designers to help you out. Also, you can reach out to this custom software development company in Houston to make your online store a remarkable storefront.
