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.
Popup #
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.