Introduction #
With the Related Products Options, you can add a related products section to the single product page of your online store. You can add a related products section even without using the Rishi Pro plugin. However, the premium version provides more customization and design options.
To access the premium features for the Related Products section, you will first need to install and activate the Rishi Pro plugin and the WooCommerce plugin and then activate the Advanced WooCommerce extension.
Activating the Advanced WooCommerce Extension #
You can access the Advanced WooCommerce Extension via Dashboard > Appearance > Rishi Theme > Extensions > Pro Extensions. Then click the Activate button to get the Advanced WooCommerce extension to work.
Once the extension is activated, you can access the Related Products Options setting via Dashboard > Appearance > Customize > WooCommerce > Single Product > Related Products Options.
The following are the settings that you can use to configure the Related Products section.
General Setting #
Show Related Products?: Enable this option to show the Related Products section on the single product page.
Related Products Title: Enter the Related Products section title here.
Related Products: Enter the number of products you want to display inside the Related Products section.
Related Products per Row: Choose the number of products you want to display per row in the Related Products section.
Move to Default tab section: Enable this option if you want to shift the Related Products section to the default tab in the single product page.
Related Product Label: Enter the tab label you want to display for the Related products section. This option is visible only when the Move to Default tab section option is enabled.
Image: You can choose the aspect ratio and width value for the related product image here.
Image Ratio: You can choose one of the three provided options i.e. Original, Predefined and Custom.
On choosing the Original option, the images will be displayed using the aspect ratio in which they were uploaded.
If you choose the Predefined option then you will need to select one out of the eight provided aspect ratio options.
And, if you choose the Custom option then you can apply your own preferred aspect ratio to the related product image.
Image Size: Here, you can enter the width value for the related product image. The image height will be automatically calculated based on the image ratio you have chosen.
Star Rating: Enable this option to display review ratings obtained by the listed products.
Sale Badge: Enable this option to display sale badge for the related products that are on sale.
Show Category: You can enable this option to display the product categories of the listed related products.
Card Design: Here you can choose to either add a background color to the existing card layout or not.
Content Alignment: You can select the alignment for the related products card content.
Design Setting #
The following are the different options provided under the Design settings tab:
Title Color: You can choose the initial and hover color for the Related Products section title.
Category Color: You can choose the initial and hover color for the product category text.
Price Color: Select the price color for the listed related products.
Button Text Color: Choose the initial and hover color for the Add to Cart button text.
Button Background Color: Choose the initial and hover background color for the Add to Cart button.
Button Border Color: Choose the initial and hover color for the button border.
Button Font: Select the typography setting for the button font.
Button Roundness: Select the border radius for the button.
Button Padding: Enter the padding value for the Add to Cart button.
Card Radius: Enter the border radius for the Related products card.
To display the below listed settings for the Card Caption, you need to select the Background option for the Card Design.
Card Caption Background Color: Choose a background color for the related products card caption.
Card Caption Box Shadow: You can add a box shadow effect to the related products card caption by configuring this setting.
Related Products Section Frontend View #
