Product Category

See Preview

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 »
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
04_layouts
05_modular
06_gradient
07_icon
08_animation
11_retina
12_responsive
13_wpml