VMuikit X - Add Related Products

Add Related Products

Using this feature you can create a grid which displays the related virtuemart products.

• Initially create the custom fields in virtuemart:
• Go to "Components -> Virtuemart -> Custom Fields" and press New.
• Fill all the required fields as per your below screenshot.
• Click "Save&Close" to save the settings.

• After creating the custom field for "Related Products", let's go to your preferred product .
• Select a prefferred product and go to the Custom Fields Tab.
• Then from the "Related Products", search for related products from the text box and assigned.

• Open "YOOtheme" website builder inside the Joomla admin and go to the product details page of that product in which related products are added.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined virtuemart product details template layout using yootheme elements with virtuemart dynamic content sources.

• Then click "Add element" on the builder under which element you want to place "Related products" .

• Select "Grid" element on the builder and add it into the product details page .

• Click on the "Grid" element to configure new item.

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item, then select the option "VM Product Details" from "DYNAMIC CONTENT" and "VM Related Products" from "MULTIPLE ITEMS SOURCE".

• Once a virtuemart content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.