VMuikit X - Add Related Products
Article Index
- VMuikit X
- How to install
- Recommended VM settings for VMuikitX
- Content Sources (Dynamic Content)
- Custom Category
- Custom Product
- VirtueMart Product Details Layout
- Child Products table
- Custom Badges for VM Products
- Add Ask a question button
- Add VM custom fields
- Add Product Ratings & Reviews
- Add Related Products
- Add Previous & Next Product link
- VirtueMart Category Layout
- VM Sub or child Categories
- VM Category Module
- VM Category Sorting Filter
- VM Category Products Prices Display
- VirtueMart Manufacturer Default Layout
- VM Order Thank You Page Layout
- VM Content Fields
- Custom Elements
- VM AddtoCart
- VM Category
- VM Category Grid
- VM Product
- VM Product Grid
- VM Grid
- VM Utilities
- Modules
- Component
- One Page Checkout plugin
- Shortcode Plugin
- Custom changes in VMuikit X override files
- Override VMuikit X modules layout files
- Override VMuikit X OPC layouts
- Override VM dynamic content fields in VMuikit X
- How to fix VMuikit X onepage checkout language issues?
- How to fix VMuikit X layout issues?
- Video Tutorials
- All Pages
Page 13 of 41
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.
