Elements

The Elements category in the Porto theme documentation provides a complete reference to all reusable design components available in Porto’s Page Builder integrations, including WPBakery and Elementor. These elements serve as the building blocks for creating custom layouts, enhancing user interfaces, and improving the visual and functional experience across your website.

Porto Elements include everything from structural components (rows, columns, containers) to interactive tools such as sliders, buttons, carousels, grids, forms, icons, counters, accordions, and dynamic WooCommerce elements.

Whether you’re building a product page, portfolio, blog layout, landing page, or a fully dynamic WooCommerce storefront, the Elements category helps you understand how to use each component effectively. It guides you through configuration options, best practices, and available style controls so you can build professional-grade pages with ease.

Porto Product Attribute Table Element

The Porto Product Attribute Table element lets you display product attributes (such as size, material, origin, or flavor) in a clean, structured table format on the single product page. It provides full control over which attributes are displayed, as well as extensive styling and layout options...

Porto Sticky Add To Cart Element

The Porto Sticky Add to Cart element ensures that your product’s essential purchase actions remain visible at all times — even while scrolling. This element helps boost conversions by keeping the Add to Cart button, product title, price, rating, and availability information accessible without requiring users...

Porto Product Tabs Element

The Porto Product Tabs element lets you display WooCommerce’s built-in product details — such as Description, Additional Information, and Reviews — in a highly customizable tabbed interface. It offers a flexible design system that supports tab or accordion layouts, responsive behavior, and extensive styling controls for...

Porto Prev and Next Navigation Element

The Porto Prev and Next Navigation element in the Single Product Builder allows users to seamlessly navigate between products without returning to the shop or category page.This feature enhances user experience by keeping shoppers engaged and encouraging product discovery. You can fully customize its appearance —...

Porto Product Meta Element

The Porto Product Meta element is used to display essential product details such as SKU, categories, and tags on your WooCommerce single product page.It provides flexible design options that allow you to control layout, spacing, and typography—ensuring the meta information aligns perfectly with your brand’s...

Porto Add To Cart Element

The Porto Product Add to Cart element is one of the most essential components in the Single Product Builder. It allows you to display and fully customize the Add to Cart form, including the quantity selector, cart button, and variation controls for variable products. This element...

Porto Linked Products Element

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...

Porto Product Description Element

The Porto Product Description element is a key component of the Single Product Builder, allowing you to display your product’s full description exactly where you want it within your product layout. This element automatically pulls the content from the WooCommerce Product Description field, ensuring your product...

Porto Product Excerpt Element

The Porto Product Excerpt element is part of the Porto Single Product Builder, designed to display the short description of your WooCommerce product. This excerpt provides a quick summary or promotional highlight of the product — often shown near the title, price, or Add to Cart...

Porto Product Price Element

The Porto Product Price element is a key component of the Single Product Builder that displays your WooCommerce product’s price dynamically. It automatically reflects regular prices, sale prices, and variable product pricing based on WooCommerce data — ensuring accuracy without any manual updates. You can also fully...