Code Snippets is a free and user-friendly plugin to add actions and other snippets (codes) and fixes to the themes. In this article, we'll show you how to install Judge.me widgets on WooCommerce using Code Snippets. Check this article to read the full guide to install Judge.me on WooCommerce.


TABLE OF CONTENTS

  1. Install the Code Snippets plugin
  2. Add widget codes using a CSS snippet
  3. Use the CSS Code Snippets to apply other fixes with JavaScript

1. Install the Code Snippets plugin

  • From your WordPress dashboard, choose Plugins > Add New.
  • Search for the Code Snippets plugin and click Install Now.
  • Activate the plugin.


2. Add widget codes using a CSS snippet

  • After you install and activate the plugin, you’ll see Snippets on the left bar.
  • Click on the plugin and choose All Snippets.
  • In the list snippets, find the Example CSS snippet and click Clone.


  • Now you’ll see a new Example CSS Snippet at the bottom of the list. Click Edit.

  • Then, add the codes below to install the widgets in a different position using the right visual hook. 
add_action( 'init', function () {

add_action( 'visualhookname', array( 'JGM_Widget', 'judgeme_review_widget' ), 10 );

add_action( 'visualhooknameonproductpage', array( 'JGM_Widget', 'judgeme_preview_badge' ), 10 );

add_action( 'visualhooknameoncollectionpage', array( 'JGM_Widget', 'judgeme_preview_badge' ), 10 );

} );
  • Don’t forget to also change the name of the snippet. Then click Save Changes and Activate the snippet.
  • Now you can check the installation of the widgets again on the pages.


  • The codes above include 3 actions to install the 3 widgets: 
    1. Review Widget on Product Page (the line of code that contains `judgeme_review_widget`)
    2. Preview Badge on Product Page (the line of code that contains `judgeme_preview_badge`)
    3. Preview Badge on Collection Page (the line of code that contains `judgeme_preview_badge`)
  • You can remove 1 or 2 line of codes if you don't want to install any of these 3 widgets.
  • You must also replace the “visualhookname” with the name of the right visual hook (you should ask your theme developers). 
  • The number at the end of each line is a priority number. If there are different elements or widgets using the same visual hook, the theme will use this priority number to set the order of the widgets in the same hook (normally you won’t need to change this number).


  • If you want to change the position of your widgets, please add these codes to the Code Snippets:

remove_action(
  'woocommerce_after_single_product_summary',
  array('JGM_Widget', 'judgeme_review_widget'),
  14
);
remove_action(
  'woocommerce_single_product_summary',
  array('JGM_Widget', 'judgeme_preview_badge'),
  9
);
remove_action(
  'woocommerce_after_shop_loop_item_title',
  array('JGM_Widget', 'judgeme_preview_badge'),
  5
);


3. Use the CSS Code Snippets to apply other fixes with JavaScript

If you want to create a Review tab and place the Review Widget inside the tab try this code:

if (class_exists( 'JudgeMe' )) {
    add_action( 'init', 'jgm_remove_review_widget' );
    function jgm_remove_review_widget () {
        // Remove the default widget placement
        remove_action( 'woocommerce_after_single_product_summary', array( 'JGM_Widget', 'judgeme_review_widget' ), 14 );
    }
     add_filter( 'woocommerce_product_tabs', 'jgm_add_review__widget_to_tab' );
     function jgm_add_review__widget_to_tab ($tabs) {
         $tabs['judgeme_reviews'] = array(
            'title' => __( 'Reviews', 'woocommerce' ),
            'priority' => 50,
            'callback' => array( 'JGM_Widget', 'judgeme_review_widget' )
         );
         return $tabs;
     }
}

If you’re trying to fix the Leex theme inside the tab (when it overlaps), try using this code with the right tab selector:

add_action( 'wp_head', function () { ?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
 if (typeof jdgm !== 'undefined') {
  jdgm.$('.judgeme_reviews_tab a').click(function(){
    setTimeout(function(){ jdgm.$('.jdgm-rev-widg__reviews').masonry('layout') ;}, 300);
  });
}
});
</script>
<?php } );