Missing star rating from reviews when using shortcodes in woocommerce

xeric · Mar 18, 2021

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.

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.

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.

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

xeric · Mar 18, 2021

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 · Mar 18, 2021

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

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

frizzel · Mar 19, 2021

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)?

frizzel · Mar 19, 2021

Oh wait, now that you've reverted back to Jupiter, the ratings are gone altogether. Hm....

xeric · Mar 19, 2021

frizzel said:
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 · Mar 19, 2021

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 · Mar 19, 2021

frizzel said:
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 · Mar 19, 2021

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 · Mar 19, 2021

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.

frizzel · Mar 19, 2021

Regarding staying on the page when submitting a review, the plugin WP Ajaxify Comments says it supports multiple comment forms on one page, but I haven't found out the setup for that, yet. It's a bit late now here, so maybe tomorrow.

xeric · Mar 20, 2021

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

frizzel · Mar 20, 2021

xeric said:
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.

xeric · Mar 20, 2021

frizzel said:
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 · Mar 23, 2021

frizzel said:
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 · Mar 25, 2021

frizzel said:
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

Missing star rating from reviews when using shortcodes in woocommerce

Welcome to Original Babiato! All Resource are Free and No downloading Limit.. Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!

Support Our Work By Donating Click here!

Member

Member

Member

Well-known member

Well-known member

Member

Well-known member

Member

Well-known member

Well-known member

Well-known member

Member

Well-known member

Member

Well-known member

Member

Similar threads

Forum statistics

Share this page

Welcome to Original Babiato! All Resource are Free and No downloading Limit..
Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!
Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!