Missing star rating from reviews when using shortcodes in woocommerce

xeric

Member
Apr 5, 2019
93
21
8
I have a page created with Jupiter X theme that I am display 4 products on the same page using woocommerce shortcodes, [product_page id="XX"], url of page is https://savasana.shop/bundle
Facing a small issue where if I open the reviews tab, it only allows me to leave a comment as a review and not a star rating.
1616052373578.png
If I open the page for the product directly (use the recommended products section), it shows the option to add star rating with the review.
1616052389006.png

If I switch to twenty20 theme, it shows the option to add star rating with review even on the page where I am using shortcodes.

1616052411592.png

I thought it might be some CSS that I added that was hiding the reviews on the bundle page. So I removed all custom CSS and it was still the same behavior of not showing option for rating on bundle page but showing it for the individual product pages.

Would love some help in trying to find out what's causing this and what a solution could be

Thanks guys

Edit: I thought it could be some code snippet causing the issue so I disabled code snippets plugin and the behavior is still the same
 
Last edited:

xeric

Member
Apr 5, 2019
93
21
8
I see the entire div with the class comment-form-rating is not being rendered on the page with the shortcodes. I tried disabling plugins thinking maybe it was one of them causing it but still no luck
 

xeric

Member
Apr 5, 2019
93
21
8
I have narrowed it down to something in lib/templates/fragments/comments.php because when I edit that file and remove all content, it shows stars for rating but in a very broken way. But unfortunately I have very little understanding of php.
It shows 4 stars for the first product in the list and dropdowns for the remaining 3

1616057747103.png

1616057762934.png

Edit: Found this in lib/templates/fragments/woocommerce.php line 257

/**
* Jupiter comment filter causes issue for single product rating field.
*
* @since 1.0.0
*/
jupiterx_remove_action( 'jupiterx_comment_form_comment' );

If I remove this function, it stops showing the rating option even on single product page.
I'm going to try creating a code snippet that runs this function on the bundle page that has all 4 products and see what happens

Edit: adding that function to a code snippet produced a critical error on the website lmao
 
Last edited:

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
Even on the twentyseventeen theme you use now, there are 4 rows of stars for the first product, but dropdowns for the other three products. Conclusion: it's not within the theme, it's something else.

My guess is that those 4 rows of stars are in fact the star ratings for the 4 products, but for some reason they are rendered together within the first comment form. I'm thinking it might be related to the use of multiple shortcodes to render these product id pages.

What happens when you add these shortcodes in a simple editor (so without Elementor and preferably also without Gutenberg)?
 

xeric

Member
Apr 5, 2019
93
21
8
Oh wait, now that you've reverted back to Jupiter, the ratings are gone altogether. Hm....
Yup. For what it's worth i reported it to the Artbees forum and they said it seems to be a bug that they'll fix "soon"

What's interesting to me is this snippet of code


/**
* Jupiter comment filter causes issue for single product rating field.
*
* @since 1.0.0
*/
jupiterx_remove_action( 'jupiterx_comment_form_comment' );


If I remove this, it stops showing the star rating option even on the individual product which leads me to think if there's some way to execute this on the page with the shortcodes as well.

I tried adding this as a code snippet but that just critical errors the entire site
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
When I add three of those shortcodes in a simple page (no Elementor and with a default theme) there are indeed 3 rows of stars in the comment section for the first product, the other two have dropdowns.

Whatever row I choose to select stars from, they're always attributed to that first product. On top of that - when clicking 'Submit' it redirects to the single product page of that product. I'm not sure you want that, to be honest.

So, it seems the problem already starts with WooCommerce and its star rating script.
 

xeric

Member
Apr 5, 2019
93
21
8
When I add three of those shortcodes in a simple page (no Elementor and with a default theme) there are indeed 3 rows of stars in the comment section for the first product, the other two have dropdowns.

Whatever row I choose to select stars from, they're always attributed to that first product. On top of that - when clicking 'Submit' it redirects to the single product page of that product. I'm not sure you want that, to be honest.

So, it seems the problem already starts with WooCommerce and its star rating script.
Yup so by the looks of it there's 3 approaches to this that I see.

1. Disable the text field in the reviews tab on the page that is using shortcodes and somehow add some text in place of it that says something like: to leave a review, please visit the product page (link)

This option would honestly look ugly and be very un streamlined as in making user navigate to a different page to leave a review

2. Make the client accept that this is how woocmerce is. If they want this layout of multiple products on the page then they have to compromise on not having star ratings but just text reviews

3. Convince the client to replace the reviews tab with something different altogether like a shipping info tab
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
In lib/templates/fragments/comments.php
comment the line 487:
PHP:
jupiterx_add_smart_action( 'comment_form_field_comment', 'jupiterx_comment_form_comment', 1 );

With that, Jupiter shows the rating section, but in the same broken way as in the default theme with a number of rows (depending on number of shortcodes) with stars and the other products with dropdowns.

I'm quite sure that is a bug in WooCommerce, so it might be worthwhile to request support from them. With the shortcodes, the rating stars for all products replace the dropdown in the first comment section only, instead of in the respective comment sections further down.
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
OK, I've found a solution, at least for the WooCommerce 'bug'.
Well, it's not really a bug, but related to best practices in HTML.

First have a look at the end of line 125 in plugins/woocommerce/templates/single-product-reviews.php where it says:
PHP:
'</label><select name="rating" id="rating" required>
That's where the problem starts, because this select has an ID. Proper HTML coding requires unique ID's, so it should not appear more than once in a single page. However, you have 4 shortcodes on your page, so it appears four times.

Right, let's override it. Unfortunately, JupiterX requires a different path then is normal for WooCommerce template overrides. Why that is, I don't know, anyway copy the file single-product-reviews.php to your child theme in the following path:
jupiterx-child/lib/templates/woocommerce/

Then change that part I showed above to:
PHP:
'</label><select name="rating" class="rates" required>

We're not done yet, the ID rating is called five times - between lines 46 and 85 - in
\plugins\woocommerce\assets\js\frontend\single-product.js
or rather its minified equivalent single-product.min.js but the unminified version is easier to read.

To work with the unminified file, you have to temporarily turn on script debugging by adding this line to wp-config.php:
PHP:
define( 'SCRIPT_DEBUG', true );
So, change all instances of #rating in that javascript file to .rates

Almost there, now it shows the star ratings within every comment block but still with 4 rows of stars (if you have 4 product shortcodes). To change that, only one letter is needed, on line 46, change
JavaScript:
.on( 'init', '.rates', function() {
into
JavaScript:
.one( 'init', '.rates', function() {
Et voila!

I hope you know how to dequeue the WooCommerce javascript and enqueue your own, revised version.

Unfortunately, submitting a review will still redirect to the single product page, but I think that also happens without the star rating active. To change that, you'll have to make the submit function an AJAX request.
 
Last edited:
  • Love
Reactions: xeric

xeric

Member
Apr 5, 2019
93
21
8
Unbelievable. Thank you so so much for all the help. You really have gone above and beyond.

Is this the correct way to deque and enque?



function deregister_javascript() {
wp_deregister_script( 'single-product.js' );
}
add_action( 'wp_print_scripts', 'deregister_javascript', 100 );

and then

function register_scripts() {
wp_register_script( 'single-product', get_template_directory_uri() .'\URL to child theme\single-product.js', array( 'jquery-migrate' ), null );
wp_enqeue('single-product');
}
add_action( 'wp_enqueue_scripts', 'register_scripts' );




Truly appreciate this. Thanks again mate
 
Last edited:

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
Unbelievable. Thank you so so much for all the help. You really have gone above and beyond.

Is this the correct way to deque and enque?

Thank you, it's just that I like to try to find solutions, I learn a few things along the way as well.

Are you using the jupiterx child theme? I hope you do, and if you don't you should. Then copy the code below in functions.php of the child theme:
PHP:
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-single-product');
    wp_enqueue_script('wc-single-product', get_stylesheet_directory_uri() . '/assets/js/single-product.js',    [ 'jquery' ], false, true);
}
add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
and put your revised javascript as 'single-product.js' in the /assets/js/ directory (which is already present in the jupiterx child theme files).

After this is done, don't forget to remove the script debugging from wp-config.

BTW, couldn't get the plug-in I mentioned above working for ajaxifying the reviews, working on a javascript solution. Have something already, but it's not finished. Probably after the weekend.
 
Last edited:

xeric

Member
Apr 5, 2019
93
21
8
Thank you, it's just that I like to try to find solutions, I learn a few things along the way as well.

Are you using the jupiterx child theme? I hope you do, and if you don't you should. Then copy the code below in functions.php of the child theme:
PHP:
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-single-product');
    wp_enqueue_script('wc-single-product', get_stylesheet_directory_uri() . '/assets/js/single-product.js',    [ 'jquery' ], false, true);
}
add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
and put your revised javascript as 'single-product.js' in the /assets/js/ directory (which is already present in the jupiterx child theme files).

After this is done, don't forget to remove the script debugging from wp-config.

BTW, couldn't get the plug-in I mentioned above working for ajaxifying the reviews, working on a javascript solution. Have something already, but it's not finished. Probably after the weekend.

Thank you so much for this. If you have a paypal or something I'd love to buy you a coffee or beer.
 

frizzel

Well-known member
Trusted Uploader
Jun 13, 2019
485
253
63
Wherever my imagination takes me
BTW, couldn't get the plug-in I mentioned above working for ajaxifying the reviews, working on a javascript solution. Have something already, but it's not finished. Probably after the weekend.

Sorry, with multiple review sections which also have multiple fields with the very same ID (which in itself is a violation of HTML rules) an ajax response is too complicated.

Maybe the plug-in mentioned offers a solution, but I couldn't get it to work.
 

xeric

Member
Apr 5, 2019
93
21
8
Sorry, with multiple review sections which also have multiple fields with the very same ID (which in itself is a violation of HTML rules) an ajax response is too complicated.

Maybe the plug-in mentioned offers a solution, but I couldn't get it to work.
Don't worry about it friend. You've already helped me way more than you can imagine
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu