Product

See Preview

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