In this documentation, we will show you how to customize the EDD Product Review Carousel Widget by Ultimate Store Kit.
Enable the EDD Product Review Carousel Widget
To use the EDD Product Review Carousel by Ultimate Store Kit, first, you have to enable the widget. (Remember that, the EDD Product Reviews is a pro widget and you need the EDD Review Plugin to use this widget.)
- Go to WordPress > Ultimate Store Kit Plugin dashboard.
- Then, Click the EDD Widgets Tab.
- Search the EDD Product Review Carousel Widget Name.
- Enable the EDD Product Review Carousel Widget.
- Hit the Save Settings Button.
Inserting The EDD Product Review Carousel widget
- Go to the Elementor Editor Page and Hit the “+” icon Button.
- Search the EDD Product Review Carousel widget.
- 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 removed.
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.
Navigation Section
Go to Content > Navigation
1. Navigation: This option allows you to navigate using Arrows & Dots, Arrows & Fractions, Arrows, Dots, Progress and None options.
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. Show Scrollbar: Enables the switcher to show the scrollbar to the audience.
4. Arrows Icon: You can customize the appearance of navigation arrows using the selected style. (There are a total of 23 styles included.)
5. Hide Arrows on Mobile: By enabling this option, you can hide navigation arrows on mobile devices for a cleaner, more compact design.
Carousel Settings Section
Go to Content > Carousel Settings
1. Layout: Select the layout of the carousel ( Carousel, Cover flow ) from here.
2. Autoplay: The Carousel item will play automatically after enabling this feature.
3. Autoplay Speed: This option allows you to set the speed for automatically playing the carousel.
4. Pause on Hover: On Mouse hover over the carousel, autoplay will pause. You have to enable the option to activate it.
5. Slides to Scroll: Select the sliding items and it will slide according to it.
6. Center Slide: Enable the switcher to slide the content in the center.
7. Grab Cursor: Enable the is to grab the slider, The cursor pointer will turn into grab feature.
8. Loop: Enable the switch to loop the content.
9. Animation Speed: Set the speed for animation. The speed count in (ms).
10. Observer: Enable the switcher to work with the observer.
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.
Additional Options Section:
Go to Content > Additional Options
1. Image: Enabling this option will display the reviewer’s picture to customers.
2. Title: By enabling this option the product name will be visible.
3. Author: This option lets you show the reviewer’s name to customers.
4. Rating: Enabling this option will display the product rating received from reviewers to your customers.
5. Review Text: It shows the feedback that you received from reviewers.
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
1. Background Type: You can change background type here. There are two options in background type. These are Classic & Gradient.
In classic you can change the background color and also set an image to the background.
In the gradient option you can also set background color along with locations and angle for each breakpoint to ensure gradient adapts to different screen sizes. Also, you can change the gradient type (Radial & Linear) and positions.
2. Color: You can change the content background color by this option.
3. Image: You can add an image to the content background by this option.
4. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.
5. Margin: This option allows you to adjust the space & creating gaps between elements.
6. 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.
7. Border Width: Set the thickness of the border by selecting the width.
8. Border Color: This option lets you set the color for the border.
9. Border Radius: The Border Radius controls the roundness of the items.
10. Box Shadow: While working with this option you will get three more options (Blur, Horizontal & Vertical). Blur Controls how sharp or soft the shadow will appear. By using the horizontal option you can move the shadow left or right and by using the vertical option you can move the shadow up or down.
Image Section
Go to Style > Image
1. Border Type: You can add borders to your items with this option.
2. Border Width: Set the thickness of the border with this option.
3. Border Color: This option allows you to change the border color.
4. Border Radius: The Border Radius controls the roundness of the border
5. Box Shadow: By using this option you can create a shadow around the box of the border.
Title Section
Go to Style > Title
1. Color: This option allows you to change the title color.
2. Hover Color: You can change your title color by this option.
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.
Author Section
Go to Style > Author
Here we will find two options (Meta and Name). Let’s discuss about the Meta option first –
1. Color: This option allows you to change the Author’s meta color.
2. Hover Color: You can change the meta hover color with this option.
3. Typography: You can change the meta’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, Let’s proceed with the Name option –
1. Color: This option allows you to change the Author’s name color.
2. Hover Color: You can change the hover color by using this option.
3. Typography: You can change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Content Section
Go to Style > Content
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.
Rating Section
Go to Style > Rating
1. Color: This option allows you to change the rating star color.
2. Background Color: You can change the rating background color with this option.
Navigation Section
Go to Style > Navigation
In this section we will get 2 sub sections. They are Arrows & 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 color.
2. Background: You can change the arrow’s 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 –
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: You can set hover color on your arrow’s border by using this option.
Offset Sub-Section
13. Arrows Vertical Offset: This option lets you move the arrows position vertically.
14. Arrows Horizontal Offset: This option lets you move the dots position vertically.
All done! You have successfully customized the EDD Product Review Carousel widget on your website.
Video Assist
The video will come soon. Please visit the demo page for examples.
Thanks for being with us.
