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.