Go to athemes.com

Woo Product Grid

The WooCommerce Product Grid Widget allows you to display WooCommerce products in a customizable grid layout. You can include optional filters, a load more button, and various design styles to enhance your product display.

Activate the widget

This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.

Widget options

Layout section

  • Columns: Select the number of columns (1-6) for the product grid layout.
  • Item Gap: Adjust the gap between items in the grid using a slider (px, em, rem).
  • Product Template: Choose a product template style (Style 1, Style 2, Style 3, Style 4).

Query section

  • Query type: Select the type of products to display (Recent products, Featured products, Products on sale, Best Selling, Top Rated).
  • Products Per Page: Specify the number of products to display per page.
  • Offset: Set the number of products to skip before starting to display products.
  • Order By: Choose the criteria to order products (Date, Title, Price, Popularity, Rating, Random).
  • Order: Set the order of products (Ascending, Descending).
  • Categories: Select specific categories to filter the products displayed.
  • Tags: Select specific tags to filter the products displayed.
  • Show Filter: Enable a filter bar to allow users to filter products by category. Requires categories to be selected.
  • Show All Text: Customize the text for the “Show all” filter option.
  • Show Category Thumbs: Display thumbnail images for categories in the filter bar.
  • Show All Thumb: Upload a thumbnail image for the “Show all” option.
  • Show Load More: Enable a “Load More” button to dynamically load more products.
  • Load More Text: Customize the text for the “Load More” button.

Product elements section

  • Show Image: Toggle to show or hide the product image.
  • Show Category: Toggle to show or hide the product category.
  • Title HTML Tag: Select the HTML tag for the product title (e.g., H1, H2, H3).
  • Show Rating: Toggle to show or hide the product rating.
  • Show Short Description: Toggle to show or hide the product short description.
  • Show Price: Toggle to show or hide the product price.
  • Show Add to Cart: Toggle to show or hide the “Add to Cart” button.
  • Sale Badge Alignment: Choose the alignment for the sale badge (Left, Right).
  • Sale Badge Text: Customize the text for the sale badge.
  • Merchant Options: Enable additional elements like Quick View, Buy Now, Wishlist, and Product Swatches if the Merchant plugin is installed.

Style tab

Customize the appearance of your product grid under this tab. You have a variety of options to ensure the widget matches your website’s design and branding perfectly.

Wrapper Style

  • Padding: Adjust the padding inside the widget wrapper.
  • Margin: Adjust the margin around the widget wrapper.
  • Background Color: Set the background color for the widget wrapper.
  • Border Radius: Set the border radius for the widget wrapper.
  • Border: Customize the border settings for the widget wrapper.
  • Box Shadow: Add a box shadow to the widget wrapper.

Filter Style

  • General: Adjust the alignment, background color, and padding of the filter bar.
  • Filter Items: Customize the typography, padding, spacing, border radius, color, background, and border for the filter items.

Product Card Style

  • Padding: Adjust the padding inside each product card.
  • Background Color: Set the background color for each product card.
  • Border Radius: Set the border radius for each product card.
  • Border: Customize the border settings for each product card.
  • Box Shadow: Add a box shadow to each product card.

Product Image Style

  • Height: Adjust the height of the product images.
  • Border Radius: Set the border radius for product images.
  • Box Shadow: Add a box shadow to the product images.

Product Content Style

  • Title: Customize the typography and color of the product title.
  • Price: Customize the typography and color of the product price.
  • Short Description: Customize the typography and color of the product short description.
  • Rating: Customize the color of the product rating.
  • Category: Customize the color of the product category.

Sale Badge Style

  • Padding: Adjust the padding inside the sale badge.
  • Margin: Adjust the margin around the sale badge.
  • Background Color: Set the background color for the sale badge.
  • Text Color: Customize the text color of the sale badge.
  • Border Radius: Set the border radius for the sale badge.

Add to Cart Button Style

  • Button Settings: Customize the button style, including typography, background color, text color, border, padding, and hover effects.

Load More Button Style

  • Button Settings: Customize the button style, including typography, background color, text color, border, padding, and hover effects.

These style options ensure that your product grid looks professional and integrates seamlessly with your site’s overall design.

Conclusion

The WooCommerce Product Grid Widget is a versatile tool for displaying your products in a customizable grid. With extensive customization options, you can tailor the appearance and functionality to match your needs and provide an engaging user experience.