Skip to main content

GridSter

GridSter​

GridSter is a Gutenberg supported plugin which is based on WooCommerce. The purpose of this plugin is to provide product-grid layout which can be used through out the site for different types of data display. Multiple grid layouts will be supported in future updates.

To install GridSter follow this procedure. Either

wp-admin dashboard -> BoroBazar -> Plugins

or

wp-admin dashboard -> Appearance -> BoroBazar Required Plugins

Getting Started​

This chapter is to discuss the available Gutenberg blocks currently via the GridSter. After the installation & activation of the GridSter plugin this following Gutenberg blocks are activated in the page editor area.

gridster-blocks.jpeg

Block Title​

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

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

  • Font settings : This section is going to be used for the font size control of the title/subtitle.

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

  • 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.

  • 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.

Featured products block is used to display the products featured by WooCommerce settings. There are multiple settings option for this Gutenberg blocks.

  • 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.

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.

  • 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.

  • 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.

  • 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.

Handpicked Products​

Handpicked products block is used to display the product choosen or featured by the site admin. There are multiple settings option for this Gutenberg blocks.

  • 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.

  • Reset block : reset the complete blocks again for reuse.

Products by Category​

Products by 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.

  • 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 Tag​

Products by 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.

  • 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.

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

  • Enable Transient on ShortCodes : To enable transient for cache & faster reloading the block data.

  • Transient expiration time : Set the transient expiration time, after whcih the transient data will be set again.

  • Set "See all products" page : In block grid (slider mode) there is a option to set the see all products page redirection link.

  • Save changes : This button will save all the changes inside WordPress database options table.

  • Delete Transient : This button will delete all the existing transient data of GridSter plugin from WordPress database.

Hooks & Filters [For Developers]​

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_featured_products This filter returns the whole markup of Featured 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.