[wps_products]
The ShopWP products shortcode allows you to display one or more products in a list or grid. This is perfect for filtering and sorting products.
While you can show a single product using this shortcode, the real power comes from showing a general list of products. You can filter and sort your products in various combinations. For example, you can choose to display products from a single collection using the collection attribute. Or, combine different filtering groups to search for very a specific combination such as tag and vendor.
Every attribute below can also be used with the following shortcodes:
- [wps_products_title]
- [wps_products_pricing]
- [wps_products_gallery]
- [wps_products_description]
- [wps_products_buy_button]
Shortcode Examples​
// Display products from a collection named Featured
[wps_products collection="featured"]
// Displays the cheapest 10 products
[wps_products sort_by="price" limit="10"]
// Displays products in rows of 5, sorted by best selling
[wps_products items_per_row="5" sort_by="best_selling"]
// Link products to the Shopify detail pages and show only the featured image
[wps_products link_to="shopify" show_featured_only="true"]
Available Attributes​
Attribute | Default | Description |
---|---|---|
title | false | Display products based on one or more product titles |
tag | false | Display products based on one or more product tags |
vendor | false | Display products based on one or more product vendors |
collection | false | Display products from one or more collections |
product_type | false | Display products based on one or more product types |
available_for_sale | false | Display products based on their availability |
product_id | false | Display products based on one or more product ids |
post_id | false | Display products based on one or more WordPress post id(s) |
query | false | Use a custom query to filter products |
query_exclude | false | Allows for excluding certain products from the list of products |
sort_by | false | Determines the sort order when displaying multiple products |
reverse | false | Reverse the order of products |
page_size | 10 | Determines the number of products to show per page |
limit | false | Limits the overall number of products that show |
connective | false | Determines how the products are found when filtering |
subscriptions | false | Determines whether to enable subscriptions for the specific product |
subscriptions_select_on_load | false | Whether to automatically select subscriptions on load |
subscriptions_details_text | See below | This will be the text that shows in the subscription tooltip |
subscriptions_details_heading | How subscriptions work: | The tooltip heading text |
subscriptions_details_label | Subscription details | The subscriptions details text |
subscriptions_hide_onetime | false | Whether to always hide the "one time" subscription option |
keep_commas | false | Whether to search products with commas in their title |
direct_checkout | false | Allows for linking customers directly to the Shopify checkout process |
align_height | false | Attempts to "align" the height of products when displayed in a grid |
grid_column_gap | false | Specifies the space between products This is useful when showing products in a grid layout |
html_template | false | Specifies a custom template to be used for the product html |
show_price_under_variant_button | false | Show the price under each variant button |
show_images_carousel | false | Determines whether to show the product images as a carousel |
image_carousel_thumbs | false | Determines whether to show the product thumbnails within an images carousel |
variant_style | false | Determines the visual style of the product variant controls |
hide_quantity | false | Determines whether to hide the product quantity input |
show_variant_button_labels | true | Determines whether to show or hide the label text of each product option above the buttons. For example "Color" or "Size". |
show_pricing_above_add_to_cart_button | false | Determines whether to show the pricing component above the add to cart button or not. Default false . |
min_quantity | false | Sets a "minimum" number to the quantity field |
max_quantity | false | Sets a "maximum" number to the quantity field |
excludes | false | Allows for excluding certain product components like the title, description, etc |
with_search | false | Allows for showing a search field for the products |
items_per_row | false | Determines how many products will appear in each row |
show_price_range | false | Determines whether to show price ranges for each product |
show_compare_at | false | Determines whether to show the compare at price for each product |
quantity_label_text | false | Customizes the label text next to the quantity input field |
show_featured_only | false | Determines whether to only show the product feature image |
show_zoom | false | Determines whether to enable product image zooming |
pagination | false | Determines whether to hide or show pagination |
pagination_load_more_button_color | #415aff | Determines the color of the load more button |
pagination_load_more_text | Load more | Determines the text of the load more button |
no_results_text | false | The text to show when no products are found |
description_length | false | Determines how long the product description should be in characters |
infinite_scroll | false | When turned on, the next page of items will automatically append to the container |
infinite_scroll_offset | false | Determines the offset from the edge of the items container |
full_width | false | When set to true , will force the product to span the width of its container |
link_to | false | Allows for determining where products link to, if anywhere |
link_target | false | Allows for determining whether links open in a new tab or not Default: _self |
link_with_buy_button | false | Determines whether to show the buy button controls when linking |
carousel | false | Allows for showing products in a carousel style |
carousel_dots | false | Determines whether to show the carousel dots or not |
carousel_infinite | false | Determines whether to continue sliding through products endlessly |
carousel_autoplay | false | Determines whether to start the carousel automatically on page load |
carousel_autoplay_speed | 3000 | Determines how fast the carousel will rotate when autoplay is turned on. Defaults to 3 seconds. |
carousel_speed | 500 | Determines the carousel speed |
carousel_slides_to_show | 4 | Determines the number of carousel slides to show at once |
carousel_slides_to_scroll | 4 | Determines the number of carousel slides to scroll at once |
carousel_prev_arrow | false | Allows to specifying a custom "previous slide" arrow icon |
carousel_next_arrow | false | Allows to specifying a custom "next slide" arrow icon |
images_align | false | Allows for determining how the featured image is positioned horizontally |
images_show_next_on_hover | false | Determines whether to show the next image when hovering over the featured image |
images_lazy_load | true | Determines whether to lazy load the images using the loading attribute |
images_sizing_toggle | false | Determines whether to enable custom image sizing |
images_sizing_width | false | Sets the width when using custom image sizing |
images_sizing_height | false | Sets the height when using custom image sizing |
images_sizing_scale | false | Sets a custom "scale" for the product images |
images_sizing_crop | false | Specifies a "crop" position for the image |
thumbnail_images_sizing_toggle | false | Whether to size the product thumbnails |
thumbnail_images_sizing_width | false | Sets the width of the product thumbnails |
thumbnail_images_sizing_height | false | The product thumbnail height |
thumbnail_images_sizing_scale | false | Sets a custom "scale" for the product thumbnails |
thumbnail_images_sizing_crop | false | Specifies a "crop" position for the thumbnail image |
show_out_of_stock_variants | false | Determines whether to show out of stock variants or not |
show_inventory_levels | false | Determines whether to show the inventory levels notice or not |
left_in_stock_threshold | false | Determines the threshold for showing the "left in stock" inventory notice |
cache_templates | false | Determines whether to cache the html template response |
container_width | false | Determines the product's max container width |
mobile_columns | false | Determines the number of columns to show on mobile |
select_first_variant | false | Allows for selecting the first product variant on page load |
reset_variants_after_adding | false | Determines whether to reset the variant selections after adding to cart |
with_sorting | false | Determines whether to show a sorting / filtering dropdown above the products |
with_page_size | false | Determines whether to show a page size dropdown above the products |
after_added_text | false | Determines the button text that shows after adding to cart |
clear_selections_text | false | Allows for customizing the "clear selections" text |
quantity_step | false | Allows for customizing the "quantity step" for the product quantity input |
color_swatch_names | false | Set the CSS color swatch names |
image_zoom_options | false | Allows for customizing the image zoom options |
show_sale_notice | false | Determines whether to show the "sale" notice on product images |
show_out_of_stock_notice | false | Determines whether to show the "out of stock" notice on products |
image_placeholder | false | Allows for customizing the product placeholder image |
title_class_name | false | Allows for adding a custom class name to the product title |
notice_unavailable_text | false | Allows for customizing the text shown when a product is unavailable to purchase |
out_of_stock_notice_text | false | Allows for customizing the "out of stock" message shown |
sale_label_text | Sale! | Allows for customizing the "sale" label text displayed on the product images |
sold_out_image_label_text | Sold out | Allows for customizing the "sold out" label text |
show_reviews | false | Whether to show reviews rating above the product title or not |
title_color | #111111 | Customizes the background-color of an add to cart button |
title_type_font_family | false | Customizes the font-family of an add to cart button |
title_type_font_size | false | Customizes the font-size of an add to cart button |
title_type_font_style | false | Customizes the font-style of an add to cart button |
title_type_font_weight | false | Customizes the font-weight of an add to cart button |
title_type_letter_spacing | false | Customizes the letter-spacing of an add to cart button |
title_type_line_height | false | Customizes the line-height of an add to cart button |
title_type_text_decoration | false | Customizes the text-decoration of an add to cart button |
title_type_text_transform | false | Customizes the text-transform of the product's add to cart button |
pricing_color | false | Customizes the background-color of an add to cart button |
pricing_type_font_family | false | Customizes the font-family of an add to cart button |
pricing_type_font_size | false | Customizes the font-size of an add to cart button |
pricing_type_font_style | false | Customizes the font-style of an add to cart button |
pricing_type_font_weight | false | Customizes the font-weight of an add to cart button |
pricing_type_letter_spacing | false | Customizes the letter-spacing of an add to cart button |
pricing_type_line_height | false | Customizes the line-height of an add to cart button |
pricing_type_text_decoration | false | Customizes the text-decoration of an add to cart button |
pricing_type_text_transform | false | Customizes the text-transform of the product's add to cart button |
description_color | #111111 | Customizes the background-color of an add to cart button |
description_type_font_family | false | Customizes the font-family of an add to cart button |
description_type_font_size | false | Customizes the font-size of an add to cart button |
description_type_font_style | false | Customizes the font-style of an add to cart button |
description_type_font_weight | false | Customizes the font-weight of an add to cart button |
description_type_letter_spacing | false | Customizes the letter-spacing of the description |
description_type_line_height | false | Customizes the line-height of an add to cart button |
description_type_text_decoration | false | Customizes the text-decoration of the description |
description_type_text_transform | false | Customizes the text-transform of the description |
variant_dropdown_button_text_color | #FFFFFF | Customizes the text color of the variant dropdown |
variant_dropdown_type_font_family | false | Customizes the font-family of the variant dropdown |
variant_dropdown_type_font_size | false | Customizes the font-size of the variant dropdown |
variant_dropdown_type_font_style | false | Customizes the font-style of the variant dropdown |
variant_dropdown_type_font_weight | false | Customizes the font-weight of the variant dropdown |
variant_dropdown_type_letter_spacing | false | Customizes the letter-spacing of the variant dropdown |
variant_dropdown_type_line_height | false | Customizes the line-height of the variant dropdown |
variant_dropdown_type_text_decoration | false | Customizes the text-decoration of the variant dropdown |
variant_dropdown_type_text_transform | false | Customizes the text-transform of the variant dropdown |
variant_dropdown_button_color | #52a7a6 | Determines the variant dropdown color |
add_to_cart_button_text | Add to cart | Determines the buy button text |
add_to_cart_button_text_color | #FFFFFF | Determines the buy button text color |
add_to_cart_button_color | false | Customizes the background-color of an add to cart button |
add_to_cart_button_type_font_family | false | Customizes the font-family of an add to cart button |
add_to_cart_button_type_font_size | false | Customizes the font-size of an add to cart button |
add_to_cart_button_type_font_style | false | Customizes the font-style of an add to cart button |
add_to_cart_button_type_font_weight | false | Customizes the font-weight of an add to cart button |
add_to_cart_button_type_letter_spacing | false | Customizes the letter-spacing of an add to cart button |
add_to_cart_button_type_line_height | false | Customizes the line-height of an add to cart button |
add_to_cart_button_type_text_decoration | false | Customizes the text-decoration of an add to cart button |
add_to_cart_button_type_text_transform | false | Customizes the text-transform of an add to cart button |
dropzone_product_title | false | Customizes where the product title should display |
dropzone_product_pricing | false | Customizes where the product pricing component should display |
dropzone_product_description | false | Customizes where the product description component should display |
dropzone_product_gallery | false | Customizes where the product images component should display |
dropzone_product_buy_button | false | Customizes where the product buy button component should display |
dropzone_load_more | false | Allows for specifying a custom location in the DOM to place the pagination |
title​
Display products based on one or more product titles. Comma-separate to display multiple products by title.
When filtering by title, ShopWP does not apply strict equality. It will return any product that "contains" the word. So if you have more than one product with the same group of words in the title, both will be returned.
If you want to filter with a strict equality use the post_id, product_id, or query attributes instead.
Possible values |
---|
Any valid Shopify product title(s) |
Example
// Display a product with the title "Example Product"
[wps_products title="Example Product"]
// Display two products
[wps_products title="Example Product 1, Example Product 2"]
tag​
Display products based on one or more product tags. Comma-separate to display products from multiple tags.
Possible values |
---|
Any valid product tag(s) |
Example
// Display products that contain "Tag A"
[wps_products tag="Tag A"]
// Display products that contain "Tag A" or "Tag B"
[wps_products tag="Tag A, Tag B"]
vendor​
Display products based on one or more product vendors. Comma-separate to display products from multiple vendors.
Possible values |
---|
Any valid product vendor(s) |
Example
// Display products that contain "Vendor A"
[wps_products vendor="Vendor A"]
// Display products that contain "Vendor A" or "Vendor B"
[wps_products vendor="Vendor A, Vendor B"]
collection​
Display products from one or more collections. Comma-separate to display products from multiple collections.
Pagination will only work when filtering by one collection. If you want to filter by multiple, set the page_size attribute higher to compensate.
Possible values |
---|
One or more collection title(s) |
Example
// Display products from collection "Featured Products"
[wps_products collection="Featured Products"]
// Display products from collection "Featured Products" or "Games"
[wps_products collection="Featured Products, Games"]
product_type​
Display products based on one or more product types. Comma-separate to display products from multiple product types.
Possible values |
---|
Any valid product type(s) |
Example
// Display products of Audiobook product types
[wps_products product_type="Audiobook"]
// Display products of Audiobook or Hardcover product types
[wps_products product_type="Audiobook, Hardcover"]
available_for_sale​
Display products based on their availability. Setting to true
will only show products that are in stock. Setting to any
will show products that are also out of stock.
Possible values |
---|
true |
any (default) |
Example: Only show products that are in-stock
[wps_products available_for_sale="true"]
Example: Only show products that are out-of-stock
[wps_products available_for_sale="false"]
product_id​
Display products based on one or more product ids. The product id can be found within your Shopify admin. Open the product edit screen and examine the URL in your browser's address bar. The numeric product id will be at the end.
For more information, Shopify has a tutorial you can follow here.
Possible values |
---|
Any valid Shopify product id |
Example
// Show product with id: "93283473232"
[wps_products product_id="93283473232"]
// Show products with ids: "2216928411696" or "93283473232"
[wps_products product_id="2216928411696, 93283473232"]
post_id​
Display products based on one or more WordPress post id(s).
Possible values |
---|
Any valid product post id |
Example
// Show product with post id: "35421"
[wps_products post_id="35421"]
// Show products with post ids: "35421" or "35418"
[wps_products post_id="35421, 35418"]
query​
Allows you to construct your own query based on the Shopify search syntax.
Possible values |
---|
Any valid Shopify search criteria |
Example
// List 5 products with the name "Caramel Apple", or products that have an inventory of over 500 items and less than or equal to 1000 items.
[wps_products query="(title:Caramel Apple) OR (inventory_total:>500 inventory_total:<=1000)"]
query_exclude​
Allows you to exclude certain products from the list of products.
Note: this will only work if you're not filtering by a collection!
Possible values |
---|
Comma seperated list of product ids (string) |
current (string) |
Example
// Show products with tag "super", but also exclude products with id 123 and 456
[wps_products tag="super" query_exclude="123, 456"]
// Exclude the currently shown product. Only works when showing products in a product detail page template
[wps_products query_exclude="current"]
sort_by​
Determines the sort order when displaying multiple products.
Corresponds to the ProductSortKeys inside the Shopify API
Possible values |
---|
title Default |
best_selling |
created_at |
id |
price |
product_type |
updated_at |
vendor |
collection_default (filter by collection only) |
manual (filter by collection only) |
created (filter by collection only) |
Example
// Sort products by lowest price
[wps_products sort_by="price"]
// Sort products by highest price
[wps_products sort_by="price" reverse="true"]
// Sort products by best selling
[wps_products sort_by="best_selling"]
// Sort products alphabetically (A-Z)
[wps_products sort_by="title"]
// Sort products reverse alphabetically (Z-A)
[wps_products sort_by="title" reverse="true"]
reverse​
Reverse the order of products. Useful when used in combination with sort_by.
Possible values |
---|
true |
false |
Example
// Low to high ($0 - $100)
[wps_products sort_by="price"]
// High to low ($100 - $0)
[wps_products sort_by="price" 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_products 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_products page_size="2" limit="10"]
// Only show one product
[wps_products limit="1"]
connective​
The connective attribute determines how the products are found when combining other filtering attributes.
For example, the below shortcode will only display products with both Tag 1
and Tag 2
.
[wps_products tag="Tag 1, Tag 2" connective="and"]
Possible values |
---|
and |
or Default |
Example
// Products with either title will show
[wps_products title="Awesome product, Even better product" connective="or"]
// Only products with both Tag1 and Tag2 will show
[wps_products tag="Tag1, Tag2" connective="and"]
subscriptions​
Determines whether to enable subscriptions for the specific product.
Subscription functionality is only available with ShopWP Pro and the ShopWP Recharge extension.
Possible values |
---|
true |
false Default |
Example Show the subscriptions widget
[wps_products subscriptions="true"]
subscriptions_select_on_load​
Determines whether to auto select the subscription option when the product loads. This is useful if you provide both "one-time" and subscription options for your products.
This feature is only available with ShopWP Pro.
Possible values |
---|
true |
false Default |
Example
// Select the subscriptions option automatically when the product loads
[wps_products subscriptions_select_on_load="true"]
subscriptions_details_text​
This will be the text that shows inside the subscriptions tooltip.
Possible values |
---|
Any string of text |
Example
[wps_products subscriptions_details_text="Custom tooltip text"]
subscriptions_details_heading​
This will be the text that shows as a heading for the subscriptions tooltip.
Possible values |
---|
Any string of text |
Example
[wps_products subscriptions_details_heading="Here's how our subscriptions work:"]
subscriptions_details_label​
This will be the text that shows as a heading inside the subscriptions tooltip.
Possible values |
---|
Any string of text |
Example
[wps_products subscriptions_details_label="Subscription details"]
subscriptions_hide_onetime​
This allows you to hide the one-time subscription option manually.
Possible values |
---|
true |
false Default |
Example
[wps_products subscriptions_hide_onetime="true"]
keep_commas​
By default, if you have a product with commas in the title, ShopWP will treat this as multiple different product titles. Setting keep_commas
to true will allow you to search products with commas in their title.
Possible values |
---|
true |
false (default) |
Example
[wps_products title="This, is my, product" keep_commas="true"]
direct_checkout​
Allows for linking customers directly to the Shopify checkout process. This will bypass the default ShopWP cart experience altogether.
This feature is only available with ShopWP Pro.
Possible values |
---|
true |
false Default |
Example
[wps_products direct_checkout="true"]
align_height​
Attempts to "align" the height of products when displayed in a grid. This is useful if you want to keep the buy buttons on the same level.
Possible values |
---|
true |
false (default) |
Example
[wps_products align_height="true"]
grid_column_gap​
Specifies the space between products. This is useful when showing products in a grid layout.
The value you set will be interpreted as pixels, so do not add the px
to the end. For example, if you want to set the space to 50 pixels, set the value to 50
, not 50px
.
Possible values |
---|
Any number or false |
Example
// Set the gutter between products to 50 pixels
[wps_products grid_column_gap="50"]