EB Woo Product Grid

With EB 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 on your WordPress dashboard. After that add & save any product 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
EB Woo Product Grid 17

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
EB Woo Product Grid 18

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
EB Woo Product Grid 19

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
EB Woo Product Grid 20

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
EB Woo Product Grid 21

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
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
EB Woo Product Grid 22

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
EB Woo Product Grid 23

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 can put your ongoing ‘Sale’ badge on the list preset very easily.

EB Woo Product Grid
EB Woo Product Grid 24

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
EB Woo Product Grid 25

 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
EB Woo Product Grid 26

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
EB Woo Product Grid 27

Go to the ‘Cart Text’ tab & enable Use Custom Cart Button Text’ to write any customized text you want. 

EB Woo Product Grid
EB Woo Product Grid 28

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
EB Woo Product Grid 29

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
EB Woo Product Grid 30

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
EB Woo Product Grid 31

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
EB Woo Product Grid 32

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
EB Woo Product Grid 33

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 for further assistance.

What are your feelings
Updated on October 14, 2024