Product

In this article you will find the unique information about Product 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.

Product is shortcode integrated with WooCommerce. That means that you have to install and activate this plugin to use this shortcode. Also remember that when you want to create a new shortcode you have to choose previously created product category in the category field. It won’t display anything otherwise. It is also important to use newest versions of WooCommerce.

This shortcode uses Add To Cart shortcode. You can easily use Add To Cart presets to style this item.

Examples Of Use:

You can see a beautiful use of Product shortcodes here.

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.

ProductElementsIcon ButtonsAdd To CartAdd To Cart: Add To Cart: HoverAdd To Cart: NoticesAnimations

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.

Option	Description
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.