Grid: Products

See Preview

In this article you will find the unique information about Grid: Products shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.

This shortcode uses Product & Add To Cart  shortcode. You can use easily use Product presets to style its items.
Examples Of Use:

You can view our beautiful preview with Grid: Products examples.

Detailed shortcode description

Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.

GeneralProductElementsIcon ButtonsAdd To CartAdd To Cart: HoverAdd To Cart: NoticesPaginationAnimations
Option Description
Main Preset Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button.

After choosing preset from dropdown you have to Reload it to take effect. Learn More »

Columns Number Select number of displayed columns.
Gap Choose gap between grid items.
Data source Select source type for carousel.
Posts Define list of posts displayed by this grid.
Taxonomies or Tags Define posts tags, categories or custom taxonomies. It will filter the posts to display only the ones with specified tag/category.
Sort by Select posts sorting parameter.
Order Select posts sorting order.
Items Per Page Define maximum number of displayed posts per page. If the number of posts meeting the above parameters is smaller it will only show those posts.
Enter Animation Enter Animation allow to specify an appear effect for shortcode. Learn More »
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.

After HoverChoose which elements should be displayed under the thumbnail.

Option Description
Item Preset Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More »
Thumbnail Height Specify height for thumbnails.
Product Select post to display. Start typing and if it’s available it will complete automatically.
Main Section Specify settings for slider items. Here you can decide which elements will be visible.
Lower Bar – Main Section Choose which elements should be displayed under the thumbnail.
After Hover – Main Section Enable elements you want to display. Drag to place them in desired order.
Background – Main Section Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border – Main Section In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Padding – Main Section It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Appear Effect Select appear effect (fade, slide to, push to, … ) for main section elements.
Hover – Background – Main Section Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Hover – Border – Main Section In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Hover – Padding – Main Section It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Animation Type Choose animation type. Replace regular content or move it. Separate options will be available for those animation styles.
Inline Content Switch to disable fullwidth content (this option allows you to create a floating box).
Elements & Order Enable blocks and place them in desired order.
After Hover Enable blocks and place them in desired order.
Out Effect Select hover effect for regular content when hovering over thumb.
Position Select the content position.
Alignment Select the content position.
Thumbnail – Effect Select one of the available effects – Zoom In, Zoom Out, Zoom In With Rotate, Zoom Out With Rotate, Slide, Shine, Circle, Flashing
Color Option available after choosing thumbnail effect; Choose effect color.
Zoom Option available after choosing thumbnail effect; Choose the zoom level in percents.
Rotate Option available after choosing thumbnail effect; Choose the rotation degree. This slider accepts negative values
Direction Option available after choosing thumbnail effect; Select the animation direction after hover.
Movement Size Option available after choosing thumbnail effect; Choose the movement in percents of the whole item size.
Thumb Section – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Fill Whole Area Switch to fill whole area.
Thumb Section – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Thumb Section – Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
In Effect Choose items animation on hover.
Position Select the content position.
Alignment Select the content position.
Hover Thumb Section – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Fill Whole Area Switch on to fill whole area with overlay.
Hover Thumb Section – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Hover Thumb Section – Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Product – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Option Description
Title – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Title Overflow Switch to option to show the full title.
Hover Color Choose font color after hover.
Title – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Price – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Sale Price Color Choose color for sale price.
Price – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Categories – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Link Color Choose color for link
Hover Color Choose font color after hover.
Taxonomies Separator Specify a character to separate each of taxonomies.
Categories – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Rating Alignment Select alignemnt for rating.
Icons Gap Specify gaps between icons.
Select icon Choose icon that you like. You can change the icons library at the top. You can also search the icons by keywords. Remember to use as few different icons libraries across your page as possible. Learn More »
Color Set color of icons.
Size Define icon size.
Select icon Choose icon that you like. You can change the icons library at the top. You can also search the icons by keywords. Remember to use as few different icons libraries across your page as possible. Learn More »
Color Set color of rating icons.
Rating – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Buttons List Enable blocks and place them in desired order.
Buttons Alignment Choose one of nine positions for items.
Buttons Direction Select buttons direction – vertical or horizontal.
Buttons Gap Specify gap between buttons.
Show on hover Enable this option to show buttons on thumbnail hover.
Buttons Effect Select enter effect for buttons.
Permalink – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Lightbox – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Size Define icon size for Icon Font and Character types.
Color Select icons color
Background Choose background for icons.
Buttons – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Hover – Color Change icon color.
Hover – Background Change backround color.
Hover – Border Change border color.
Buttons – Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Buttons – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Main Preset Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. After choosing a preset click the load button to use it. Learn More »
Full Width Display button at 100% width of its container.
Auto Size Enable to adjust the button size if hover content is bigger than button.
Title Type Select which title type you want to use. Please notice that you can disable Icon in each of them by not selecting it.
Title Text displayed on the button.
Icon Position Set icon position on left or right side of the text.
Custom Icon Gap Set gap width between icon and button title.
Content – Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Hover Title Type Select which title type you want to use. Please notice that you can disable Icon in each of them by not selecting it.
Icon Color Select Icon Color.
Hover Title Text displayed on the button in hover state.
Hover Effect Choose hover state animation style.
Hover – Simple Typography Simple Typography field gives you a control over color, size and/or font alignment. Learn More »
Hover – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Icon Position Set icon position on left or right side of the text.
Custom Icon Gap Set gap width between icon and button title.
Hover – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Hover Effect Choose background hover animation style.
Custom Offset It allows you to adjust your animation style to button’s size.
Hover – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Option Description
Appear Effect Choose notices animation style.
Loading – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Loader Position Place Loader inside or outside the button.
Spinner Effect Animates chosen icon. You’ve got three different styles avaible.
Custom Gap Define gap between loader icon and Add To Cart button.
Loading – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border Color Changes border color.
Success – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Success – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border Color Changes border color.
Error – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Error – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border Color Changes border color.
Option Description
Main Preset Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button.

After choosing preset from dropdown you have to Reload it to take effect. Learn More »

Type Select pagination type:
Load More: displays load more button to load next items under current ones;
Infinity: automatic load more when user reach last item;
Classic: normal pagination with next/previous buttons and pages.
Position Select pagination position.
Gap Choose gap between buttons.
Force Square Buttons Check to force square shape of buttons.
Text Define button text.
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text. Displays after selecting stay left or stay right.
Title Color If you want to change the title color after hover choose a different one from the color picker below.
Icon Color If you want to change the icon color after hover choose a different one from the color picker below.
Hover Effect Select background hover animation style:
Fade: simple fade in effect;
Slide In: slide background in from selected side;
Expand: expand background from selected position.
Custom Offset Define custom offset for expanded background size. Offset might be different dependent on the button size.
Text Define previous button text.
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
Text Define next button text.
Display Effect Select icon display style:
None: hide the icon;
Stay: display icon on selected side;
Slide In: slide icon in from selected side;
Push Out: push out button text with icon from selected side.
Custom Gap Define gap between icon and text.
Custom Class Add your custom class to the element. Mostly used for custom CSS/JS.
Typography Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Padding It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Hover – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Hover – Border In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right) Learn More »
Previous Button – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Next Button – Icon Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More »
Previous/Next Button – Background Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More »
Pagination – Margin It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More »
Option Description
Enter Animation Enter Animation allow to specify an appear effect for shortcode. Learn More »

This shortcode comes with a lots of features. Check the list below for more details (click on each feature to learn more):

01_presets
02_typography_preset
05_modular
06_gradient
07_icon
08_animation
11_retina
12_responsive
13_wpml
14_psd