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 Woo Price Element

The Woo Price element is a dynamic pricing block used inside the Porto Post Type Builder to display the product’s price within custom product card layouts. It automatically pulls the regular price, sale price, and price range (if variations exist) directly from WooCommerce. The element...

Porto Content Element

The Porto Content element is a dynamic text block within the Porto Post Type Builder that outputs either the post content or a customizable excerpt from the current post or product. This widget is commonly used in blog grids, portfolio cards, product listings, event cards,...

Porto Featured Image Element

The Featured Image element is one of the primary dynamic widgets in the Porto Post Type Builder. It displays the featured image of the current post or product within a custom post-type layout. This element supports multiple image display modes, hover effects, link options, product...

Porto Archive Description Element

The Archive Description element in Porto allows you to display the descriptive text of your product archive or taxonomy archive (such as product categories or product tags). This is especially useful when you want to provide context, introduce a category, highlight featured collections, or improve...

Porto Archive Title Element

The Archive Title element in the Porto theme allows you to display the main title of any WooCommerce or WordPress archive page—such as product archives, category archives, tag archives, or custom taxonomy archives. This element ensures that your archive pages follow a consistent and visually appealing...

Porto Shop Hooks Element

The Porto Shop Hooks element allows you to insert WooCommerce shop-level action hooks directly into your custom Product Archive template. These hooks give you fine-grained control over where WooCommerce or third-party plugin outputs appear within the archive (shop) page layout. This element is ideal for advanced users...

Porto Shop Page Subcategories Element

The Shop Page Subcategories element in the Porto theme allows you to display product subcategories within your WooCommerce product archive pages. This element is especially useful for shops with layered category structures, enabling you to visually present subcategories in a clean grid layout. It works with...

Porto Filter Toggle Element

The Filter Toggle element in the Porto theme is a simple yet powerful tool used in product archive pages built with WPBakery Page Builder or Elementor. This widget does not contain any internal configuration options. Its sole purpose is to control the visibility of product...

Porto Grid / List Toggle Element

The Grid/List Toggle element in the Porto theme allows users to switch between grid view and list view on product archive pages. This enhances the shopping experience by giving visitors full control over how products are displayed. This element works in combination with the Porto...

Porto Pagination Element

The Pagination (Count Per Page) element in Porto allows you to control how many products are displayed per page on your WooCommerce product archive. This element also displays pagination controls whenever pagination is disabled inside the Type Builder Archives element. It provides detailed styling options...