Product List Guide – Shop Page

What is Product List?

SureCart offers a flexible product list block to showcase a grid of your products in your store. This guide will walk you through the customization options and features available for your product list.

When you set up your store in SureCart, a default shop page named Shop — Sample Page is automatically created for you.

This page contains some sample product items, displaying them based on the chosen theme. You can always populate these with your own products later on.

You can find this page under the Pages section in your WordPress dashboard.

Product List Customization Features

SureCart provides a range of customization options to tailor your product list according to your preferences. Here are some key options:

Products per Page

You can choose how many products displayed per page to suit your layout preferences.

Auto Fixed Columns

You can choose a fixed number of columns to display or set a minimum column width to automatically adjust to your page size

Pagination Options

If you have a large number of products, you can enable the Paginate option to organize them across multiple pages.

This feature adds Next and Previous buttons, allowing users to easily navigate between pages. Additionally, it displays a message indicating the total number of items across all pages. You can rearrange these elements and choose between various pagination icons—or none at all, if preferred.

You also have the flexibility to customize the pagination font size. Use the dropdown menu to adjust the font size for the page numbers, as well as the Next and Previous buttons. Each can be styled individually to better fit your design.

Sort and Filter

Sorting and filtering options help your customers navigate your products more easily, especially when you have a large number of items on your shop page.

You can move, add, or remove filters as needed.

Customers can sort products by their latest additions, oldest items, price (low to high) and price (high to low). You can also set the default sorting option to match your shop’s needs.

Taxonomy Filtering

SureCart allows you to assign custom taxonomies to products and filter them within the product list block.

To add a filter, duplicate an existing filter block, and in the settings panel on the right, select the desired taxonomy under the Taxonomy dropdown. You can also rename the filter to make it more descriptive and better suited to your needs.

Search Products

Your customers have the ability to search for specific product within your list. In case you don’t want to show the search, you can simply remove this block.

The search bar appears in the top-right corner of your product list.

Choose the Products You Want to Display

Select which products you want to display on your product list. You can either show all, featured, or hand-picked products based on your preference.

Edit Products

SureCart allows you to edit each product card individually, giving you complete control over how your products are displayed.

By customizing each product card, you can create a tailored and visually appealing layout for your shop.

In this editor, you can:

• Change the text size and font of product titles.
• Update product images.
• Set custom price ranges.
• Adjust the padding between product items.

These options, along with many others, enable you to create a polished and fully customized appearance for your products.

Integrating ShortCodes

For those who prefer shortcodes, SureCart provides the flexibility to configure your product list.

[sc_product_list] - Display a list of products in a grid.   
   "columns": It sets the number of columns, defaulting to 4.   
   "limit": It sets the maximum limit, defaulting to 15.   
   "pagination_enabled": It enables or disables pagination, defaulting to enabled (true).   
   "ajax_pagination": It activates or deactivates AJAX pagination, defaulting to enabled (true).   
   "pagination_auto_scroll": It turns on or off automatic scrolling when new results are loaded, defaulting to on (true).   
   "search_enabled": It allows or disallows the use of a search function, defaulting to allowed (true).   
   "sort_enabled": It permits or prohibits sorting functionality, defaulting to permitted (true).   
   "ids": The product ids you want to show here, separated by a comma.   
   type="custom": This is useful if you do not wish to display all of the products from the shop page on a page but only custom ones. 

If you want to add a product list to a page builder, use the following shortcode.

Ensure that the entire shortcode is on one line:

[sc_product_list columns="3" limit="9" ids="049627ac-f5e0-4157-a530-c4b2dbef82bb,c960b061-d321-43e3-a151-8c40b35f0c22,a114295c-198a-4e33-aa47-ab7d07172193" search_enabled="true" sort_enabled="true" type="custom"]

That’s it! We hope this guide helped you. Feel free to explore this feature on your own, and don’t hesitate to reach out to our support team if you have any further questions or feedback.