How to Display WooCommerce Products in a Classic Grid

How to Configure and Style Woo Product Grid (Classic) #

Woo Product Grid (Classic) lets you display your WooCommerce products anywhere on the page using the native WooCommerce structure. This widget preserves default WooCommerce functionality and fully supports all standard WooCommerce hooks, ensuring maximum compatibility with other plugins and customizations. With various styling options, you can create a clean, functional product grid layout in minutes.

How to Activate Woo Product Grid (Classic) #

Note: Before you begin, make sure that you have the  WooCommerce plugin is installed and activated.

First, navigate to Spexo Addons → Widget Settings, then filter by WooCommerce. Toggle the switch for Woo Product Grid (Classic) to enable the widget.

To use this Spexo Addons widget, find the ‘Product Grid (Classic)‘ widget from the Search option under the ‘WIDGETS‘ tab. Simply just Drag & Drop the ‘Product Grid (Classic)’ into the ‘Drag widget here‘ or the ‘+’ section.

After completing the initial setup, your Woo Product Grid (Classic) will appear as shown below.

How to Configure the Content Settings #

Under the Content tab, you will find options like Layouts, Product Settings, Sale/Stock Badge, Add to Cart, and more. Based on your selected layout, you’ll also see controls for Pagination and Load More.

Layouts #

In the Layouts section, you can set your WooCommerce product layout to Grid, List, or Masonry. Choose your preferred layout under Style Preset with multiple predesigned styles, and define the number of Columns (up to 6).

You’ll also find the WooCommerce Loop Hooks toggle. Enable it to activate default WooCommerce hooks (before and after the loop) for extended compatibility.

If you choose the Grid layout, the Pagination section will appear, allowing customers to navigate through next and previous products. This option is also available for the List layout.

With the List layout, you’ll get a separate Buttons section that includes the Quick View option. You can choose a Style Preset to design this section. An Eye icon will appear on the layout, allowing visitors to preview your products in a quick view popup.

In the Masonry layout, a Load More button section is available, allowing you to customize the button text as per your preference.

Query #

Use the drop-down menu to select your preferred Products Filtering option. By default, the grid displays Recent Products. You can also configure Order By to sort products by date, price, or other criteria, and set the product order using the Order option (ascending or descending).

Additional options like Product Count and Offset help you control the number of products displayed and manage product listing order.

You can also add Product Categories to display products from specific categories. Use the toggles to enable or disable Show Product Rating and select your preferred size from the Image Size option. Additionally, by enabling Show Product Compare? and Image Clickable, you can allow product comparison and make the product image clickable.

Sale/Stock Out Badge #

In this section, you can display badges for products that are on Sale or Out of Stock. There are 5 style presets available to choose from. You can also customize the Sale Text and Stock Out Text as per your preference.

Add To Cart #

When you enable the Add To Cart option, the default cart text will appear on the button. You can also customize this text as per your preference.

How to Style Woo Product Grid (Classic) #

Switch to the Style tab to customize all design aspects of the Product Grid. This section allows you to style your widget for a more polished look.

Products #

In the Products section, you can set the Alignment, choose a Content Background Color, and configure both Normal and Hover states to style your product layout with advanced controls.

Others #

In the Color & Typography section, you can customize the color and typography of the Product Title, Price, Star Rating, Sale Badge, and Stock Out Badge. You can also style the Button, Load More, Pagination, and Popup sections as per your design preferences.

Each style section will adjust based on the Layout you select in the Content settings—Grid, List, or Masonry—allowing you to change the appearance as per your preference.

Final Outcome #

By following the basic steps and applying your preferred styling, you can customize the Woo Product Grid (Classic) to match your desired look.

This is how easily you can display all your WooCommerce products using Woo Product Grid (Classic).

Also checkout step by step guide to Create WooCommerce Product Sliders in Elementor Without Coding

Need help? Feel free to contact our support team for further assistance.