Skip to main content

[wps_storefront]

Displays the "storefront" component containing filtering, pagination, and sorting. Only available in ShopWP Pro. Take note that this shortcode contains three required attributes.

Watch our quick video tutorial to learn how to use this.

Example Usage

// Render the storefront without tag filters
[wps_storefront show_tags="false"]

// Force two products per row and sort by price
[wps_storefront items_per_row="2" sort_by="price"]

// Show products without the description present
[wps_storefront excludes="description"]

Available Attributes

dropzone_payload

Specifies where the actual filter results should render. Takes any valid CSS selector.

Example

[wps_storefront dropzone_payload="#dropzone-payload"]

dropzone_options

Specifies where the selectable filter options should render. Takes any valid CSS selector.

Example

[wps_storefront dropzone_options="#dropzone-options"]

dropzone_selections

Specifies where the selected user choices should render. Takes any valid CSS selector. Omitting will hide user selections all together.

Example

[wps_storefront dropzone_selections="#dropzone-selections"]

sort_by

Determines the products sort order. Corresponds to the Shopify API values. Will be overwritten if user uses the provided sorting dropdown.

Possible values
title (default)
vendor
id
price
best_selling
product_type
created_at
updated_at

Example

[wps_storefront sort_by="price"]

reverse

Reverses the order of products. Useful when used in combination with sort_by. Will be overwritten if user uses the provided sorting dropdown.

Possible values
true
false

Example

// Smallest to largest (A to Z) (old to new)
[wps_storefront sort_by="title" reverse="true"]

page_size

Determines the number of products to show per page. Only applicable when pagination is turned on. Will default to the plugin's global products per page setting. Will be overwritten if user uses the provided page size dropdown.

Possible values
Any number

Example

// Shows 4 products per page
[wps_storefront page_size="4"]

limit

Limits the overall number of products that show. Max limit is 250.

Possible values
Any number

Example

// Show two products per page, up to 10
[wps_storefront page_size="2" limit="10"]

// Only show one product
[wps_storefront limit="1"]

excludes

Allows for excluding certain product components like the title, description, etc. Takes a comma separated string of values.

Possible values
images
title
pricing
description
buy-button

Example

// Don't show the title or pricing
[wps_storefront excludes="title, pricing"]

items_per_row

Determines how many products will appear in each row.

Possible values
Any text string

Example

[wps_storefront items_per_row="5"]

pagination

Determines whether to hide or show pagination.

Possible values
true
false

Example

[wps_storefront pagination="false"]

no_results_text

Specifies the text to use when no filter results are found. Default: No results found.

[wps_storefront no_results_text="Custom no results text with emojis ๐Ÿšจ"]

infinite_scroll

When turned on, the next page of items will automatically append to the container. Only works when pagination is used.

Possible values
true
false

Example

[wps_storefront infinite_scroll="true"]

infinite_scroll_offset

Determines the offset from the edge of the items container. For example, a value of -100 will begin loading additional items 100px before the end of the items container. Offset can be a positive or negative value.

Possible values
Any positive or negative number

Example

[wps_storefront infinite_scroll_offset="-100"]

dropzone_sorting

Specifies where the sorting component should render. Takes any valid CSS selector. Omitting will hide sorting all together.

Example

[wps_storefront dropzone_sorting="#dropzone-sorting"]

dropzone_pagination

Specifies where the pagination should render. Takes any valid CSS selector. Omitting will hide pagination all together.

Example

[wps_storefront dropzone_pagination="#dropzone-pagination"]

show_tags

Specifies whether to allow the user to filer by product tags. Setting to false will hide the ability to filter by tags.

Example

[wps_storefront show_tags="false"]

show_vendors

Specifies whether to allow the user to filer by product vendors. Setting to false will hide the ability to filter by vendors.

Example

[wps_storefront show_vendors="false"]

show_types

Specifies whether to allow the user to filer by product types. Setting to false will hide the ability to filter by types.

Example

[wps_storefront show_types="false"]

show_options_heading

Specifies whether to show the default "Filter by" options heading.

Example

[wps_storefront show_options_heading="false"]

available_for_sale

Display products based on their availability. Setting to true will only show products that are in stock.

Possible values
true
any (default)

Example

[wps_storefront available_for_sale="true"]

price_heading

Allows for customizing the heading of the "Pricing" filter group. Default: Price.

Possible values
Any valid string

Example

[wps_storefront price_heading="Custom price heading"]

collections_heading

Allows for customizing the heading of the "Collections" filter group. Default: Price.

Possible values
Any valid string

Example

[wps_storefront collections_heading="Custom collections heading"]

types_heading

Allows for customizing the heading of the "Types" filter group. Default: Price.

Possible values
Any valid string

Example

[wps_storefront types_heading="Custom types heading"]

tags_heading

Allows for customizing the heading of the "Tags" filter group. Default: Price.

Possible values
Any valid string

Example

[wps_storefront tags_heading="Custom tags heading"]

vendors_heading

Allows for customizing the heading of the "Vendors" filter group. Default: Price.

Possible values
Any valid string

Example

[wps_storefront vendors_heading="Custom vendors heading"]

filter_by_label_text

Allows for customizing the "Filter by" label. Default: Filter by:.

Possible values
Any valid string

Example

[wps_storefront filter_by_label_text="Custom filter by text"]

page_size_label_text

Allows for customizing the "Page size" label. Default: Page size:.

Possible values
Any valid string

Example

[wps_storefront page_size_label_text="Custom page size text"]

clear_filter_selections_text

Allows for customizing the "Clear selections" text that shows after selecting a filter. Default: Clear selections.

Possible values
Any valid string

Example

[wps_storefront clear_filter_selections_text="Custom clear selections"]

selections_available_for_sale_text

Allows for customizing the "Available for sale" text. Default: Available for sale.

Possible values
Any valid string

Example

[wps_storefront selections_available_for_sale_text="Custom available for sale"]

sort_by_label_text

Allows for customizing the "Sort by" text. Default: Sort by:.

Possible values
Any valid string

Example

[wps_storefront sort_by_label_text="Custom sort by text"]

no_filter_group_found_text

Allows for customizing the text shown when no filter group is found. Default: No %s found.

Possible values
Any valid string. Use the %s character to dynamically show filter group type

Example

[wps_storefront no_filter_group_found_text="Custom text"]

filterable_price_values

Allows for customizing the available price values that users can select.

Example

add_filter(
'shopwp_storefront_default_payload_settings',
function ($storefront_settings) {
$storefront_settings['filterable_price_values'] = [
'$0.00 - $15.00',
'$15.00 - $25.00',
'$25.00 - $50.00',
'$50.00 - $100.00',
'$100.00 +',
]

return $storefront_settings
}
)