Elementor Widgets

Posted on by Lavender Vu

WooCommerce Photo Reviews is available 4 widgets in Elementor:

  • Photo Reviews: To display a list of reviews on your website.
  • Review form: To display the review form for customers to post their reviews.
  • Rating: To display the product rating.
  • Overal rating: To display the last average rating of the product.

* Note: This feature is only available in the WooCommerce Photo Reviews plugin premium version.

 

A. Photo Reviews widget

You can use the Photo reviews widget to display a review list of all products or specific products on your website. Create a review page or edit a page with Elementor.

 

 

  1. Choose the WooCommerce Tab in Elementor left side bar.
  2. Drag and drop the Photo reviews widget to the supported and desired position on the page.
  3. Design the Reviews page with Elementor, customize Photo Reviews on the left bar to design the Reviews page.

 

a. General tab

Go to General tab on the left side bar.

  4. Product Categories: Choose the categories that you want to display on review page.
  5. Product Status: Only display the reviews of the products which have these statuses.
  6. Show Ratings: Choose the ratings which will be displayed.
  7. Only Reviews With Images: YES/NO, select to display reviews with photo.
  8. Order by: Order the reviews by choosen fields.
  9. Order: Sort the review follow ASC or DSC ratings.
  10. Conditional tag: Choose on which pages this shortcode will work.

 

b. Pagination Tab

Go to Pagination tab on the left side bar.

  1. Enable pagination: YES/NO, paginate reviews.
  2. Reviews per page: Enter the number of reviews displayed per page.
  3. Use Ajax Pagination: YES/NO, select to not reload page when customers select other reviews page or select  a filter.
  4. Loadmore button: Click on the load more button to display more reviews, enable this feature, the review pagination will be overridden.
  5. Pagination next: The text if clicking to will see the next reviews.
  6. Pagination Pre: The text if clicking to will see the previous reviews.
  7. Pagination Position: Choose the position of pagination: Left; Right; or Center.

 

c. Filter Tab

Go to Filter tab on the left side bar.

  1. Enable Filter: YES/NO, select to enable filter.
  2. Select images Filter By Default: YES/NO, select to set images Filter by default.
  3. Select Verified Filter By Default: YES/NO, select to set Verified Filter by default.
  4. Select Rating Filter By Default: Select to set Rating Filter by default.
  5. Filter Area Border Color: Choose the color for area border.
  6. Filter Area Background Color: Choose the color for  filter area background.
  7. Filter Button Color: Choose the color for filter button.
  8. Filter Button Background Color: Choose the color for filter button background.
  9. Filter Button Border Color: Choose the color for filter button border.

 

d. Rating Count Tab

Go to Rating Count tab on the left side bar.

  1. Enable Rating Count: YES/NO, select to enable rating count on review page.
  2. Enable overall Rating: YES/NO, select to enable overal rating  on review page.
  3. Rating Count Bar Color: Choose the color for rating count bar.

 

e. Design Tab

Go to Design Tab on the left side bar.

  1. Display as slider:  Display reviews under a slider.
  2. Style: Choose style of photo reviews displayed on the review page: Masonry or normal.
  3. Popup Type: There are three styles you can select to let the images appear when the customer clicks on the review images:
    • Whole review: Display full review content when clicking on this review image.
    • Only image: Zoom out just this review image.
    • Off: Not zoom the review image.
  4. Col: Enter the number of  review columns displyed on review page.
  5. Column Gap (PX): Enter the gap between columns.
  6. Background Color: Choose the color for background.
  7. Review Background Color: Choose the color for review background.
  8. Review Border Color: Choose the color for review border.
  9. Review Text Color: Choose the color for review text.
  10. Star Color: Choose the color for stars.
  11. Verified Badge/ Text Color: Choose the color for Verified badge/text.
  12. Show Product: YES/NO, select to show product on popup.
  13. Enable Box Shadow: YES/NO, select to enable box shadow.
  14. Full Screen on Mobile: Display reviews full size on mobile.

 

B. Review form widget

You can use the review form widget to display the review form for customers to post their reviews.

  1. Choose the WooCommerce Tab in Elementor left side bar.
  2. Drag and drop the Review form widget to the supported and desired position on the page.
  3. Design the Review form with Elementor.

a. Product:

b. Type: Display the review form in the default type or in the popup type (click on the Write Your review button to display the review form under a popup).

* Note: If choosing the popup type, you will be asked to localate the review form button on the Left; Right or Center.

c. Hide product details: Use this option to hide or show the main product details.

 

C. Rating widget

  1. Choose the WooCommerce Tab in Elementor left side bar.
  2. Drag and drop the Rating widget to the supported and desired position on the page.
  3. Design the rating with Elementor.

a. Product:

b. Product review count: Enable to display the rating count.

c. Rating: Display a specific rating in the rank from 1 -5 star.

 

D. Overall rating widget

  1. Choose the WooCommerce Tab in Elementor left side bar.
  2. Drag and drop the Overall Rating widget to the supported and desired position on the page.
  3. Design the overall rating with Elementor.

a. Product:

b. Display type: There are 3 options for you

  • Both: Display both overall rating and rating count
  • Only Overall rating: Only display overall rating
  • Only Rating count: Only display rating count