Product Related

The Related Products Widget by Responsive Addons for Elementor neatly showcases similar items on your product pages. By showing related products, this widget helps customers discover more items, increases sales, and keeps them browsing longer.

Go to WordPress Dashboard > Pages > Add New Page.

Click the Edit with Elementor button to add the Product Related widget.

Search for Product Related widget and add it.

Drag and drop the RAE Product Related widget onto your product page.

Settings

Related Products section in Edit Product Related main section

Content Settings:

Products Per Page: Choose the number of related products to display on a single page.
Columns: Choose the number of columns to display products in.
Order By: Let’s you choose how the products will be sorted.
Order: Sorting order, either descending or ascending.

Style Settings:

Products:

Columns Gap: Controls the spacing between product columns.
Rows Gap: Controls the spacing between product rows.
Alignment: Align the product grid by choosing left, center, or right.
Image: Set the border style, Border Radius, and Spacing for your image.

Title, Rating, and Price sections in Edit Product Related main section

Title: Control the title color, typography, and spacing using the colour palette and the slider.
Price: Control the color of the price text and typography.
Rating: Control the Star colors, empty star colors, star size, and spacing for the ratings section.

Regular Price: Lets you set the color of the regular price section and customize the font style and size.

Button

Text Color: Choose the color of the button text in normal or hover state using the color palette.
Background Color: Choose the background color of the button in normal or hover state using the color palette.
Border Color: Choose the border color of the button in normal or hover state using the color palette.
Typography: Customize the button text.
Border Type: Select the style of the button border, i.e, default, solid, dashed, etc.
Border Radius: Control the corner roundness of your button.
Text Padding: Enter values to set the padding inside the button.
Spacing: Controls spacing around the button using the slider or enter values in pixel.
Automatically align buttons: Toggle for automatic alignment of buttons.

View Cart Settings

Color: Choose the color of the “View Cart” text or icon.
Typography: Customize the font style, size, and other text-related settings for the “View Cart” element.
Spacing: Adjust the spacing around the “View Cart” element.

Box Settings

Border Width: Set the width of the border around the box by entering values for top, right, bottom, and left, individually or linked together.
Border Radius: Control how rounded the corners of the box are using the slider.
Padding: Set the inner spacing inside the box by entering values for top, right, bottom, and left individually or linked.
Normal/Hover: Switch between settings for the normal state and hover state of the box.
Box Shadow: Add and customize shadow effects around the box.
Background Color: Choose the background color of the box using the color palette.
Border Color: Choose the color of the box border using the color palette.

Sale Flash setting in Edit Product Related main section

Sale Flash Settings

Sale Flash: Enables or disables the “Sale Flash” text.
Text Color: Choose the color of the text within the sale flash text.
Background Color: Choose the background color of the sale flash text.
Typography: Allows customizing the font style for the sale flash text.
Border Radius: Adjust the roundness of the corners of the sale flash text using the slider.
Width: Set the width of the sale flash text.
Height: Set the height of the sale flash text.
Position: Controls the position of the sale flash text.
Distance: Adjusts the distance of the sale flash from its position anchor.

Heading Settings

Heading: Enable or disable the heading display.
Color: Allows you to set the color of the heading text.
Typography: Allows customization of the font style, size, weight, and other typographic settings of the heading.

Now you know all the settings for the Product Related widget.

Product Related