In this documentation, we will show you how to customize the Sub Category Widget by Ultimate Store Kit.

Enable the Sub Category Widget

To use the Sub Category from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to WC Widgets Tab.
2. Search by the Sub Category Widget Name.
3. Enable the Sub Category Widget.
4. Hit the Save Settings Button.

Inserting The Sub Category widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Sub Category widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

Configuring the Content Tab

The Content Tab provides options to manage and structure the core settings of elements. It allows to define the content and functionality to align with design goals.

Layout Section

Go to Content > Layout

1. Columns: Set the columns for the sub category layout. It support the 1 to 6 columns.
2. Item Gap: Set the gap between the items. Use seek bar or input the value to add the gaps.
3. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
4. Image Resolution: Select the desired resolution, such as thumbnail, full size, or other predefined dimensions.

5. Direction: Set the direction of the content. Right, Down, Left, Up direction are available. Set the position according to it.
6. Text Align: Set the alignment of the text; Left, Center, Right, and Justified are available.

Query Section

Go to Content > Query

1. Categories: Select the categories by clicking on the ” + ” icon. Here appear the available category.
2. Order By: Set the order by following the Name, Slug and Count.
3. Order: Arrange according to the order DESC or ASC,
4. Hide Empty: Enable the switcher to hide the empty sub category.

Settings Section

Go to Content > Settings

1. Auto Play: Enable the switcher to play automatically. The sub category image will play.
2. Loop: Enable the switcher to loop it and continue interaction.
3. Delay: Set the delay time. It will start after delaying on certain time period.
4. Speed: Set the speed for the time sliding.
5. Effect: Select the effect Fade, Slide, and Creative. The image will change according to the effect. Creative effects has different effects.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Item Section

Go to Style > Item

Normal Tab

1. Background Type: Set the background type normal for it.
2. Border Type: Set the border type solid of the items. Select available border types None, Solid, Dashed, Dotted, Grove.
3. Border Width: Set the width of the border.

4. Border Color: Set the border color of the items.
5. Border Radius: Make the border radius by setting the value on top, right, bottom, and left.
6. Padding: Make inner space by setting the padding of it.

7. Margin: Set the margin for the outer space of the item.
8. Space Between: Make gap between the items.
9. Box Shadow: Set the box shadow of the item.

Hover Tab

1. Border Color: Make the border color for the item.
2. Box Shadow: Make a shadow of the box.

Image Section

Go to Style > Image

1. Height: Select the height for the image.
2. Width: Set the width for the image.
3. Border Type: Select the border type from available, Solid, Dotted, Dashed, Grove.

4. Border Width: Set the width for the border.
5. Border Color: Choose the border color from there.
6. Border Radius: Make the border corner edges rounded by selecting the radius.

Title Section

Go to Style > Title

1. Color: Choose color for the Title.
2. Margin: Make spacing by setting the margin.
3. Typography: Select typography for the title. Available typography options are Font Family, Size, Weight, Transform, Style, Line Height, Word Spacing etc.

Sub Category Section

Go to Style > Sub Category

1. Color: Choose the color for the sub category.
2. Hover Color: Set the hover color. The changes will appear on mouse hover.
3. Margin: Set outer space by selecting the margin.
4. Typography: Select typography for the Sub Category. Available typography options are Font Family, Size, Weight, Transform, Style, Line Height, Word Spacing etc.
   

Read More Section

Go to Style > Read More

1. Color: Choose the color for the Read More Button. The button appear on mouse hover over the item.

2. Hover Color: Set the hover color for the read more item. Hover over it and set the color.

3. Margin: Set the margin for the read more item.
4. Typography: Select the typography of the read more button.

Video Assist

Watch the Tutorial to learn more.

Please visit the demo page for examples.
Thanks for being with us.