--- title: EB Woo Product Grid description: In this guide, we have discussed how you can showcase your product with Woo Product Grid block from Essential Blocks for Gutenberg. url: "https://essential-blocks.com/docs/woo-product-grid/" updated: "2026-09-28" category: WooCommerce tags: - block - block library - blocks - gutenberg block - Gutenberg editor - Woo Product Grid - WooCommerce - WordPress --- # EB Woo Product Grid With **[EB Woo Product Grid](https://essential-blocks.com/demo/woo-product-grid/)**, you can easily showcase your WooCommerce products anywhere on your website with amazing styling & customization options. This Gutenberg block can give your online store an eye-catching look that boosts sales. Follow the step-by-step guidelines to add **Essential Blocks Woo Product Grid** using Gutenberg.  ***Note****: Before starting with the EB Woo Product Grid, you have to*[***install & activate the WooCommerce plugin***](https://woocommerce.com/document/installing-uninstalling-woocommerce/)*on your WordPress dashboard. After that*[***add & save any product***](https://woocommerce.com/document/managing-products/#:~:text=Go%20to%20WooCommerce%20%3E%20Products%20%3E%20Add,virtual%20(service)%20if%20applicable.)*on your site easily. * ## **How To Activate Essential Blocks Woo Product Grid?** To activate EB Woo Product Grid, navigate to ‘**Essential Blocks → ‘Blocks’**. Then, toggle to enable this ‘**Woo Product Grid’** block and the block will be automatically saved. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-5.gif) ## **How To Configure Essential Blocks Woo Product Grid?** First, navigate to **WordPress dashboard Page → Add New** and create a new or select the page if you already have a created one where you want to add a **WooCommerce Product Grid in Gutenberg**. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2024/04/image-48.gif) To add the Essential Blocks element, click on the **‘+’** icon. Find**‘Woo Product Grid’** from the search bar. Simply click on the block and it will be added.  ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-8.png) Alternatively, you can click on the **‘+’**icon and search **‘Woo Product Grid’**at the search bar, and you will get the block. Simply drag and drop the block as shown. ![Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-9.png) After you have inserted the block, You will get two options: **‘Choose’** or **‘Start blank’**. Select **‘Start blank’** and a default layout will appear on the page.  ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-7.gif) On the other hand, select**‘Choose’** to access the premade **Product Grid**Templates. You will have **4 Woo Product Grid templates** to set team member profile. Pick the one that suits your needs. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2026/09/gdocs-d8802317be.gif) Now, click on the settings icon. A side panel will appear on the right side of your page. From here, you can configure and personalize the contents and appearance of the EB Woo Product Grid. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2024/04/image-40.png) ### **General** Go to the **‘General’** tab to set the content. Pick your layouts between **‘Grid’** or **‘List’**. Choose Woo Product Grid block layout from the available 3  **‘Grid Presets’**. You can also enable rating options, pricing, sale badge, etc for your products. Also, properly align your **‘Columns’** placing as you want.  You can increase the amount of **‘Columns’** up to 6 columns. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/image-21.gif) You can also showcase your **‘Woo Product Grid’** block as a **‘List’**layout to make your products more detailed. Also, you will have the option to enable your **‘Product Rating’**& **‘Product Price’.**You canput your ongoing **‘Sale’**badge on the list preset very easily. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/image-22.gif) Under the **‘Product Query’** tab, you will get two options **‘Custom Query’**and **‘Related Products’.**Choose the ** ‘Custom Query’** option from the drop-down menu and sort your products by ascending or descending, date, order, categories, tags, etc. ![EB Woo Product](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-8.gif)  If you want to include any particular product in this list click on the **‘Include Product’**and choose the products and if you want to avoid showcasing any specific products in your list just add them buy clicking on the‘**Exclude Products’.** ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-10-1024x417.png) Now choose the**‘Related Products’** option and adjust by choosing the **‘Select Product’**, **‘Exclude Products’**, and the number of products we want to showcase here. ![EB Woo Product](https://essential-blocks.com/wp-content/uploads/2022/06/unnamed-11-1024x461.png) Go to the **‘Cart Text’**tab & enable **‘****Use Custom Cart Button Text’**to write any customized text you want.  ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/image-24.gif) Properly align your **‘Sale Badge’**on the product to make the outlook more interesting. You can also write customized sales-related **‘Sale’**text.  ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/image-25.gif) Under the ‘**Load More Settings**’ you will have multiple options to add more posts. Simply toggle on the ‘**Enable Load More Options**’, and choose your preferred navigation appearance. You can also change the ‘**Button Text**’ as well with proper button alignment.  ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/11/image-4.gif) ### **Styles** From the ‘**Styles’**tab, personalize Woo Product Grid block appearance. **Content Alignment, and Image Positioning**to give your website a gorgeous view. You can also tweak the **Product Title, Price, Rating Color or Spacing, Button, Sale Badge Style,**etc to attract more potential customers. Try to keep all these settings similar to your website’s tone and theme. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/11/image-5.gif) ### **Advanced** From the **‘Advanced’** tab, you can make the appearance of the tabs more interactive and appealing. Here, you can change **Margin**, **Padding**, **Background type**, **color and image**, **Border & Shadow**, etc. Multiple advanced block design customization options are available there. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/06/image-27.gif) ## **Final Outcome** By following the simple and easy steps, you can add the **EB Woo Product Grid** block and style it in Gutenberg. ![EB Woo Product Grid](https://essential-blocks.com/wp-content/uploads/2022/11/image-9.png) Here’s how you can easily set up and design the **EB Woo Product Grid** in Gutenberg.  Got stuck? Feel free to [**contact our support**](https://wordpress.org/support/plugin/essential-blocks/) for further assistance.