Most of the time, you can install the Judge.me widgets on WooCommerce using automatic installation or visual hooks. If these two ways don't work, or if you want to install other widgets of Judge.me like the All Reviews Page and Reviews Carousel, please follow the manual installation guide below.
TABLE OF CONTENTS
- Using the native Editing features in WooCommerce
- Using the native Customizer
- Using page-builder plugins
1. List of available shortcodes for widget installation
In general, manual installation means adding Judge.me shortcodes to specific positions on your pages. Here is the list of available shortcodes:
- Preview Badge: [jgm-preview-badge] (to show the Preview Badge of a specific product, please use [jgm-preview-badge id=/insert product id/] for example: [jgm-preview-badge id=342] )
- Review Widget: [jgm-review-widget] (to show star rating of any product, please use [jgm-review-widget id=/insert product id/] for example: [jgm-review-widget id=342] )
- All Reviews Page: [jgm-all-reviews]
- Carousel: [jgm-featured-carousel title='Let customers speak for us' all-reviews-page='#']
- Reviews Tab: [jgm-reviews-tab button='★ Judge.me Reviews' title='Let customers speak for us']
- Verified Reviews Count Badge: [jgm-verified-badge]
- You can specify the product in the product widgets shortcodes using the product_id (e.g. [jgm-review-widget id=342] instead of [jgm-review-widget]). This is useful when the product information can’t be found inside the page, for example, non-product pages or product pages heavily customized. On normal product pages, you don’t need to specify the products so a generic shortcode (e.g. [jgm-review-widget]) should be enough. If you want to duplicate products, please use the shortcodes with a given product_id, so the widget can pull the right product information.
- The default position of the Floating Reviews Tab is at the bottom. You can apply CSS code to this widget to display it on the right or on the left. Its shortcode includes also the title of the button and of the header: [jgm-reviews-tab button='★ Judge.me Reviews' title='Let customers speak for us'].
- The Reviews Carousel shortcode must include the right title and the right hyperlink: [jgm-featured-carousel title='Let customers speak for us' all-reviews-page='#']
- If you need to create a new page for the All Reviews Page, go to Pages > Add New, then add a new shortcode block with the All-Reviews-Page shortcode.
2. How to install widgets with shortcodes
2.1. Using the native Editing features in WooCommerce
*Note: The native Editing features in WooCommerce are not very accurate in positioning the codes. This will result in the widgets not being installed in the right place. If you need to, please consider using a page-builder instead.
For non-product pages
If you prefer using the Editing features in WooCommerce, you can use the Shortcode block in the native Page editor to add widgets for non-product pages.
To access the Page editor, click Edit Page on the top bar while opening the live page you want to edit (you need to log in to your admin account to see the top bar).
or from the WooCommerce admin, go to Pages > All Pages > hover on the pages, and click Edit.
While on the Page editor, click on the "+" icon to add a Shortcode widget. Then you can copy and paste the Judge.me shortcode to the field provided, and move it to the position you want on the page.
For product pages
For product pages, you can add the shortcodes in any content box in the native Product Editor.
To access the Product editor, click Edit Product on the top bar while opening the live page you want to edit (you need to log in to your admin account to see the top bar).
or from the WooCommerce admin, click Products > All Products > hover on the products and click Edit.
Then you can copy and paste the Judge.me shortcode to the field provided, and move it to the position you want on the page.
2.2. Using the native Customizer
You can also add shortcodes using the native Customizer (“Customize” on the top bar), but this will be only limited to the “widget areas” recognized by the theme.
Click on Customize on the top bar of the settings on the top bar while opening the live page you want to edit (you need to log in to your admin account to see the top bar).
Then scroll down the left panel and find Widgets.
Click the area you want to add the widget > Add a Widget > Custom HTML.
2.3. Using page-builder plugins
Elementor, Divi, Beaver,... are popular page-builder plugins in WooCommerce and all of them include HTML, Text, or Shortcode blocks that you can use to add the shortcodes, and then position, scale or move the blocks however you need.