[wps_search]
The ShopWP search shortcode displays a dynamic search form which will show products immediately as the user types what they're looking for.
This feature is only available in ShopWP Pro.
Example Usage​
// Drops the search results into a container with the id of #search-container
[wps_search dropzone_form="#search-container"]
Available Attributes​
sort_by​
Determines the products sort order. Corresponds to the Shopify API values.
| Possible values |
|---|
| title (default) |
| vendor |
| id |
| price |
| best_selling |
| product_type |
| created_at |
| updated_at |
Example
[wps_search sort_by="price"]
reverse​
Reverses the order of products. Useful when used in combination with sort_by.
| Possible values |
|---|
| true |
| false |
Example
// Smallest to largest (A to Z) (old to new)
[wps_search 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.
| Possible values |
|---|
| Any number |
Example
// Shows 4 products per page
[wps_search 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_search page_size="2" limit="10"]
// Only show one product
[wps_search 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_search excludes="title, pricing"]
items_per_row​
Determines how many products will appear in each row.
| Possible values |
|---|
| Any text string |
Example
[wps_search items_per_row="5"]
pagination​
Determines whether to hide or show pagination.
| Possible values |
|---|
| true |
| false |
Example
[wps_search pagination="false"]
no_results_text​
The text to show when no products are found.
| Possible values |
|---|
| Any text string |
Example
[wps_search no_results_text="Nothing found! 🙃"]
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_search 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_search infinite_scroll_offset="-100"]
no_results_text​
Specifies the text to use when no results are found.
Default: No results found
[wps_search no_results_text="Custom no results text with emojis 🚨"]
search_placeholder_text​
Specifies the placeholder text for the search input
[wps_search search_placeholder_text="Try typing something special"]
dropzone_form​
Specifies where the search form should render. Takes any valid CSS selector.
[wps_search dropzone_form="#search-form"]
dropzone_load_more​
When pagination is set to true, this allows for specifying a custom location in the DOM to place the pagination "load more" control component. Takes any valid CSS selector. When set to false, the load more button will be placed directly below the products output. Default: false.
The HTML element specified will be completely emptied and replaced with the load more component.
Example
[wps_search dropzone_load_more="#my-custom-load-more-container"]
dropzone_payload​
Specifies where the products being searched should render. Takes any valid CSS selector.
[wps_search dropzone_payload="#search-payload"]
dropzone_loader​
Specifies where the search loading indicator should render. Takes any valid CSS selector.
[wps_search dropzone_loader="#search-loader"]