Product Listing

Product Listing

If you want to give a better look to the part of the Product Listing of your website/product, we have made a convenient and well-designed Block using this you can show the upcoming product on your website. This will also help in your single post or page on your website.

Pro tip
Why not add product listing to your website using this widget, You will get multiple post layouts to choose from. Choose the layout which suits your product the best.

Configuration for Product Listing

In Product Listing block you can see the details of your post for Normal, Archive, Single page and you can use search list too.

How to use the Product Listing Block of The Plus Addons For Gutenberg

The Product Listing block comes with different layouts and customized styling options using which you can create stylish-looking posts for your websites.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Product Listing into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Product Listing after “/” sign, eg.“/Product Listing”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content Layout

Types

Select the preferred Product Listing Types for the Post. You will get three options here:
1. Normal Page
2. Archive Page
3. Single Page Related Products

Select Related Post Type

Select the preferred Post Types for the Single Page. You will get three options here:
1. Based on Category
2. Based on Tags
3. Both

Select Style

Select your preferred style for the post. You will get three style options here:
1. Style 1
2. Style 2
3. Style 3

Select Layout

Select your preferred Layout for the post listing here. You will get three layout options here:
1. Grid
2. Masonry
3. Carousel

Query

Select Product Category

Select your category from the ones available in the dropdown.

Select Product Tag

Select your preferred tags. You can add multiple tags.

Include Post

Set which posts you want to include by entering the post title.

Exclude Post

Set your desired posts to exclude by entering the post title.

Maximum Posts Display

Set the maximum number of posts to display per page.

Offset Posts

This option is used to hide posts at the beginning of the listing.

Order By

Order your listings based on date, author, title, random, comment count, etc.

Order

Order your listings based on date, author, title, random, comment count, etc.

Display Product

You can see all the products filter-wise.

Columns Manager

Columns Gap/Space

Select how much Gap will be there in between the Columns.

Desktop Column

Set the column you want to display on desktop devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Tablet Column

Set the column you want to display on Tablet devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Mobile Column

Set the column you want to display on Mobile devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Filters

Category Wise Filter

By enabling this option you can see the filter category and filter customization options here.

Select Filter by

You can select filter by an option between category or tag here.

All Filter

By enabling this option you can see all category options here.

All Category Text

Change the custom text of the All Filter default text.

Select Style

Select a style for category filter.

Select Hover Style

Select a style for category filter hover.

Filter Name

You can set the custom filter name for category style 4 here.

Alignment

Set the alignment of your filter to left, right or center.

Extra Options

Title Tag

Select a title tag for your product.

Variable Product Price Range

By enabling you can see the variable product price range.

On Hover Image Change

By enabling this option, you can change the image on the hover if it is available.

Display Category

By enabling this option, you can see the category on the product.

Display Rating

By enabling this option, you can see the product’s rating.

Cart Button Display

By enabling this option, you can see the cart button options.

Add to Cart Text

You can set the custom cart button text.

Select Options Text

You can set the custom select options text.

Display YITH Buttons

By enabling this option, you can see the display YITH button options.

Compare

By enabling this option, you can see the compare options.

Wishlist

By enabling this option, you can see the Wishlist options.

Quick View

By enabling this option, you can see the display image size options.

NOTE :

Above four options (Display YITH Buttons to Quick View) are only available with the YITH Woo Commerce quick view premium plugin version.

Display Image Size

By enabling this option, you can see the display image size options.

Display Image Size

Set the Display Image Size options here.

Load More Options

Select your preferred post loading option from the dropdown. We have provided you with Pagination, Lazy Load and Load More.

Post View On Click/On Scroll

You can display more posts on click and on scroll here.

Button Text

You can set custom button text to load more options here.

Loading Text

You can set custom loading text here.

All Post Loaded Text

You can set custom-loaded text here.

2. Style

The Style tab is used for customizing the appearance of all the Product Listing Block components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the title.

Price

Margin

Put-in some outer space to an element.

Price Typography

Assign a size, weight, spacing, and much more to fonts.

Price Color

A color picker to assign a suitable color to the price.

Previous Price Typography

Assign a size, weight, spacing, and much more to fonts.

Previous Price Color

A color picker to assign a suitable color to the price.

Badge Style

Display Badge

Set the size of the icon from here.

Out of Stock Style

Set the size of the icon from here.

Out of Stock Text

Set the size of the icon from here.

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Background Color

A color picker to assign a suitable background color to the text.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

On Sale Style

Give Box/Text/Drop shadow effect and color to an element.

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Background Color

A color picker to assign a suitable background color to the text.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Background

Content Alignment

Set The Content Alignment here.

Content Padding

Put in some inner space to an element.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Product Image

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Border Radius

Set the radius curve of the element’s corner.

Add To Cart Button

Padding

Put in some inner space to an element.

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Icon Color

A color picker to assign a suitable color to the icon.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

YITH Buttons

Padding

Put in some inner space to an element.

Margin

Put-in some outer space to an element.

Width

Set the width of a button from here.

Height

Set the height of a button from here.

Icon Size

Set the size of an icon from here.

Color

A color picker to assign a suitable color to the Button.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

YITH Buttons Box

Padding

Put in some inner space to an element.

Margin

Put-in some outer space to an element.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Box Loop Background Style

Padding

Put in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Filter Category

Typography

Assign a size, weight, spacing, and much more to fonts.

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Category Filter Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Count Background

Apply suitable background like color/ gradient to an element.

Category Count Color

A color picker to assign suitable color to the count value.

Count Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Pagination/Load More Button/Lazy Load

Pagination Typography

Assign size, weight, spacing and much more to fonts.

Pagination Text Color

A color picker to assign a suitable color to the text.

Pagination Text Hover Color

A color picker assigns a suitable color to an element on hover.

Button Text Typography

Assign a size, weight, spacing, and much more to fonts when you selected the load more option.

Text Color

A color picker to assign a suitable color to the text when you selected the load more option.

Background

Apply a suitable background like color/gradient to an element when you selected the load more option.

Border

Draw a border around the element and give width and color when you selected the load more option.

Border Radius

Set the radius curve of the element’s corner when you selected the load more option.

All Post Loaded Text Typography

Assign a size, weight, spacing, and much more to fonts.

All Post Loaded Text Color

A color picker to assign a suitable color to the text.

Loading Spinner Border Size

You can set the loading spinner border size when you selected the lazy load option.

Loading Spinner Color

A color picker assigns a suitable color to the spinner when you selected the lazy load option.

Carousel Options

Slider Mode

Select slide direction of slider from here.

Height Ratio

You can set Hight ratio for vertical layout here.

Slide Speed

Slider speed in milliseconds.

Columns

Select how many columns you want to have per slide.

Default Slide Active

Select the first slide to display on slider load.

Next Previous

Select if you want to rotate all rows at once or not.

Columns Gap/Space

Put in some space between columns.

Draggable

If slider is draggable, then you can drag any slide to side and see the next one without using arrows for navigation.

Infinite Mode

If slider is in infinite mode, slider will repeat it self after last slide.

Pause on Hover

Slider will stop sliding on mouse hover.

Auto play

If auto play is enabled, slider will be in play state when page load is completed.

Auto play Speed

Slide shifting time for auto play.

Show Dots

Select if you want dots / slide count or not.

Dots Style ⭐

Select dots / slider counter style from here.

Border Color

A color picker to assign suitable color to the border.

Active Border Color

A color picker to assign suitable color to the currently active slide’s border.

Background Color

A color picker to assign suitable color to the background.

Active Background Color

A color picker to assign suitable color to the currently active slide’s background.

Dots Top Margin

Apply space from top in root container from here.

On Hover Dots ⭐

Show dots only on hover.

Show Arrows

Show arrows / slider navigator or not.

Arrows Style ⭐

Select arrows / slider navigator’s Style from here.

Arrows Position⭐

Select arrows / slider navigator’s Position from here.

Background Color

A color picker to assign suitable color to the background of arrows.

Icon Color

A color picker to assign suitable color to the icons of arrows.

Hover Background Color

A color picker to assign suitable color to the background of arrows on hover.

Hover Icon Color

A color picker to assign suitable color to the icons of arrows on hover.

Outer Arrows

Place arrows outside it’s root container or not.

On Hover Arrows ⭐

Show arrows only on hover.

Centre Mode

Centre mode enables active slide to be shown as visually center or in braced up mode.

Centre Padding ⭐

Put-in some inner space to centered slide.

Centre Slide Effect ⭐

Choose how you want to make look centre slide different from others.

Scale ⭐

Choosing scale would make centre slide look bigger than others. Choose scale for centre & normal slides from below options.

Shadow ⭐

Choosing shadow would create shadow effect on center slide different than others. Apply custom shadow from below option provided.

Normal Slide Opacity ⭐

Apply opacity / transparency for normal slide from here.

Trim Space ⭐

Apply opacity / transparency for normal slide from here.

Post Not Found Options

Padding

Put in some inner space to an element.

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.