REA Products
The REA Products widget allows you to quickly display WooCommerce products on any page of your website.

Content

Layouts

  • Layout: Select the type of layout to display the products.
  • Style Preset: Select from the different preset styles to display the products.
  • Columns: Select the number of columns to be displayed with products.

Product Settings

  • Source: Select source to be products or dynamic.
  • Filter By: Filter products by Latest Products, Sale, Featured, etc.
  • Order By: Order display of posts by Date, Title, Price, Random, Menu order, etc.
  • Order: Select Ascending or descending option.
  • Products count: Display the required count of the products.
  • Offset: Decrease the count of the products.
  • Product Categories: Choose to display the type of product categories created.
  • Layout: Select the type of layout to display the products.
  • Title HTML Tag: Choose the type of HTML tag for the title.
  • Show Product Rating: Allow or disallow to display the product rating.
  • Show Product Price: Allow or disallow to display the product price.
  • Image Size: Select the size of the image of the products.
  • Show Product Compare: Display an option to compare the products.
  • Image Clickable: This option would enable the product images to be clickable and direct the users to the product page.

Sale / Stock out Badge

  • Style Preset: Select from the different styles to display the products.
  • Alignment: Select alignment for the preset.
  • Sale Type: Select the sale type from static text, Dynamic (Price off), and Dynamic (Percentage)
  • Sale Static Text: Enter custom text for items on sale.
  • Stock Out Text: Enter custom text for items out of stock.

Add To Cart

  • Show Add To Cart Custom Text: Enable this option to enter the custom add to cart button text for different types of products like simple, variable, grouped, external and default.

Load More

  • Show Load More: Enable this option to display the load more button.
  • Label Text: Set the text for the load more button.

Pagination

  • Show Pagination: Enable this option to display the page numbers on the widget.
  • Previous Label: Set the symbol/text to show the previous page.
  • Next Label: Set the symbol/text to show the next page.

Style

Products

  • Alignment: Select alignment for the products.
  • Background Color: Select background Color & Opacity for normal and hover behavior of the box.
  • Border Type: Select a border type for the products.
  • Width: Adjust the width of the products.
  • Color: Select the color of the border.
  • Box Shadow: Adjust the box shadow of the products.
  • Border Radius: Select a border radius for the products.

Color and Typography

Product Title:

  • Product Title Color: Select Color for the product title.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.

Product Price:

  • Price Color: Color of the product price.
  • Sale Price Color: Color of the product price on sale.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.

Star Rating:

  • Rating Color: Select star color for the rating symbol.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.

Add to Cart Button Styles

  • Padding: Provide padding for the top, right, bottom, left side of the button.
  • Radius: Radius for the button.
  • Use Gradient Background: Enable this option to display gradient background.
  • Button Color: Select the button color of the product.
  • Background: Select the background color of the button.
  • Border Type: Select the border type for the button.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.

Sale Badge

Sale Badge: Enable to show the sale notification. If this option is enabled, the following options can be customized.
  • Sale Badge Color: Color of the sale text.
  • Sale Badge Background: Color of the background for sale notification.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
Stock Out Badge: Enable to show the stock out notification. If this option is enabled, the following options can be customized.
  • Stock Out Badge Color: Color of the stock out text.
  • Stock Out Badge Background: Color of the background for stock out notification.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.

Title:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Color: Select Color for the product title.

Price:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Price Color: Color of the price text.
  • Sale Price Color: Color of the sale price text.

Content:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Content Color: Color of the content text.
  • Review Color: Color of the sale content text.
  • Review Link Color: Color of the review link.
  • Review Link Hover: Color of the hover review link.
  • Border Color: Border color of the content.

Sale:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Color: Color of the sale text.
  • Background Color: Color of the sale background.

Quantity:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Color: Color of the quantity number.
  • Background Color: Color of the quantity number background.
  • Border Color: Border color of the quantity number.

Cart Button:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Color: Color of the cart button text.
  • Background Color: Background color of the cart button.
  • Border Color: Border type of the cart button.
  • Border Radius: Adjust the border radius of the cart button.

SKU:

  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.
  • Title Color: Color of the SKU title.
  • Content Color: Content color of the SKU.
  • Hover Color: Hover color of the SKU.

Close button:

  • Icon Size: Adjust the icon size of the close button.
  • Button Size: Adjust the button size of the close button.
  • Color: Color of the close button text.
  • Background Color: Background color of the close button.
  • Border Radius: Adjust the border radius of the close button.
  • Box Shadow: Adjust the box shadow of the close button.
  • Border Radius: Adjust the border radius of the popup.
  • Background Type: Select the type of background for the popup.
  • Box Shadow: Adjust the box shadow of the popup.

Compare Button

  • Padding: Provide padding for the compare button.
  • Radius: Provide radius for the compare button.
  • Button Text Color: Select the text color of the compare button.
  • Background Type: Select the type of background for the compare button.
  • Border Type: Select a border type for the compare button.
  • Typography: Select typography options as font-family, size, weight, transform, style, decoration, line-height, letter-spacing.