Product Category

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

Examples Of Use:

You can find beautiful examples of this shortcodes a t 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.

CategoryRegularHover StateGeneral

Option	Description
Item Preset	Here you can choose style for your shortcode. Learn More »
Category	Select which category you want to display. Start typing and it will fill automaticaly if matching names will be found.
Height	Specify thumbnail height.
Animation Type	Choose if you want to change regular content by replacing it or move it to different location.
Inline Content	Check to disable fullwidth content (will create a floating box).
Content – 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 »
Thumbnail Effects	Choose one of hover effects that will be applied to image.
Effect	Select one of the available effects
Color	Choose effect color.
Zoom	Choose the zoom level in percents.
Rotate	Choose the rotation degree. This slider accepts negative values
Direction	Select the animation direction after hover.
Movement Size	Choose the movement in percents of the whole item size.
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
Disable Regular State	Check to disable regular state (only thumbnail image will be displayed until hover).
Count layout	Specify settings for regular state layout.
Position	Select the content position.
Content Out Effect	Select effect for interactive content element
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 this option to show the full title.
Title – Margin	It is one of most common fields 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 »
Products Count – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Products Count – 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 »
Regular – 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.
Regular – 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 »

Option	Description
Disable Hover State	Check to disable hover state (nothing will change after hover).
Layout	Specify overlay settings for items.
Position	Select the content position.
Overlay In Effect	Set style of animation sliding in
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 this option to show the full title.
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 »
Products Count – Typography	Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More »
Products Count – 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 »
Hover State – 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.
Hover State – 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 »