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. After that, click on the ‘Save’ button.

EB Woo Product Grid

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

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

Alternatively, you can click on the ‘+’ icon, search ‘Woo Product Grid’ at the search bar and you will get the block. Simply drag and drop the block as shown.

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

General #

Go to the ‘General’ tab to set the content. Pick your layouts between ‘Grid’ or ‘List’. Choose Woo Product Grid block layout from 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

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

Under the ‘Product Query’ tab you can organize your products by ascending or descending, date, order, categories, tags, etc. 

EB Woo Product Grid

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

EB Woo Product Grid

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

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 Outlook, 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

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

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

Here’s how you can easily set and design EB Woo Product Grid in Gutenberg. 

Got stuck? Feel free to contact our support for further assistance.

Powered by BetterDocs