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 Result Count Element

The Product Result Count element is a shop-utility widget provided by the Porto theme for building WooCommerce product archive pages. It displays the number of products currently shown on the page, helping customers understand how many items match their filters, search query, or category selection. This...

Porto Sort By Element

The Porto Sort By element allows you to display a customizable sorting dropdown on your product archive or shop pages. This control lets users reorder products by criteria such as popularity, rating, date, or price. The element is available in both Elementor and WPBakery, but in...

Porto Type Builder Archives Element

The Type Builder Archives element displays archive listings (products, portfolios, members, events, etc.) using layout blocks created with Porto → Template Builder → Post Type. To fully control grid vs. list views you should create Post Type blocks in the Template Builder and then select...

Porto Product Hooks Element

The Porto Product Hooks element allows you to insert various WooCommerce action hook locations directly into your custom single product template. This feature is designed for advanced users who want to integrate custom code, 3rd-party plugin outputs, or special functionality that relies on WooCommerce hooks. Some hooks...

Porto Product Compare Element

The Porto Product Compare element adds a Compare button to your single product page, allowing customers to compare products using the YITH WooCommerce Compare plugin. This element is fully integrated with the YITH Compare functionality and appears automatically when the plugin is installed...

Porto Product Notice Element

The Porto Product Notice element is a simple but essential component in the Single Product Builder. It displays WooCommerce system messages—such as “Product added to cart,” errors, stock warnings, or any other WooCommerce notices—directly in the location where you place this element. Unlike other widgets, the...

Porto Product Share Element

The Porto Product Share element allows you to display social sharing icons on your single product pages. This element makes it easy for customers to share your products on their favorite platforms, increasing visibility and engagement. All share icons shown in this element are defined globally...

Porto Product Review Element

The Porto Product Review element is a dedicated component of the Single Product Builder that displays the customer review section on your WooCommerce product pages. This element requires no configuration—it automatically pulls and displays reviews based on native WooCommerce settings. The element is fully compatible with...