The related products widget allows displaying the block with Related products both on a product page and on any other site page. It allows you to specify the number of columns, order, control the display of elements and customize the block styles.
For further work, you need the Elementor and WooCommerce to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Related products such as order, number of columns, display of elements, etc.
- Products – the option allows you to select the product whose related product will be displayed. The selection is available if the widget is added to a regular page and not a product page.
- Order by – select by which fields the products in the block will be sorted: Date, Title, Popularity, Price, Rating, Random, Menu order.
- Order – select the type of products order in the block: DESC, ASC.
- Columns – specify the number of columns in one row for different devices(desktops, tablets, mobiles).
- Products per page – specify the number of products per page.
- Product content alignment – specify the alignment of the product content: Left, Center, Right.
- Title alignment – specify the alignment of the block title: Left, Center, Right.
- Show Title – the toggle to enable/disable the block title.
- Show sale flash – the toggle to enable/disable the sale flash display.
Style tab
On the style tab, you can manage the element styles of the Related products widget like a background in different states, borders, padding/margin, typography, etc.
Products
- Columns gap – specify product column gap for different devices using the slider
- Rows gap – specify product rows gap for different devices using the slider
Title/Product title/Price/Sale Price/Button/View cart link
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Product box
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Image
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- CSS Filters – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Rating
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Rating star size – specify the size of the rating icons using the slider.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
Sale flash
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The block style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
