Product Upsells

The Responsive Addons for Elementor product upsells widget allows you to add cross-sells of complementary products to help increase average order value and provide personalized recommendations to your customers.

How to Add the RAE Product Upsells Widget?

To add the Elementor Product Upsells widget on your product page, follow these simple steps:

• Go to WordPress Dashboard > Pages > Add New Page. 

• Click the Edit with Elementor button to add the Product Upsells widget.

• Search by RAE Upsells and use the widget that has the RAE Badge.

• Drag and drop the RAE Upsells widget onto your product page.

How to Customize the RAE Product Upsells Widget?

The RAE product Upsells widget allows you to customize the content and style of the widget. Upon adding the product stock widget, it allows you to edit the following parts:

Content

Under the widget content options, you can edit the following:

• Columns: Select the number of columns to display for the upsells.
• Order By: Display the order and category of the content based on data, title, price, popularity, rating, random or menu order.
• Order: Select an order of display among ascending (ASC) or descending (DESC) for the upsells.

Style

Under the widget styling options, you can edit the following:

Products

• Columns Gap: Adjust the horizontal spacing between columns of products.
• Rows Gap: Adjust the vertical spacing between rows of products.
• Alignment: Set the alignment of the products within their container (left, center, right).
• Image:
  • Border Type: Define the border style around each product image (solid, dashed, dotted, etc.).
  • Border Radius: Adjust the product image border radius to round the corners.
  • Spacing: Set the spacing between the product image and its border.
• Title:
  • Color: Set the color of the product title text.
  • Typography: Adjust the font family, size, weight, style and other typographic settings for product titles.
  • Spacing: Control the spacing around the product title.

• Rating:
  • Star Color: Sets the color of the filled stars in product ratings for reviewed products.
  • Empty Star Color: Set the color of the unfilled stars in product ratings.
  • Star Size: Adjust the size of the star icons in the ratings.
  • Spacing: Control the spacing around the rating stars.
• Price:
  • Color: Set the color of the product price text.
  • Typography: Adjust the font style, size, weight, and other typographic settings for the product price.
• Regular Price:
  • Color: Set the color of the regular price text (usually shown when a discount is applied).
  • Typography: Adjust the font style, size, weight, and other typographic settings for the regular price.

• Button:
  • Text Color: Set the color of the text on the button in normal and hover states.
  • Background Color: Change the background color of the button in normal and hover states.
  • Border Color: Define the border color of the button in normal and hover states.
  • Typography: Adjusts the font style, size, weight, and other typographic settings for button text. (Can be adjusted only if the button is in normal state)
  • Border Type: Defines the style of the button border (solid, dashed, dotted, etc.).
  • Border Radius: Adjust the border-radius to round the corners of the button for a softer look.
  • Text Padding: Sets the inside spacing between texts in the button.
  • Spacing: Adjust the spacing of the button.
  • Automatically Align Buttons: Toggle for automatic alignment of the button.

• View Cart:
  • Color: Change the color of the “View Cart” button.
  • Typography: Adjust the font style, size, weight, and other typographic settings for the “View Cart” button.
  • Spacing: Control the spacing around the “View Cart” button.

Box

• Border Width: Set the width of the border around each product box.
• Border Radius: Adjust the border-radius to round the corners of the product box.
• Padding: Adjust the inner spacing of the product box.
• Box Shadow: Add a shadow effect around the product box for depth.
• Background Color: Set the background color of the product box.
• Border Color: Define the color of the border around the product box.

Sale Flash

Sale Flash: Toggle to show a flash sale of products that will further allow you to edit:

• Text Color: Change the content color within the sale flash texts.
• Background Color: Changes the background color of the sale flash label.
• Typography: Adjusts the font style, size, weight, and other typographic settings for the sale flash text.
• Border Radius: Adjusts the border-radius to round the corners of the sale flash label for a softer look.
• Width: Set the width of the sale flash label.
• Height: Set the height of the sale flash label.
• Position: Determine the position of the sale flash label on the product image.
• Distance: Set the distance of the sale flash label from the edges of the product image.

Heading

• Heading: Customize the heading text of the product section.
• Color: Change the color of the heading text.
• Typography: Adjust the font style, size, weight, and other typographic settings for the heading.