G Compare Table: How To Add & Edit A Product Compare List?

Written by the Divi Engine Documentation Team

Introduction

Follow this information to add a product comparison feature to your website using the Wishlist/Compare and G Compare modules.

Step 1: Enable Compare Feature

Go to BodyCommerce > Compare and enable the compare feature - remember to save.

Step 2: Add The Wishlist/Compare Module & Set To Compare

Head over to your product page template and add the Wishlist/Compare module. Select the compare feature from the "Type" field in the Main Settings section. Please click HERE to learn more about the wishlist feature.

Step 3: Place The G Compare Module

BodyCommerce allows you to place the G Compare module - the module that allows your customers to compare products - in three location.

  • Product page.
  • Account page using a Divi Library layout.
  • Any other page.

Product Page Template

If you want to add the G Compare module to your product page template then do the following.

  • Add the G Compare module to the product page template.
  • In Content > Main Options select "Automatic on product page" from the Display Type field.
  • Select the method for showing related products by going to the Automatic Options section in the Content tab.
  • Add comparison field items like the Title, Price, etc. to the G Compare module from the Content tab.

Account Page - Divi Library Layout

If you want to add the G Compare module to your account page then do the following.

  • Create a Divi Library layout and add the G Compare module.
  • In Content > Main Options select "Customer add to table" from the Display Type field.
  • Add comparison field items like the Title, Price, etc. to the G Compare module from the Content tab.
  • Head over to BodyCommerce > Account Pages and assign this Divi Library layout with the G Compare module to the Compare Layout field.

Any Other Page

If you want to add the G Compare module to any other page then do the following.

  • Add the G Compare module.
  • In Content > Main Options select "Customer add to table" from the Display Type field.
  • Add comparison field items like the Title, Price, etc. to the G Compare module from the Content tab.

G Compare Module Settings

Main Settings

  • Display Type: Select display type.
  • Post Type: Select the post type.
  • Alignment Of Items in Column: Define where to align the items.
  • Hide Row If All Are Empty: Enable to hide the row if all are empty.

Elements

  • Show Title: Enable to show product titles.
  • Title HTML Tag: Select the title HTML tag.
  • Link Product Title To Product Page: 
  • Open Product In A New Tab: Enable to open product in a new tab.
  • Show Thumbnail: Enable to show the thumbnail.
  • Thumbnail Image Size: Select the thumbnail size.
  • Show Add To Cart: Enable to show add to cart.

Guest Options

  • Guest Display Type: Select what to display if there are no products.
  • Message For Guest: Enter a message for a guest.
  • Library Layout: Select a library layout.

No Results

  • No Product Display Type: Select what to display if there are no products.
  • No Product Text: Enter in text.
  • Library Layout: Select a library layout.

Compare Field Table Items

Main Options - TITLE

  • CompareTable Item Name: Give this field any name like "Title."
  • What Do You Want To Add: Title.

Main Options - DESCRIPTION

  • CompareTable Item Name: Give this field any name like "Description."
  • What Do You Want To Add: Description.
  • Show Excerpt: Enable to show a summary of the description.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - ATTRIBUTE

  • CompareTable Item Name: Give this field any name like "Attribute."
  • What Do You Want To Add: Attribute.
  • Attribute Name: Select an attribute name.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - PRICE

  • CompareTable Item Name: Give this field any name like "Price."
  • What Do You Want To Add: Price
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - RATING

  • CompareTable Item Name: Give this field any name like "Rating."
  • What Do You Want To Add: Rating.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data

Main Options - STOCK STATUS

  • CompareTable Item Name: Give this field any name like "Stock Status."
  • What Do You Want To Add: Stock Status.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - SKU

  • CompareTable Item Name: Give this field any name like "SKU."
  • What Do You Want To Add: SKU.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - CUSTOM META FIELD

  • CompareTable Item Name: Give this field any name like "Custom Meta Field."
  • What Do You Want To Add: Custom Meta Field.
  • Custom Meta Field Name: Enter in your ACF name. 
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - CATEGORY

  • CompareTable Item Name: Give this field any name like "Category."
  • What Do You Want To Add: Category.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - TAG

  • CompareTable Item Name: Give this field any name like "Tag."
  • What Do You Want To Add: Tag.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

Main Options - CUSTOM TAXONOMY

  • CompareTable Item Name: Give this field any name like "Custom Taxonomy."
  • What Do You Want To Add: Custom Taxonomy.
  • Custom Taxonomy Name: Select your custom taxonomy.
  • Not Empty Display: Select what to show when there is a value (icon or value).
  • Empty Display: Select what to show when there is no value (icon or value).
  • Empty Custom Text: Enter a custom text when there is no data.
  • Empty Icon: Select the icon when there is data.
  • Not Empty Icon: Select the icon when there is no data.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.