Common product slider setups

This page includes some common product slider configurations that you can use as a starting point.

Each example includes the product slider and the shortcode configuration used to generate it.

One-column product slider

This configuration displays one product at a time on desktop, tablet and mobile devices.

Shortcode configuration:

[tps layout="card" columns_desktop="1" columns_tablet="1" columns_mobile="1" slides_to_scroll_desktop="1" slides_to_scroll_tablet="1" slides_to_scroll_mobile="1"]

---

Two-column product slider

This configuration displays two products on desktop and tablet devices and one product on mobile devices.

Shortcode configuration:

[tps layout="card" columns_desktop="2" columns_tablet="2" columns_mobile="1" slides_to_scroll_desktop="2" slides_to_scroll_tablet="2" slides_to_scroll_mobile="1"]

---

Three-column product slider

This configuration displays three products on desktop, two products on tablet devices and one product on mobile devices.

Shortcode configuration:

[tps layout="card" columns_desktop="3" columns_tablet="2" columns_mobile="1" slides_to_scroll_desktop="3" slides_to_scroll_tablet="2" slides_to_scroll_mobile="1"]

---

Products from a specific category

This configuration displays products belonging to a specific WooCommerce category.

Replace 15 with the ID of the product category that you want to display.

Shortcode configuration:

[tps category_filter_mode="include" product_categories="187"]

---

Products from multiple categories

This configuration displays products belonging to multiple WooCommerce categories.

Replace the example values with the IDs of the product categories that you want to display.

Shortcode configuration:

[tps category_filter_mode="include" product_categories="21,22"]

---

Sale products

This configuration displays only products that are currently on sale.

Shortcode configuration:

[tps layout="hero" sale_filter_mode="include"]

---

Sale products with discount percentage

This configuration displays only products that are currently on sale and shows the discount percentage inside the sale badge.

Shortcode configuration:

[tps sale_filter_mode="include" show_sale_percentage="1"]

---

Sale products from a specific category

This configuration displays only sale products belonging to a specific WooCommerce category.

Replace 15 with the ID of the product category that you want to display.

Shortcode configuration:

[tps category_filter_mode="include" product_categories="22" sale_filter_mode="include" show_sale_percentage="1"]

---

Featured products

This configuration displays only products marked as featured in WooCommerce.

Shortcode configuration:

[tps filter_featured="1"]

---

Newest products

This configuration orders products by publication date, starting with the most recent products.

Shortcode configuration:

[tps orderby="date" order="DESC"]

---

Oldest products

This configuration orders products by publication date, starting with the oldest products.

Shortcode configuration:

[tps orderby="date" order="ASC"]

---

Best-selling products

This configuration orders products according to the number of sales, starting with the best-selling products.

Shortcode configuration:

[tps orderby="sales" order="DESC"]

---

Top-rated products

This configuration orders products according to their average WooCommerce rating, starting with the highest-rated products.

Shortcode configuration:

[tps orderby="rating" order="DESC"]

---

Products ordered by lowest price

This configuration orders products by price, starting with the least expensive products.

Shortcode configuration:

[tps orderby="price" order="ASC"]

---

Products ordered by highest price

This configuration orders products by price, starting with the most expensive products.

Shortcode configuration:

[tps orderby="price" order="DESC"]

---

Random products

This configuration displays products in a random order whenever the page is loaded.

Shortcode configuration:

[tps orderby="rand"]

---

Specific products

This configuration displays only a manually selected group of products.

Replace the example values with the IDs of the WooCommerce products that you want to display.

Shortcode configuration:

[tps product_filter_mode="include" include_products="26,17,11,13"]