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):
