[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 |
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 | Determines whether to auto select the subscription option when the product loads |
subscriptions_autoload | false | Determines whether the subscription data will show on page load or not |
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_quantity_label | false | Determines whether to show or hide the "label" to the quantity selection element |
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 |
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_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_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 with 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 |
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_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)"]
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"]