In this documentation, we will show you how to customize the EDD Standard Grid Widget by Ultimate Store Kit.

Enable the EDD Standard Grid Widget

To use the EDD Standard Grid from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to Other Widgets Tab.
2. Search by the EDD Standard Grid Widget Name.
3. Enable the EDD Standard Grid Widget.
4. Hit the Save Settings Button.

Inserting The EDD Standard Grid widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the EDD Standard Grid 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

The layout section contains the basic controls of the featured box. Make changes by following the instruction.

1. Columns: Select the column to be appear on the layout section.
2. Column Gap: Set the gap between the columns.
3. Row Gap: Set the gap between the rows.

4. Alignment: Set the alignment for the content.
5. Image Resolution: Set the resolution for the images.
6. Pagination: Enable the switcher to show the pagination. It helps to navigate quickly.

Query Section

Go to Content > Query

Make the query for standard grid by following the instruction,

1. Source: Select the source for the Standard Grid.
2. Product Limit: Set the limitation for the products, It will show certain number of products only.
3. Include: This feature is showing the included data only.

Learn more about the Query, Please follow this documentation.

Additional Section

Go to Content > Additional

1. Title: Enable the switcher to show the Title for the Standard Grid widget.
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 this to show the Category.
4. Category HTML Tag: Set any HTML Tag for Category ( H1, H2, H3, H4, H5, H6, p, span ). The Category tag is essential for both user experience and search engine optimization (SEO).
5. Price: Enable the switcher to show the Price.

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 for item, choose color from the Item section.
2. Border Type: Set the border type for the grid item.
3. Border Radius: Set the border radius for the item.

4. Box Shadow: Set the shadow for the box.
5. Item Padding: Add inner space by adding the item padding, The padding works for the image.
6. Content Padding: Set the padding for the content only.

Hover Tab

The changes will appear for the hover tab,

1. Background Type: Set the background type color for the item, Select the color for the item plate.
2. Box Shadow: Set the shadow for the box item of grid section.

Title Section

Go to Style > Title

1. Color: Set the color for the title of the standard grid.
2. Hover Color: Set the hover color, It will appear on mouse hover over of it.
3. Margin: Set the margin for the Title.
4. Typography: Set the typography for the title.

Category Section

Go to Style > Category

Normal Tab

1. Color: Set the color for the background item.
2. Background Type: Set the background Type color for selecting the background of the category item.
3. Border Type: Select the type for the border item.
4. Border Width: Set the width for the border item.
5. Border Color: Set the color for the border of the category item.

6. Padding: Set the padding for inner space of the item.
7. Margin: Set the margin for the outer space.
8. Typography: Set the typography for the item.
9. Box Shadow: Set the box shadow for the item.

Hover Tab

Than changes will appear on mouse hover,

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 for the category item.

Price Section

Go to Style > Price

1. Color: Set the color for the price of the Standard Grid.
2. Margin: Set the margin for the price section.
3. Typography: Set the typography for the price section.

Action Button Section

Go to Style > Action Button

View Details Button

1. Color: Set the color for the view details button.
2. Background Type: Select the background type color for the button.

Hover

3. Color: Set the color for the button.
4. Background Type: Select the background Type color for the button.
5. Border Type: Select the border type for the button.
6. Border Width: Set the width for the border.
7. Border Color: Set the color for the border section.

8. Radius: Set the border radius by setting the order.
9. Padding: Set the padding for the background.
10. Margin: Set the margin for the inner space.

11. Space Between: Set the space between the butons.
12. Typography: Set the typography for the button.

Purchase Button

1. Color: Set the color for the button.
2. Background Type: Set the background type color for the Purchase button.

Video Assist

Video Tutorial is coming soon! Please visit the demo page for examples.

Thanks for being with us.