Products

The Responsive Addons for Elementor (RAE) 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.