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.