Features Archives - Porto Documentation

WooCommerce Products Filters

porto_admin — Mon, 15 Oct 2018 08:20:49 +0000

Most of the themes use filtering widgets such as price, size, color, etc in sidebars. Porto theme provides 3 extra filtering layouts.

Horizontal Filter 1 – This layout displays the toggle button at the top of content which opens or closes the filtering sidebar.
Horizontal Filter 2 – This layout displays filtering widgets horizontally at the top of content.
Off Canvas Filter – This layout displays toggle button at the top of content which leads to the filtering section on the left side of the window.

You can set filter layout in Porto -> Theme Options -> WooCommerce -> Product Archives or in Edit Category page.

You can check these filters in this demo site.

The post WooCommerce Products Filters appeared first on Porto Documentation.

Pre-defined Product Layouts

porto_admin — Mon, 15 Oct 2018 08:38:54 +0000

Porto theme provides 9 single product layouts.

You can select default product layout in Theme Options -> WooCommerce -> Single Product.

You can select product layout options for any single product.

Please check demo site to see each product layouts.

The post Pre-defined Product Layouts appeared first on Porto Documentation.

Image Swatch

porto_admin — Mon, 15 Oct 2018 08:46:02 +0000

If you enable image swatch, please go to Theme Options > Woocommerce > Single Product > Variation Selection Mode and select Image / Color Swatch.
Then you can see swatch section in the product edit page.

At first, please add new attribute to be displayed as image swatch.

Then please add variations and select thumbnail image to be displayed when selecting image swatch.

Finally in the “Swatches” tab, select images or colors for the attribute values.

If you want to display image and color swatch in shop pages, please go to Theme Options > Woocommerce > Product Archvies > Show Color / Image swatch and enable it.

The post Image Swatch appeared first on Porto Documentation.

Sticky Sidebar

porto_admin — Mon, 15 Oct 2018 08:54:37 +0000

If you want to use sticky sidebar, please enable Porto > Theme Options > General > Enable Sticky Sidebar option.

If you want to know how sitcky sidebar works, please visit porto shop demos.

The post Sticky Sidebar appeared first on Porto Documentation.

Porto Studio

porto_admin — Mon, 22 Jul 2019 06:19:08 +0000

Porto Studio is a website building tool which provides pre-defined layouts and styles for Porto. Porto Studio includes whole web site templates including pages, page sections, headers, footers, single products, blocks, etc.
Please check Porto Studio site to see what Porto Studio is and how it works.

Studio Candidate

From 6.6.0 and up, Porto offers studio candidate. If you input the element title, the related studios will be displayed.

This is available in WPBakery Page Builder Bakend Editor, Frontend Editor, Elementor and Visual Composer.

Porto Studio panel has category filter section at the left and demo filter section at the top.

Porto Studio allows you to import blocks in a page so you can easily create a new page and it is possible to combine several demo contents into a page.

The post Porto Studio appeared first on Porto Documentation.

Using page layouts and custom css fields in Elementor editor

porto_admin — Fri, 03 Apr 2020 10:05:20 +0000

Porto provides Porto Settings section to set page settings such as page layout, sidebar and custom css.

If you want to go to the page settings panel, please click “Settings” icon at the bottom and left corner of the editor. You can see “Porto Settings” section in the panel.

The post Using page layouts and custom css fields in Elementor editor appeared first on Porto Documentation.

Display Condition

porto_admin — Mon, 28 Dec 2020 10:04:06 +0000

After creating header, footer, product and shop builders using Templates Builder, you need to set display condition which determines where you want to display. In the old version of Porto, only one header or footer is available throughout the site. Using display condition you can use different headers, footers, single product layouts or shop layouts for the specific pages. For example, you can create two headers which are named “default header” and “product header”, and use a default header throughout the site and a product header for the single product pages. Please check this video for more details.

https://www.portotheme.com/wordpress/porto/documentation/assets/videos/display_condition.mp4

How to use display condition in WPBakery and WordPress Editor?

How to use display condition in Elementor?

How to use display condition in Visual Composer?

The post Display Condition appeared first on Porto Documentation.

Compatibility of YITH Compare

porto_admin — Fri, 14 May 2021 13:36:33 +0000

Do you know Yith Compare?

YITH is one of the most popular WordPress plugins. Yith Compare plugin is used to compare products each other in multi-vendor, market e-commerce sites. Porto 6.1.0 provides compatibility with Yith Compare for multi-vendor users.

So if you want to use Yith Compare, please install this plugin and enable Porto > Theme Options > Woocommerce > Product Archives > Show Compare option.

The post Compatibility of YITH Compare appeared first on Porto Documentation.

Banner Effects: Kenburns, Snowfall, Sparkle

porto_admin — Fri, 14 May 2021 14:07:19 +0000

Porto 6.1.0 provides 3 fantastic banner animation effects in the Porto Interactive Banner element: namely Kenburns, Snowfall and Sparkle effects. Porto 6.1.0 also offers 9+ banner overlay effects which are amazing.

Please look at them in the Banner Element page.

1. Kenburns Effect

This effect might give you special feeling of smooth moving.

2. Snowfall & Sparkle Effects

These effects might give you special feeling of fantasy and imagination.

3. Hover Effects

These effects might give you special feeling of friendliness.

The post Banner Effects: Kenburns, Snowfall, Sparkle appeared first on Porto Documentation.

Mouse Parallax

porto_admin — Tue, 14 Sep 2021 06:48:51 +0000

Porto 6.2.0 provides mouse parallax functionality for building awesome websites. This is available in WPBakery Page Builder and Elementor Page Builder.

Please look at this mouse parallax element page.

How to use Mouse parallax functionality in two different page builders?

In WPBakery Page Builder, you could use Porto Animation element for setting mouse parallax options.

In Elementor Page Builder, you could set this option in “Porto Options” tab of elementor edit panel. All elements are available since they all have this tab.

Mouse Parallax Options

Mouse parallax enable option – This option allows you to animate any elements tracking your mouse move.
Mouse parallax inverse? – This option makes your elements tracking your mouse inversely.
Mouse parallax speed – This option controls animation size.

The post Mouse Parallax appeared first on Porto Documentation.