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

Enabling the Product Review Carousel widget

To use the Product Review Carousel by Ultimate Store Kit, first, you have to enable the widget.

1. Go to WordPress > Ultimate Store Kit Plugin dashboard.
2. Then Click the WC Widgets Tab.
3. Search the Product Review Carousel Widget Name.
4. Enable the Product Review Carousel Widget.
5. Hit the Save Settings Button.

Inserting The Product Review Carousel widget

1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Product Review Carousel widget.
3. Drag the widget 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 defining the content and functionality to align with design goals.

Layout Section

Go to Content > Layout

1. Columns: Set the columns for the layout section.

2. Item Gap: Set the gap between the columns.

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).

Query Section

Go to Content > Query

1. Limit: You can adjust the limit here of how many reviews you want to show to the customers.

2. Offset: It is used to skip a specific number of records before retrieving results. By selecting any number (Suppose: 1) the 1st review will be hide.

3. Order By: It controls the data you want to display through author, approved, date, content & random.

4. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)

5. Status: By this option you can show the reviews those are in (approve, hold & all) status to show the customer.

Additional Options Section

Go to Content  > Additional Options.

1. Avatar: Enable or disable the Avatar switcher button to show/hide the Avatar.

2. Title: Enable or disable the Title switcher button to show/hide the Title.

3. Author: Enable or disable the Author switcher button to show/hide the Author.

4. Rating: Enable or disable the Rating switcher button to show/hide the Rating.

5. Review Text: Enable or disable the Review Text switcher button to show/hide the Review Text.

6. Review Text Limit: This option lets you set the Review Text limit for the Review Description text.

Navigation Section

Go to Content > Navigation

1. Navigation: This option allows you set the Navigation Type- Arrows & Dots, Arrows & Fractions, Arrows, Dots, Progress and None.

2. Arrows Position: By this option you can adjust the navigator position to Top Left, Top Center, Top Right, Center,Bottom Left, Bottom Center & Bottom Right.

3. Dynamic Bullets: Enable or disable the Dynamic Bullets switcher button to show/hide the Dynamic Bullets on the carousel.

4. Show Scrollbar: Enable or disable the Show Scrollbar switcher button to show/hide the Scrollbar on the carousel.

5. Arrows Icon: You can customize the appearance of navigation arrows using the selected style. (There are a total of 23 styles included.)

6. Hide Arrows on Mobile: By enabling this switcher button, the navigation Arrows will hide for the Mobile devices.

Carousel Settings Section

Go to Content > Carousel Settings

1. Layout: You can select the Layout type – Carousel & Coverflow. Here we select the layout type- Carousel.

2. Autoplay: If you Enable the Autoplay switcher button, your slider will slide into Autoplay mode.

3. Autoplay Speed: This option allows you to set the speed for automatically playing the carousel.

4. Pause on Hover:  If you activate the pause on Hover button, when visitors Hover the mouse cursor on the slider, then your slider will Hold, otherwise your slider slide Autoplay.

5. Slides to Scroll: It represents how many slides will slide at once.

6. Center Slide: If you enable the Switcher option, then your Active slider will show the center (depending on your widget style).

7. Grab Cursor: Your mouse pointer icon will be changed into a grab cursor. Visitors can slide your slider manually with your mouse cursor.

8. Loop: Enable the switch to loop the content.

9. Animation Speed: Set the speed for animation. The speed count in (ms).

10. Observer: If you enable the option then you are able to use the slider/carousel in any hidden places (such as in tabs, Accordion, etc).

11. Match Padding: Controls the padding around carousel items to align with hover or box shadow effects.
12. Item Match Height: This feature is to make all the item height same, Enable the switcher to match the same height of the carousel item.

Work With The Style Tab

Item Section

Go to Style > Item

1. Background Type:  you can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

2. Color: You can change the content background color by this option.

3. Image: You can add an image as the content background by this option.

4.  Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.

5. Border Width: Set the thickness of the border by selecting the width.

6. Border Color: This option lets you set the color for the border.

7. Border Radius: The Border Radius controls the roundness of the items.

8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.

9. Margin: Adjusts the position of an object over the canvas.

10. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.

Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.

Box Shadow Color: This lets you change the Box Shadow color.

Avatar Section Customization

Go to Style > Avatar

1. Size: You can adjust the avatar size from here.

2. Border Type: This option allows you to add borders to your items. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.

3. Border Radius: The Border Radius controls the roundness of the border

4. Space Between: This option controls the gap between the avatar and the title & author.

5. Box Shadow: You can set the Avater Box Shadow from here.

Title Section

Go to Style > Title

1. Color: This option allows you to change the title color.

2. Hover Color: This option lets you set the Title Hover color.

3. Margin: This option allows you to adjust the space & creating gaps around the title.

4. Typography:  Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Text Section

Go to Style > Text

1. Color: This option allows you to change the text color.

2. Margin: This option allows you to adjust the space & creating gaps around the text.

3. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Author Section

Go to Style > Author

Come to the Author section, you will get two subsections; Text & Name. Lets explore the Text subsection first-

1. Color: This option allows you to change the Author’s text color.
2. Typography: You can change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

In the Name subsections, you will get the below customization options-

1. Color: This option allows you to change the Author’s name color.

2. Hover Color: This option lets you change the Author Hover color.

3. Typography: You can change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.

Rating Section

Go to Style > Rating

1. Color: This option allows you to change the rating star color.
2. Size: You can adjust the Rating size by using this option.
3. Text Color: By using this option you can change the Rating text color.
4. Text Typography: You can change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
5. Offset: You can move the rating star direction horizontally and vertically by using this option.

Navigation Section

Go to Style > Navigation

In this section we will get Three sub sections. They are Arrows, Dots & Offset. Let’s go through the discussion step by step. 

Arrows Sub-Section

In this section we have two tabs. One is Normal and the other is Hover. Let’s start with the Normal tab –

1. Color: This option allows you to change the arrow’s Normal color.

2. Background: You can change the arrow’s normal background color by using this option.

3. Border Type: This option allows you to add borders to the arrows. You can select various border types from this option. Such as Solid, Double, Dotted, Dashed, Groove.

4. Border Width: You can set the border thickness by this option.

5. Border Color: You can set color on your arrow’s border by using this option.

6. Border Radius: The Border Radius controls the roundness of the border.

7. Padding: Padding allows you to control the internal space around the arrow.

8. Size:  You can adjust the arrow’s size by using this option.

9. Space Between Arrows: This option allows you to adjust the space between two arrows.

Now Let’s proceed to the Hover tab section –

10. Color: This option allows you to change the arrow’s hover color.

11. Background: You can change the arrow’s background hover color by using this option.

12. Border Color: This option lets you set the Arrow hover boder color.

Lets explore Dots Subsection-

13. Color: This option allows you to change the dots color.
14. Active Color: This option allows you to change the dots active color.
15. Border Radius:  This option allows you to set roundness to the dot.
16. Width: This option lets you set the Dots width.
17. Height: This option lets you set the Dots Height.

Offset Subsection-

18. Arrows Offset:  This option lets you move the arrows position vertically.
19. Dots Offset: This option lets you move the dots position vertically.

All done! You have successfully customized the Product Review Carousel widget on your website.

Video Assist

You can also watch the video tutorial Learn more about the Product Review Carousel Widget. Please visit the demo page for examples.

Thanks for being with us.