Cartsy Documentation
Welcome
Installation
Theme Settings
Cartsy LayoutExtended SearchMenuPage Settings
Plugins
Cartsy AlgoliaDokanGridSterGetting StartedAvailable blocksBlocksFilters :Hooks :FireMobileSMSNotifierSocial LoginTranslationCompatible Plugins
Cartsy Rental
CustomizationPerformanceChild ThemeFAQBreaking ChangesChangelog

Cartsy GridSter

GridSter is a Gutenberg supported WooCommerce product grid plugin with multiple grid layouts.

To install go,

wp-admin -> Appearance -> Cartsy Required Plugins

and install GridSter [by RedQ, Inc]

Getting Started

After the installation & activation of the GridSter plugin this following Gutenberg blocks are activated in the page editor section

Available blocks

  • Block Title
  • Recent Products
  • Top Rated Products
  • Best Selling Products
  • On Sale Products
  • Products by Handpicked Category
  • Products by Handpicked Tag
  • Video Post Grid
  • Cherry Picked One
  • Featured Products
  • Promotion banner
  • Recent Blog posts
  • Special Deals

Blocks

This chapter is to discuss the available Gutenberg blocks currently via the GridSter plugin.

Block Title

Block title is a Gutenberg blocks for displaying title and subtitle if necessary.

BlockTitle.png

  • General settings : This section is going to be used for the alignment for the title/subtitle.

  • Spacing settings : This section is going to be used to add space top, bottom, left, and right.

  • Title settings : This section is going to be used for font size and space from title to subtitle.

  • Subtitle settings : This section is going to be used for font size for subtitle.

  • Color settings : This section is going to be used for define color for the title.

Recent Products :

Recent products block is used to display the most recently created products. There are multiple settings option for this Gutenberg blocks.

recentProducts_mzz7bj

  • Product Count : number of posts to display the products

  • Order : Select options either Ascending or Descending order to display the products

  • OrderBy : Select options for ordering the recent products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

recentProductsOutput_r6vbdx

Top Rated Products

Top rated products block is used to display the product with most rating. There are multiple settings option for this Gutenberg blocks.

topProduct_va90aj

  • Product Count : number of posts to display the products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

Best Selling Products

Best selling products block is used to display the product which have the highest number of sale. There are multiple settings option for this Gutenberg blocks.

bestSelling_syphh3

  • Product Count : number of posts to display the products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

On Sale Products

On sale products block is used to display the product which are currently on sale. There are multiple settings option for this Gutenberg blocks.

onSaleProducts_x4xj8a

  • Product Count : number of posts to display the products

  • Order : Select options either Ascending or Descending order to display the products

  • OrderBy : Select options for ordering the recent products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

Products by Handpicked Category

Products by Handpicked category block has given accessibility to admin about to choose any specific product category. After selecting the block there is an option for choosing the product categories (if presented any). From block editor toolbar admin can re-choose the category too. There are multiple settings option for this Gutenberg blocks.

productsByCategory_njopll selectCategory_cq9tc9

  • Product Count : number of posts to display the products

  • Order : Select options either Ascending or Descending order to display the products

  • OrderBy : Select options for ordering the recent products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

Products by Handpicked Tag

Products by Handpicked tag block has given accessibility to admin about to choose any specific product tag. After selecting the block there is an option for choosing the product tags (if presented any). From block editor toolbar admin can re-choose the tag too. There are multiple settings option for this Gutenberg blocks.

tag_dzifko selectTags_ivamy0

  • Product Count : number of posts to display the products

  • Order : Select options either Ascending or Descending order to display the products

  • OrderBy : Select options for ordering the recent products

  • Grid : Via this options admin can choose which grids are going to be used on front end for displaying the products

  • Spacing Settings : This section is going to be used to add space top, bottom, left, and right.

Settings

GridSter plugin has a global settings options. After installing & activating the plugin there will be an admin menu option in WP_Admin panel.

settings_etuqgs

  • Custom body class : By this option custom body class can be injected into theme body tag.

  • Animation (on grid thumbnails) : Lazy load animation on gird's thumbnail area can be turned off/on via this settings.

  • Add to cart notification : This setting is used to turn off/on a toast area for add to cart action.

Hooks & Filters

This section is for developers to get all the listed hooks & filters provided by the plugin.

Filters :

  • gs_admin_scripts_array This filter returns the enlisted scripts for the admin area in Array format.

  • gs_admin_styles_array This filter returns the enlisted styles for the admin area in Array format.

  • gs_frontend_scripts_array This filter returns the enlisted scripts for the front-end in Array format.

  • gs_frontend_styles_array This filter returns the enlisted styles for the front-end in Array format.

  • get_gs_background_styles This filter returns the CSS code for the front-end in String format. Which is used in the Gutenberg blocks.

  • get_gs_padding_styles This filter returns the CSS variables code for the front-end in String format. Which is used in the Gutenberg blocks spacing settings.

  • gs_grid_loop_item_classes This filter returns the CSS class code for Gutenberg blocks Grid in String format. Which is used in the Gutenberg block grids responsive mechanism.

  • gs_shortcode_lists This filter returns the enlisted Gutenberg blocks in Array format.

  • gs_item_loop_empty_wrap_classes This filter helps to attach/detach css classes in the markup when no product is found or empty.

  • gs_grid_loop_item_image This filter returns the markup which is used for displaying the Thumbnail area in product grids.

  • gs_grid_loop_item_image_gallery This filter returns the markup which is used for displaying the product gallery inside the thumbnail area of product grids.

  • gs_best_selling_products This filter returns the whole markup of Best selling products Gutenberg block.

  • gs_handpicked_category_products This filter returns the whole markup of Product by Handpicked Category Gutenberg block.

  • gs_handpicked_tagged_products This filter returns the whole markup of Product by Handpicked Tag Gutenberg block.

  • gs_on_sale_products This filter returns the whole markup of On Sale Products Gutenberg block.

  • gs_recent_products This filter returns the whole markup of Recent Products Gutenberg block.

  • gs_top_rated_products This filter returns the whole markup of Top Rated Products Gutenberg block.

  • gs_grid_item_title This filter indicates the title display area in the product grids.

  • gs_grid_loop_item_price This filter indicates the price display area in the product grids.

Hooks :

  • gs_grid_template_render_before This action hook render a template, which is located templates > global > template_render_before.php . This hooks execute before the grid markup & accepts 2 parameters.

    • customClass : Which is provided by default Gutenberg block's Additional Class section.

    • padding : Which is provided by a Gutenberg block's spacing settings.

  • gs_grid_template_render_after This action hook render a template, which is located templates > global > template_render_after.php This hooks execute after the grid markup.

  • gs_grid_loop_items_before_wrap This action hook is located just before the loop of displaying product girds.

  • gs_grid_loop_item_before This action hook is located just before the internal content area in grids.

  • gs_grid_loop_item_thumbnails This action hook is for displaying the thumbnail area. It accepts 4 parameters.

    • post_ID

    • thumbnail size.

    • placeholder image

    • posts slider switch. [upcoming]

  • gs_grid_loop_item_after This action hook is located just after the internal content area in grids.

  • gs_grid_loop_empty This action hook rendered a markup if there is no data/product available.

  • gs_grid_loop_items_after_wrap his action hook is located just after the loop closing of displaying product girds.

Template Override Facilities

Template override is very important feature for further customizations. GridSter plugin provides template overriding ability. User/Developer needs to create a folder named as gridster inside his/her theme main folder. Then copy the inner folder and templates from GridSter plugin's templates folder & paste it inside theme's created gridster which s/he wants to override.