WooCommerce Extension

This document explains how to use the WooCommerce Extension plugin that extends the functionality of the Divi FilterGrid plugin, allowing you to easily display WooCommerce product data. This extension requires Divi FilterGrid version 2.7 or higher.

Once installed and activated, a new WooCommerce section will get added to the Divi FilterGrid module. This section will only become visible after the Query Type is changed  from “Basic (posts only)” to any other query type.

Scroll down to the WooCommerce section to modify the type of products and product data displayed. You should see the following options:

Featured Products Only

Turn this option on to limit the results to featured products only. Products can be set to featured from the WP dashboard -> Products -> All Products screen by clicking on the star icon next to each product. It can also be set when editing a single product under the Publish section in the right sidebar. Click on the Edit link next to Catalog visibility and then click on the “This is a featured product” checkbox.

Hide Hidden Products

Turn this option on to hide hidden products. Products can be set to hidden by editing the single product and clicking on the Edit link next to Catalog visibility and then clicking on the “Hidden” checkbox.

* This toggle is not compatible with other custom post types. If you are using Divi FilterGrid to display other custom post types in addition to WooCommerce products in the same grid, turning on the Hide Hidden Products toggle will prevent other custom post types from displaying.

Hide Out of Stock Products

Turn this toggle on to hide out of stock products. Stock status or quantity can be managed per product in the Product Data -> Inventory tab.

WooCommerce Data Wrapper

By default, the product data fields (SKU, price, description, etc.) will be wrapped in a div with class “dp-dfg-woo-product-data”. Turn off this option to remove this wrapper. This will output each field as a sibling HTML element to the Posts Elements (image, title, read more button) and will make it easier to change the placement location of each field using CSS Grid.

WooCommerce Product Elements

The remaining options in the WooCommerce section are toggles to turn off or on data related to the WooCommerce products. The available options include:

• Show SKU
• Show Price
• Show Stock Status
• Show Ratings – Choose between: Stars, Text, Stars and Text. Star color, background color, and size can be set in the Design tab.
• Show Dimensions
• Show Weight
• Show Short Description
• Show Add To Cart Button – Choose to redirect users to cart page, checkout page, or AJAX add to cart. You can also choose to change the button text and display a quantity input.