{"id":47814,"date":"2022-01-24T13:58:04","date_gmt":"2022-01-24T11:58:04","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=47814"},"modified":"2023-08-18T12:36:18","modified_gmt":"2023-08-18T09:36:18","slug":"woocommerce-blocks","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/woocommerce-blocks\/","title":{"rendered":"What Are WooCommerce Blocks? How to Use Them Effectively"},"content":{"rendered":"\n

There are many components that make up a successful eCommerce store, from product catalogs and customer reviews to user-friendly search and filtering functions. While WooCommerce blocks enable you to add all of these features (and more), putting those elements together can seem daunting.<\/p>\n\n\n\n\n\n\n\n

Fortunately, WooCommerce blocks are designed to help WordPress users create online stores<\/a> with ease. Moreover, they enable you to promote your products more effectively and drive more sales<\/a>, all without using WooCommerce shortcodes like you’d need to in the past.<\/p>\n\n\n\n

In this post, we\u2019ll take a closer look at WooCommerce blocks and how to access them in WordPress. We\u2019ll then examine six blocks you can add to your store to increase your conversion rate. Let\u2019s get started!<\/p>\n\n\n

<\/div>\n\n\n\n

What are WooCommerce blocks? A brief introduction<\/h2>\n\n\n\n

WooCommerce<\/a> is one of the most popular eCommerce tools for WordPress. This free, open-source platform enables you to build an online store without investing a lot of time or money into it.<\/p>\n\n\n\n

Additionally, WooCommerce comes with a broad range of blocks that you can access in the native WordPress Block Editor (AKA Gutenberg). With these blocks, you can list some or all of your products, display product filters, add a product search box, and more.<\/p>\n\n\n\n

What’s more, these blocks replace many of the WooCommerce shortcodes that you had to use in the past, which gives you a simpler, more visual experience when working in the editor.<\/p>\n\n\n\n

You can use these WooCommerce blocks the same way you would any other block. <\/p>\n\n\n\n

Open the page or post you want to work on, click on the plus (+) sign, and search for your desired block:<\/p>\n\n\n

\n
\"Adding<\/figure><\/div>\n\n\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tWhat are #WooCommerce #blocks? How to use them effectively (in #WordPress) \ud83e\uddf1<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n\n\n\n

You can also view a full list of available WooCommerce blocks by clicking on the plus (+) button in the top-left corner of your screen. Under the Blocks<\/em> tab, scroll down to the WooCommerce<\/em> section:<\/p>\n\n\n

\n
\"Viewing<\/figure><\/div>\n\n\n

Note that, in order to access WooCommerce blocks, you\u2019ll first need to install and activate WooCommerce<\/a> on your site. Also, if you\u2019re still using the Classic Editor<\/a>, you\u2019ll need to switch to the Block Editor instead.<\/p>\n\n\n

<\/div>\n\n\n\n

Best WooCommerce blocks (and how to use them)<\/h2>\n\n\n\n

Once you\u2019ve installed WooCommerce and uploaded your products<\/a>, you can start adding new features and functions to your store. Let\u2019s explore six useful WooCommerce blocks, and how to use them effectively on your WordPress site.<\/p>\n\n\n\n

    \n
  1. The All Products<\/em> block<\/a><\/li>\n\n\n\n
  2. The Top Rated Products<\/em> block<\/a><\/li>\n\n\n\n
  3. The Filter Products by Price<\/em> block<\/a><\/li>\n\n\n\n
  4. The Product Search<\/em> block<\/a><\/li>\n\n\n\n
  5. The All Reviews<\/em> block<\/a><\/li>\n\n\n\n
  6. The Featured Product<\/em> block<\/a><\/li>\n<\/ol>\n\n\n
    <\/div>\n\n\n\n

    1. The All Products<\/em> block<\/h3>\n\n\n\n

    The All Products<\/em> block is one of the most essential elements for any store. It lets you display all of your products in a neat grid:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    By default, the block displays the name, price, and star rating for each product, as well as a call to action (CTA) button<\/a>. It also comes with pagination<\/a> and sorting options, making it easier for users to browse through your product catalog.<\/p>\n\n\n\n

    As with most WooCommerce blocks, you can customize the All Products<\/em> feature to suit your needs. If you click on the block, you\u2019ll get a selection of settings in the panel on the right-hand side:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    There, you can edit the layout of your grid. For example, you can change the number of rows and columns per page. You also have the option to hide the sorting menu or choose another default option for ordering products.<\/p>\n\n\n\n

    Furthermore, you can edit the items within the grid. To do this, select the block and click on the pencil icon in the toolbar:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Within the preview, you can edit individual elements such as the image, product name, and CTA button:<\/p>\n\n\n

    \n
    \"Editing<\/figure><\/div>\n\n\n

    You can rearrange these items by using the up and down arrows in their individual toolbars. You can also remove elements, or add other product blocks, such as Product Summary<\/em> or Product Rating<\/em>. What’s more, these changes will be applied to every product in your grid, so you don\u2019t have to edit each one individually.<\/p>\n\n\n\n

    We recommend that you keep product details to a minimum, to avoid overwhelming shoppers with too much information. On the same note, you might want to display only a few items per page.<\/p>\n\n\n\n

    It’s also best to include an Add to Cart<\/em> button. This way, users who are interested in a particular product can easily add it to their orders without having to leave the page.<\/p>\n\n\n

    <\/div>\n\n\n\n

    2. The Top Rated Products<\/em> block<\/h3>\n\n\n\n

    Receiving positive reviews from shoppers<\/a> can be highly rewarding. Even better, you can leverage those ratings to increase your sales.<\/p>\n\n\n\n

    The Top Rated Products<\/em> block lets you showcase the products with the highest number of positive reviews:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Ratings play a vital role in your store\u2019s success. They serve as proof to first-time visitors that your products are of high quality, which can help you drive more conversions.<\/p>\n\n\n\n

    Therefore, we recommend that you use the Top Rated Products<\/em> block in a prominent place on your website. For example, you might want to add it to your home page or the sidebar of your product pages<\/a>.<\/p>\n\n\n\n

    When it comes to customizing the Top Rated Products<\/em> block, you have several options. For example, you can adjust the number of products you want to display:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You can also hide particular details about the products, such as their prices. Additionally, you can choose to only display the top-rated items in a particular category, such as clothing.<\/p>\n\n\n\n

    If you don’t have a lot of reviews to showcase just yet, you may want to use the Best Selling Products<\/em> block instead. This displays the most popular items on your site according to the number of sales made.<\/p>\n\n\n\n

    Another similar feature is the Newest Products<\/em> block. As the name suggests, this lets you promote your most recent additions.<\/p>\n\n\n

    <\/div>\n\n\n\n

    3. The Filter Products by Price<\/em> block<\/h3>\n\n\n\n

    Filtering functionality makes it easier for users to find what they\u2019re looking for. This can be particularly useful when a shopper has a set budget.<\/p>\n\n\n\n

    The Filter Products by Price<\/em> block lets users define a minimum and maximum price using a simple slider:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    This block works in conjunction with the All Products<\/em> block that we featured earlier. Once a user sets a specific price range, WooCommerce will automatically update the product list to only display the items that fall into that budget:<\/p>\n\n\n

    \n
    \"Front<\/figure><\/div>\n\n\n

    The Filter Products by Price<\/em> block is straightforward to use. However, you can make things even easier for your users by letting them enter specific amounts. To do this, select the block and navigate to the settings panel. Under Price Range<\/em>, select the Editable<\/em> option:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Along with filtering products by price, you may also want to enable shoppers to search for items according to product attributes like size and color. To do this, you can use the Filter Products by Attribute<\/em> block along with the All Products<\/em> block:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    Another handy feature is the Active Filters<\/em> block. When you add this to your page, users will be able to see a list of their current filters.<\/p>\n\n\n

    <\/div>\n\n\n\n

    4. The Product Search<\/em> block<\/h3>\n\n\n\n

    One powerful way to improve your site\u2019s user experience (UX)<\/a> is by adding search functionality. This will let users quickly search for any specific items they have in mind, rather than having to browse through your catalog until they find what they\u2019re looking for.<\/p>\n\n\n\n

    Fortunately, WooCommerce offers a Product Search<\/em> block:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You can place the search bar anywhere you want on your site. However, we recommend that you place it right above your product grids, where users can easily see it: <\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    The Product Search<\/em> block doesn\u2019t offer many customization options. However, you do have the option to hide the search field label, so that only the search bar is visible.<\/p>\n\n\n

    <\/div>\n\n\n\n

    5. The All Reviews<\/em> block<\/h3>\n\n\n\n

    As we mentioned earlier, displaying reviews can encourage first-time visitors to try your products. In fact, one recent study showed that nearly all shoppers consult customer reviews before making a purchase [1]<\/small>.<\/p>\n\n\n\n

    As the name suggests, the All Reviews<\/em> block lets you showcase all your customer feedback in one place:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    You also get some control over the layout and content of your reviews. For example, you can hide certain information, such as the reviewers’ names and review data.<\/p>\n\n\n\n

    You can also replace reviewer photos with product images<\/a>, and select the number of reviews you want to display at a time. Meanwhile, users will be able to order reviews by date posted, highest rating, and lowest rating. <\/p>\n\n\n\n

    There are several ways you can display your reviews. For example, you can place them on your home page to increase their visibility or add them again on your About page.<\/p>\n\n\n\n

    You may also want to combine the All Reviews<\/em> block with two other related features: Reviews by Product<\/em> and Reviews by Category<\/em>. These blocks let you display customer ratings and reviews for particular items and categories.<\/p>\n\n\n

    <\/div>\n\n\n\n

    6. The Featured Product<\/em> block<\/h3>\n\n\n\n

    If you want to generate interest in a particular item, the Featured Product<\/em> block can be very effective. You can highlight any product you want, on any page or post on your site.<\/p>\n\n\n\n

    Moreover, you can create multiple Featured Product<\/em> blocks for different items. When you add this block to your page, you\u2019ll be asked to select a product:<\/p>\n\n\n

    \n
    \"Adding<\/figure><\/div>\n\n\n

    You can then customize the layout of your featured product:<\/p>\n\n\n

    \n
    \"The<\/figure><\/div>\n\n\n

    For example, you can hide the product description and price, and choose a different overlay color. There\u2019s also a focal point picker, which lets you shift the position of the main object in your image.<\/p>\n\n\n\n

    In addition, you can edit the CTA button within the block. All you have to do is click on it, and you\u2019ll get a selection of options. For instance, you can update the link, and customize the color and typography of the button:<\/p>\n\n\n

    \n
    \"Editing<\/figure><\/div>\n\n\n

    Whatever your preferences might be, it\u2019s important to ensure that essential elements such as the product name and CTA are clearly visible. You\u2019ll also want to ensure that the button links to the right page.<\/p>\n\n\n\n

    For increased visibility, we recommend showcasing featured products on your home page or a dedicated shop page. However, you could also use this block in blog posts<\/a> to draw attention to particular products. <\/p>\n\n\n\n

    You might also want to check out the Featured Category<\/em> block. This feature can be very useful if you\u2019re trying to increase sales in particular product categories.<\/p>\n\n\n

    Go to top<\/a><\/div>\n\n\n\n

    Get started with WooCommerce blocks today<\/h2>\n\n\n\n
    \n
    \n

    WooCommerce makes it very easy to build your own online store<\/a>. Among its many other features, this platform provides several blocks that help you add more functionality to your shop. Moreover, you can customize these blocks to suit your needs.<\/p>\n<\/div>\n\n\n\n

    \n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tWhat are #WooCommerce #blocks? How to use them effectively (in #WordPress) \ud83e\uddf1<\/a>\n\t\t \t<\/div>\n\t\t \t
    \n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

    In this post, we looked at some of the most essential WooCommerce blocks. For example, the All Products<\/em> block lets you display your entire catalog of products in a professional grid. Meanwhile, features such as Top Rated Products<\/em> and All Reviews<\/em> can help you drive more sales.<\/p>\n\n\n

    \n\n\n\n

    For some other ways to improve your WooCommerce store, you can check out our collection of the best WooCommerce plugins<\/a>. And if you’re looking for an alternative way to design your store, we also have a post on the best WooCommerce page builders<\/a>.<\/p>\n\n\n<\/div><\/div>\n\n\n\n

    Do you have any questions about using WooCommerce blocks? Let us know in the comments section below! <\/em><\/strong><\/p>\n\n\n