1. Home
  2. Docs
  3. Livemesh Addons
  4. Premium Addons
  5. WooCommerce Grid

WooCommerce Grid

WooCommerce Grid

Display AJAX powered grid of WooCommerce products. Powerful tool for e-commerce sites.

WooCommerce Grid Features

  • WooCommerce support for Posts Grid. You can now create a AJAX powered grid of products with all details relevant to products captured as part of the grid – alternate image, product name, sale price, rating, add to cart button, sale indicator, add to wish list etc.
  • Two new styles to the Posts Grid exclusive to WooCommerce products.
  • Quick view option for WooCommerce products. You can now view all major details of a product in a modal window without leaving the page housing the WooCommerce grid.
  • Pagination, Load More and Load on Scroll function for paginated display of WooCommerce products.

The WooCommerce Grid also comes with a quick view option and the same can be enabled/disabled in the product options window.

WooCommerce Grid Quick View

The WooCommerce Grid is created right inside the Posts Grid widget. The WooCommerce Grid is created by choosing the WooCommerce Grid 1 or WooCommerce Grid 2 styles from the Choose Grid Style option under Grid Skin. By choosing one of these two styles, the options relevant to attributes of WooCommerce Products are displayed in the Post Content and in the Style tab.

WooCommerce Grid Skin

Once the right style is chosen for the WooCommerce Grid, specify the ‘Products’ as the Post Type in the Posts Query window. This will display WooCommerce products as grid items in the Posts Grid.

WooCommerce Grid Post Query

Also, to change the grid filters to display product taxonomy, change the taxonomy to product_cat in the field ‘Choose the taxonomy to display and filter on’ as shown below in the Settings tab. You can also enable lightbox, disable/enable filtering, set number of grid columns and the grid layout in the Settings tab of the Posts Grid.

WooCommerce Grid Settings Tab

The WooCommerce Grid provides a few options for you to customize the product information displayed in the grid. Thq quick view option can be found here too.

WooCommerce Grid Product Options

Choose from variety of pagination options as one of Load More, Paged, Load on Scroll (Infinite Scroll), Next Prev or choose None if no pagination is desired. You can enter the items per page value to control number of items to display per page.

WooCommerce Grid Pagination

Almost any information displayed as part of the WooCommerce Grid, including the modal quick view elements, can be customized for typography, color etc.

WooCommerce Grid Styling

Was this article helpful to you? Yes No

How can we help?