In this article you will find the unique information about Button 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.
Add to cart is a basic shortcode integrated with WooCommerce. Core options are similar to those in button, but there are also few extra tabs available. Hover state has separate styling options , which allows you to create more styles and furthermore display more information for example you can set ‘Buy Now’ title as a regular state, and as the hover state – icon and item price. This button also informs user if the product was succesfully added to cart. You can find style to this indicator under Notices.
Example Of Use
Unfortunately we did not apply this shortcode to any of our templates, but you can browse through our preview.
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.
GeneralHoverNoticesTooltipAnimations
| 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 » |
| Product | Select product you want to display. |
| Full Width | Display button at 100% width of its container. |
| Auto Size | Enable to adjust the button size if hover content is bigger than regular state content. |
| 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. |
| Content – Typography | Typography field gives you a control over almost all font settings. It also incorporates a Typography Preset functionality. Learn More » |
| Title | Text displayed on the button. |
| Icon | Icon field from Massive Addons allow you to choose from 12 different icon fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons, Linear Icons. What’s more, our Icon Field provides a possibility to use a character or image instead of icon from icon fonts. Learn More » |
| Icon Position | Lets you set icon on the right or left side of the button title. |
| Custom Icon Gap | Sets gap between icon and title. |
| 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 offers 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 fields used in our shortcodes. The simple mode, contains options for padding size (for all edges) and units (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 fields across our shortcodes. The simple mode, contains 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 | This option allows you to display icon witvh different color then one set in regular state. |
| 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 12 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 provides a possibility to use a character or image instead of icon from icon fonts. Learn More » |
| Icon Position | Lets you set icon on the right or left side of the button title. |
| Custom Icon Gap | Sets gap between icon and 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 12 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 |
|---|---|
| Disable Tooltip | Switch to disable tooltip display. |
| 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 » |
| Position | Select tooltip position. |
| Display Effect | Select tooltip display style: Fade: simple fade in effect; Slide In: slide tooltip to its target; Slide Out: slide tooltip from its target. |
| Arrow | Check to disable arrow pointing tooltip target. |
| Hover | Check to disable hover on tooltip. Helpful if you want to display only text without any links. |
| Wide | Check to enable wide tooltip. Default tooltip can stretch to 300px in width.Wide tooltip increase the size to 500px. |
| Content | Define content. Thanks to default WordPress WYSIWYG editor you can easily format the content. |
| Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. 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 » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Enter Animation | Enter Animation allow to specify an appear effect for shortcode. Learn More » |
| Loop Animation | Loop Animation is enabled only for selected shortcodes/elements. This animation will be played in an endless loop. Learn More » |
This shortcode comes with a lots of features. Check the list below for more details (click on each feature to learn more):
