{"id":55871,"date":"2022-09-13T13:01:00","date_gmt":"2022-09-13T10:01:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=55871"},"modified":"2022-09-13T13:02:46","modified_gmt":"2022-09-13T10:02:46","slug":"woocommerce-shop-page","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/woocommerce-shop-page\/","title":{"rendered":"How to Create a Beautiful WooCommerce Shop Page (In 5 Steps)"},"content":{"rendered":"\n

Searching for the easiest way to customize the WooCommerce shop page? \ud83e\udd14<\/p>\n\n\n\n

WordPress offers a broad variety of blocks<\/a> to help you create professional websites. If you use WooCommerce, you also get access to dedicated WooCommerce blocks that you can use for your online store. <\/p>\n\n\n\n\n\n\n\n

Therefore, you might be wondering how to use these elements to build a shop page in WooCommerce that drives conversions. <\/p>\n\n\n\n

Fortunately, the process is very simple. Using these blocks, WooCommerce lets you display your products in different ways. Additionally, you can add filters and search functions to make it easier for users to browse your shop.<\/p>\n\n\n\n

\ud83d\udc49 In this article, we’ll show you how to create a beautiful WooCommerce shop page using blocks<\/strong>. You can follow our guidelines and choose which blocks you want to use, depending on your needs. Let’s get started!<\/p>\n\n\n\n

\ud83d\udcda Table of contents:<\/h4>\n\n\n\n
    \n
  1. Place the All Products block<\/a><\/li>\n\n\n\n
  2. Add Featured Product and\/or Handpicked Products blocks<\/a><\/li>\n\n\n\n
  3. Enable product search on the shop page<\/a><\/li>\n\n\n\n
  4. Use the Featured Category blocks<\/a><\/li>\n\n\n\n
  5. Add an option to filter products by price<\/a><\/li>\n<\/ol>\n\n\n\n\t\t
    <\/div>\n\t\t\t
    \n\t\t \t
    \n\t\t \t\tHow to create a beautiful #shop page in #WooCommerce (just 5 steps) \ud83c\udfa8 \ud83d\uded2<\/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\n\n\n

    How to customize the WooCommerce shop page with blocks<\/h2>\n\n\n\n

    To get started, you’ll want to open the editor for your store’s Shop page. Then, follow these instructions to customize its content.<\/p>\n\n\n

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

    1. Place the All Products block<\/h3>\n\n\n\n

    Shop pages come in all shapes and sizes. In an online store, this page typically displays all the products you have for sale. Users can click on individual items to open their respective product pages<\/a> or add them to their carts directly (if the shop allows for it):<\/p>\n\n\n

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

    With WordPress and WooCommerce, you have full control over what elements to include in your shop page. The look and feel of this page will depend on the theme you’re using and how you configure it. <\/p>\n\n\n\n

    WooCommerce automatically sets up a shop page when you start using the plugin, so you can go ahead and check out what yours looks like. When you’re ready to edit it, go to Pages <\/strong><\/em>and find the Shop <\/strong><\/em>option. <\/p>\n\n\n\n

    Open this page in the Block Editor, and you should see something like this:<\/p>\n\n\n

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

    By default, the Shop<\/strong> <\/em>page includes the All Products<\/strong> <\/em>block and a header. If you don’t see this block, you can add it to the page by clicking on the plus (+)<\/strong> sign and selecting it from the list of options:<\/p>\n\n\n

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

    The All Products<\/strong><\/em> block displays a grid that contains all of your shop’s products, ordered from new to old. To change the display order for your products, click on the block and go to the settings panel on the right. Then, navigate to the Content Settings <\/strong><\/em>section and select your preference from the Order Products By<\/em> <\/strong>menu:<\/p>\n\n\n

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

    Meanwhile, under Layout Settings<\/em><\/strong>, you can choose the number of columns and rows that you want to display in the product grid. Feel free to explore the other options available with this block.<\/p>\n\n\n

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

    2. Add Featured Product and\/or Handpicked Products blocks<\/h3>\n\n\n\n

    Many shop pages highlight specific products. These are typically items that store owners want to draw attention to, such as new or discounted stock or recently added products. WooCommerce comes with a Featured Product<\/em> block that enables you to showcase any item in your store. <\/p>\n\n\n\n

    Once you place this block on your page, you’ll need to select the product that you want to feature and click on Done<\/strong><\/em>:<\/p>\n\n\n

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

    Then, WooCommerce will display the product’s image, name, price, description, and a call-to-action (CTA). The block should look something like this:<\/p>\n\n\n

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

    You can then customize this block to your liking. For instance, you might change the image and modify the CTA button. <\/p>\n\n\n\n

    The downside of adding the Featured Product<\/strong> <\/em>block to your shop page is that it can distract users from the rest of your products. To counter this, we suggest using columns to display multiple featured products side by side:<\/p>\n\n\n

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

    An alternative to the Featured Products <\/strong><\/em>block is the Hand-Picked Products <\/strong><\/em>option. This block enables you to choose several products and display them side by side. It uses the same style as the All Products<\/strong><\/em> block:<\/p>\n\n\n

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

    Both the Featured Products and Hand-Picked Products blocks<\/strong><\/em> fulfill similar purposes. Ideally, you’ll pick one of the two options so as not to overwhelm visitors with too many featured items. We also recommend placing these blocks at the top of the page, so users can’t miss them.<\/p>\n\n\n

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

    3. Enable product search on the shop page<\/h3>\n\n\n\n

    If you have a shop with a large product catalog, you’ll need to offer a search feature. This way, users can look for any specific items they had in mind, without having to browse through the entire shop. <\/p>\n\n\n\n

    When adding a search block to your shop page, you’ll want to look for the Product Search <\/strong><\/em>option, not the default WordPress search block. Product Search<\/strong> <\/em>will limit the results to WooCommerce products, while the other search block will include all other pages on your site. <\/p>\n\n\n\n

    Here’s what the WooCommerce search function looks like: <\/p>\n\n\n

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

    Keep in mind that the Product Search<\/strong> <\/em>block doesn’t work within the editor, so you’ll need to test it on the front end. Additionally, the block doesn’t offer autocomplete functionality<\/a>, so users will need to type a full query and load a new page to see the results.<\/p>\n\n\n

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

    4. Use the Featured Category blocks<\/h3>\n\n\n\n

    Besides pointing users towards hand-picked products, you may also want to highlight specific product categories. This can be particularly useful if you sell several types of products, as it will enable users to look for items in a specific department.<\/p>\n\n\n\n

    Start by adding the Featured Category<\/strong> <\/em>block to your shop page. Then, select the product category you want to highlight and click on Done<\/strong><\/em>:<\/p>\n\n\n

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

    Heres’s what the Featured Category<\/strong> <\/em>block will look like: <\/p>\n\n\n

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

    The block lets you change the color of the background and text, but it doesn’t offer a lot of additional customization options. Moreover, since the block takes up a lot of space, we recommend placing multiple featured categories side by side using columns:<\/p>\n\n\n

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

    Since the Featured Product Category <\/em>block is very basic, we recommend you look into plugins such as Otter Blocks for further customization.<\/p>\n\n\n

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