The Porto Linked Products element is designed to display related, Cross and upsell products dynamically on your single product pages.
It enhances user engagement and increases cross-selling opportunities by showcasing relevant products that customers may also be interested in.
This element integrates seamlessly with the Porto Single Product Builder and supports full layout control — including grid style, column configuration, spacing, ordering, and typography — ensuring that related products match your site’s overall design.
How to Use the Porto Linked Products Element
-
Open the Single Product Template
- Navigate to Porto > Template Builder > Single Product.
- Edit your layout using Elementor or WPBakery.
-
Add the Linked Products Element
- From the Porto Single Product Elements panel, drag Linked Products into your design.
- Place it below the product summary or description section.
-
Customize the Display
- Configure Linked Type (to show related or upsell products).
- Adjust columns, layout, and heading style using the Element Content Options.
- Control product order, count, and appearance for a personalized product showcase.
-
Save and Preview
- Save the template and preview your product page.
- Verify that the linked products display correctly across all devices.
Element Content Options
| Option | Description |
|---|---|
| Post Mini Type Layout | Select the layout style for displaying linked product cards (grid or minimal). |
| Linked Type | Choose which type of products to display: Related, Cross or Upsell. |
| Count | Set the number of linked products to display. |
| Order By | Determine how products are ordered (e.g., Date, Title, Random, Menu Order). |
| Order | Choose ascending (ASC) or descending (DESC) order. |
| View | Select between grid, slider, or other available visual formats. |
| Column Spacing | Adjust the space between each product column. |
| Columns | Set how many product columns appear on desktop view. |
| Columns on Tablet | Define the number of columns for tablet view. |
| Columns on Mobile | Define the number of columns for mobile view. |
| Add Half Column | Enable half-column layout for more compact grid arrangements. |
| Image Size | Specify image dimensions or select a predefined image size (e.g., thumbnail, medium, large). |
| Custom Class | Add a custom CSS class for advanced styling or integration with your theme. |
| Show Title | Toggle to display or hide the section title (e.g., “Related Products” or “You May Also Like”). |
| Heading Content | Enter custom heading text for the section title. |
| Heading Typography | Customize heading font style, size, weight, and color. |
| Alignment | Align the content (left, center, or right). |
| Padding Bottom | Set bottom padding for spacing below the section content. |
| Hide Bottom | Enable or disable the visibility of the heading bottom divider. |
| Margin Bottom | Control the margin space below the heading. |
Additional Tips
- Use Linked Type Strategically: Display Upsell Products for higher-end alternatives and Related Products for complementary items.
- Optimize for Mobile: Adjust Columns on Mobile and Column Spacing to ensure a clean, scrollable display on smaller screens.
- Consistent Styling: Use the Heading Typography and Custom Class options to maintain consistent styling across all product elements.
- Performance Consideration: Keep the Count reasonable (e.g., 4–6 items) to avoid unnecessary page load delays.
- Visual Appeal: Combine with the Product Image element’s styling for cohesive presentation and improved user experience.
