In this documentation, we will show you how to customize the Product Image Accordion Widget by Ultimate Store Kit.

Enable the Product Image Accordion Widget

To use the Product Image Accordion 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 Product Image Accordion Widget Name.
3. Enable the Product Image Accordion Widget.
4. Hit the Save Settings Button.

Inserting The Product Image Accordion widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Product Image Accordion 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. Height: Set the height of the product item. It will appear whole page of this image.
2. Item Hover Expansion (em): Set the expansion area of the Item. Changes will appear on mouse hover. The Measurement are in em.
3. Image Resolution: Select the desired resolution, such as thumbnail, full size, or other predefined dimensions.

Query Section

Go to Content > Query

1. Source: Select the source for displaying the product. Source are Product, Post, Page, etc.
2. Product Limit: Set the maximum number of products to display within the layout.
3. Include: Select the Include tab and the available option will appear.
4. Include By: Select the options for the include by and Terms or Author.
5. Terms: Search by the terms category or tags and select them. The content will appear by following the categories or tags.

Learn more about the Query section.

Additional Options Section

Go to Content > Additional Options

Content Tab

1. Title: Show the Title of the product by enabling the switcher.
2. 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).
3. Category: Enable it to demonstrate the Category of the relevant Products item.

4. Category HTML Tag: Set any Category HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The Category tag is essential for both user experience and search engine optimization (SEO).
5. Rating: Show the Rating by enabling the switcher. Demonstrate the product rating.
6. Price: Show the price of the product. Enable the switcher to show it.

Badge Tab

1. Sale: Enable the switcher to show the Sale badge.
2. Percentage: Show the discount of the switcher to show the percentage.
3. Stock Status: Enable the switcher to show the Stock status. It shows this content on stock or not.

4. Trending: Show the badge of the Content, Enable the switcher.
5. New: Enable the switcher to show the New arrivial product.
6. Newness Days: Input the number to show the newness days.

Action btn Tab

1. Wishlist: Enable the switcher to show the Wishlist. It show the wish list button.
2. Compare: The compare feature it used to compare the products. Enable it by following the instruction.
3. Quick View: Enable the switcher for the Quick view button, It will show the product.
4. Add to Cart: Enable the switcher to show the button on Adding to the Cart.

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.

Content Section

Go to Style > Content

1. Max Width: Set the maximum width for the content item.
2. Padding: Set the padding for the inner space of the content.
3. Overlay Color: Select the Overlay Color of it.

Title Section

Go to Style > Title

1. Color: Set the color for the Title.

2. Hover Color: Set the hover color of the title. It will appear on mouse hover.
3. Typography: Select the typography for the content.

Category Section

Go to Style > Category

Normal Tab

1. Color: Select the color for the category.
2. Background Type: Set the background type color. Select the color for the background.
3. Border Type: Set the border type of it for the category. Different type of border are available: Solid, Dashed, Dotted, Double, Grove.

4. Border Width: Set the thickness of the border width.
5. Border Color: Set the color for the border.
6. Border Radius: Make the border corner edges rounded by following.
7. Padding: Make the padding for the inner space.

8. Margin: Set the margin for the outer space.
9. Space Between: Make the space between the category.
10. Typography: Set the typography of it.
11. Box Shadow: Make the shadow of the box.

Hover Tab

1. Color: Set the color for the category.
2. Background Type: Set the background type color for the category.
3. Border Color: Set the border color.

Price Section

Go to Style > Price

1. Regular Color: Set the color for the Regular price.

2. Sale Color: Set the color for the Sale Price.
3. Margin: Make outer space by setting the margin.
4. Typography: Select the Font size, weight, line height on the typography of the price color.

Rating Section

Go to Style > Rating

1. Color: Set the color for the the rating.

2. Active Color: Set the active color for the rating.

Badge Section

Go to Style > Badge

1. Border Type: Set the type for the border. Solid, Dashed, Dotted, Double, Grove are available border type.
2. Borer Width: Set the thickness of the border.
3. Border Color: Set the border color.
4. Border Radius: Make the border radius by following.

5. Padding: Set the padding for the badge. It’s add the inner space.
6. Margin: Set the margin of the button by following the outer space.
7. Space Between: Make the space between the badges.
8. Typography: Set typography for the button. Font size, Family, Weight, Line Height etc. feature are available for the typography.

Sale

1. Color: Set the color of the Sale button by selecting a shade from the color palette.
2. Background Type: Set the background type, then choose and apply a background color.
3. Border Color: Select the desired color for the border.

Discount

1. Color: Set the color of the Discount button by selecting a shade from the color palette.
2. Background Type: Set the background type, then choose and apply a background color.
3. Border Color: Select the desired color for the border.

Stock

1. Color: Set the color of the Stock button by selecting a shade from the color palette.
2. Background Type: Set the background type, then choose and apply a background color.
3. Border Color: Select the desired color for the border.

Action Button Section

Go to Style > Action Button

1. Border Type: Select the border type for the action button. Solid, Dashed, Dotted, Double, Grove are available.
2. Border Width: Set the thickness of the border.
3. Border Color: Select the color for the border.
4. Border Radius: Make the border corner edges rounded by following the border radius.

5. Padding: Make the spacing of the button by setting the padding.
6. Margin: Make outer space by setting the margin.
7. Icon Size: Set the size of the Icon.

8. Tooltip Font: Set the font for the Tooltip. Hover over the action button and the tooltip will appear.

Wishlist

1. Color: Choose color for the Wishlist Icon.
2. Background Color: Set the background color of the Wishlist button.
3. Border Color: Select the border color for the button.

Hover

1. Color: Choose color for the Wishlist Icon.
2. Background Color: Set the background color of the Wishlist button.
3. Border Color: Select the border color for the button.

Active

1. Color: Choose color for the Wishlist Icon.
2. Background Color: Set the background color of the Wishlist button.
3. Border Color: Select the border color for the button.

Compare

1. Color: Choose color for the Compare button Icon.
2. Background Color: Set the background color of the Compare button.
3. Border Color: Select the border color for the button.

Active

1. Color: Choose color for the Compare button Icon.
2. Background Color: Set the background color of the Compare button.
3. Border Color: Select the border color for the button.

Active

1. Color: Choose color for the Compare button Icon.
2. Background Color: Set the background color of the Compare button.
3. Border Color: Select the border color for the button.

Quick View

1. Color: Choose color for the Quick view Icon.
2. Background Color: Set the background color of the Quick view button.
3. Border Color: Select the border color for the button.

Hover

1. Color: Choose color for the Quick view Icon.
2. Background Color: Set the background color of the Quick view button.
3. Border Color: Select the border color for the button.

Cart

1. Color: Choose color for the Cart Icon.
2. Background Color: Set the background color of the Cart button.
3. Border Color: Select the border color for the button.

Hover

1. Color: Choose color for the Cart Icon.
2. Background Color: Set the background color of the Cart button.
3. Border Color: Select the border color for the button.

Video Assist

Video Tutorial Coming soon!
Please visit the demo page for examples.
Thanks for being with us.