Create Your Online Store Using Gutenberg Product Blocks for WooCommerce - WPXPO

Create Your Online Store Using Gutenberg Product Blocks for WooCommerce

  • By: WPXPO
  • Updated:
Create Your Online Store Using Gutenberg Product Blocks for WooCommerce

Ecommerce has been getting popular all over the world since more and more people started joining the internet. Every year new users are pouring into the world online which allows business owners to target more customers. The big problem that most business owners face is the lack of technical knowledge to make the transition from a physical store to an online store.

Most people who start an online store are also small business owners and people who are doing it on the side besides doing a full-time job. They don’t have a huge amount to invest in making the online store. To make the online store they can use Gutenberg WooCommerce Product Blocks.

The Gutenberg Product Blocks for WooCommerce has tons of features that can make your eCommerce website stand out from the rest of your competitors. It is very easy to use and you won’t need to have any prior technical skills to use the Gutenberg Product Blocks for WooCommerce.

How to Install Gutenberg Product Blocks for WooCommerce Plugin

Before installing Gutenberg Product Blocks for WooCommerce you would need to add WooCommerce plugin to your WordPress website. To do that you would need to first go to the plugins menu. Then select add new plugin and type in “WooCommerce” in the search bar. The next step is to install the WooCommerce plugin and then you can activate it. A new menu named WooCommerce would appear in the dashboard. You can make several customizations using the WooCommerce menu to make your WordPress Online store.

Install WooCommerce
Install WooCommerce

To install the Gutenberg Product Blocks for WooCommerce plugin you just need to go to your plugins section from your dashboard and then select add new from the menu to add a new plugin.

The next step is to put “Gutenberg Product Blocks for WooCommerce” in the search bar and you would find the plugin populating in the list.

Install Gutenberg Product Blocks for WooCommerce
Install Gutenberg Product Blocks for WooCommerce

The next step is to install the plugin and then activate it. It is very easy to use the Gutenberg Product Blocks for WooCommerce once you get familiar with the system. After activating the plugin you will see that a new menu named “Woo Blocks” would appear in the WooCommerce dashboard.

How to add Products using Gutenberg Product Blocks for WooCommerce

It is very easy to add products using the grid layout of Gutenberg WooCommerce blogs. The online store must-have products to do that.

To add products to your online store first you would need to go to the WooCommerce menu in the WordPress dashboard and then you can select add new from the products option. You can add the product name, the description, add images, select categories, give shipping details, and give the pricing of a product.

Add WooCommerce Products
Add WooCommerce Products

You can add the products one by one or you can add a lot of products together in bulk by importing them. You can also manage the categories and tags of the products so it becomes easier to manage the store inventory later on. It is also important to set up the payment gateways so your customers can make online payments.

You can also manage the taxes of the products and shipping charges separately by the WooCommerce plugins.

After all the products are properly listed in the WooCommerce plugin of your online store you can use the Gutenberg Product Blocks for WooCommerce to display the products as a separate block using the products grid layout. There is 3 product grid layout that you can choose from in the Gutenberg Product Blocks for WooCommerce. You can go to any page and select the plus icon to get the three products grid and select any of them. The products would be populated automatically. You can customize the grid layout by editing the setting option of each block.

Gutenberg Product Blocks for WooCommerce
Gutenberg Product Blocks for WooCommerce

Other than grid layout, the Gutenberg Product Blocks for WooCommerce also comes with a Product list and product category. You can choose them in a similar way you did with grid layout in any section of a page. It would appear as a separate block and can be edited using the settings option.

Other than grid layout there are heading, wrapper, and images section that you can use to populate any pages. They each have their uses and would help in making your store look more stunning.

Some features of Gutenberg WooCommerce Blocks for Grid Layout

The Gutenberg Product Blocks for WooCommerce come with various amazing features and built-in customization options that you can use to create and modify your online store.

Starter Pack

Using the free starter Pack you can populate the store if you have no idea how to display the products in your store. The starter pack is made especially for people who have no prior technical skills or who don’t want to waste much time thinking about how to display the products online.

You can use the free starter pack to get the design the products for displaying in your online store. First, go to the Pages section of your WordPress dashboard and select the starter pack pages.

You can import any design that you like to populate the page. You can choose from multiple premade packages and also customize them later according to their needs.

Starter Packs
Starter Packs

Query Builder

The Query Builder can be used to have more control over the number of posts that you want to be displayed in a block. You can also choose the product status by a dropdown menu. It is also possible to sort the product by this function in different kinds of orders that you can select from the drop down menu.

Query Builder of Product Blocks
Query Builder of Product Blocks

Product Filter

The product filter can be used to make the specific block where you want to place products of your choice. When you select product filter you can change the title of the block and then select one or multiple categories to display products.

You can choose the number of products that you want to be displayed. You can also choose the products to be displayed based on the tags of the products. The categories would be displayed as a menu in the header of the block. You can change the color and padding of the menu by further customization in the product filter settings.

It is a very useful feature if you want to display some special sections to target specific users. You can feature products from specific categories to target people using this feature of the Gutenberg Product Blocks for WooCommerce.

Product Pagination

You can use this feature to make pagination for your products so they don’t all appear at the same time. It helps you make the look of your page more organized. There are many different kinds of pagination types that you can choose from. You can also choose if there would be only text or arrow or a combination of both of them.

WooCommerce Product Blocks Pagination
WooCommerce Product Blocks Pagination

The buttons can be customized as you can play around with the color, the background color, the padding, the border, and also the border shadow. You can also choose the padding between each block, the margin, and the border-radius.

Product Slider

The product slider option is available when you go to the general settings of the product blocks. You can choose the slider view from the drop-down of the general view. You can choose where to display the arrow, the dots or to enable the autoplay features. You can choose the speed of the slide for autoplay as well.

WooCommerce Product Slider
WooCommerce Product Slider

This feature lets you control the slide view of your online store so you can attract more audience to explore your store. It is a good idea to use this kind of slider on the home page of your online store to make the design look good and immediately grab the attention of your audience. 

Sort Elements

In the general settings, you would get an option to sort the elements. You can choose which element in the product display you would want to put first. You can choose if the image would go up or the title. You can manage the position of displaying the prices, categories, reviews, and all the other things as well.

Product Blocks Sort Elements
Product Blocks Sort Elements

Product Reviews and Sales

Reviews and sales are important for the customer to trust an online store. Often, it becomes easier for a customer to decide if they would want to buy a product or not by checking out the reviews and sales of the products on an online store.  You can use these features in the Gutenberg Product Blocks for WooCommerce to manage the reviews and sales information of every product.

You can choose not to display them also if your online store is new and you don’t want to give out this information to your customers for any other reason.

Conclusion

Making an online store is not easy but if you have the right tools to design your online store then the task becomes very easy for you. Gutenberg Product Blocks for WooCommerce is such a plugin that can make the process of building your eCommerce store very easy.

You would just need to get familiar with all the features of the Gutenberg Product Blocks for WooCommerce and then you can start building your online store.

Like this article? Spread the word

Written byWPXPO Pro

We are a group of WordPress professionals. We enjoy it's playing around and crafted WordPress Plugins & Themes.

Leave a Reply