Modifying how Product Reviews are displayed

Hello,

Firstly, I'm looking for a solution to move the star rating which is now above the product title, underneath the title instead, on the product page. Secondly, I'm looking to remove the text "1 store review" text above the title for all products which lack their own product review. Finally, I want to add the Reviews section as a block to either the home page or its own page.

Thanks,

Daniel

What is the site URL? It isn't included by default when you post.

Ah sorry. I included it in the post but not in free text. These are the ones:

Bretonnia Grail Knights — Eocene Studios (eocene-studios.com)

Undead of the Vampire Coast Necromancer — Eocene Studios (eocene-studios.com)

Following this. I'm also looking for a way to move the "X Store Reviews" to below the Title (ideally below the price). My url is https://www.hosslewoodworks.com

17 hours ago, JHoss1 said:

I'm also looking for a way to move the "X Store Reviews" to below the Title (ideally below the price).

You can move the Review Summary below the Product Title by changing the order from 0 to 1. This Custom CSS should achieve this:

.reviewSummary {
    order: 1!important;
}

Here's what happens when I enable that CSS:

The Product Price (and associated Afterpay information) is located in a different div container, so it isn't possible to relocate the Review Summary directly below the Product Price using CSS alone.

Did this help? Please give feedback by clicking an icon below  ⬇️ 

On 12/28/2023 at 9:03 AM, Daniel97 said:

I'm looking for a solution to move the star rating which is now above the product title, underneath the title instead, on the product page.

@Daniel97 I have only just seen your most recent post (posted over Christmas), but you should be able to use the CSS that I have posted above to move the Review Summary below the Product Title.

On 12/28/2023 at 9:03 AM, Daniel97 said:

Secondly, I'm looking to remove the text "1 store review" text above the title for all products which lack their own product review.

This isn't yet possible with CSS (limited support for newer pseudo-classes) but you should be able to hide the Store Reviews with the following JavaScript, added to the Code Injection Footer panel:

<!-- Hide Store Review Summaries when no product specific review exists -------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] ------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
document.addEventListener("DOMContentLoaded", function() {
  var reviewSummaries = document.querySelectorAll('.reviewSummary');

  reviewSummaries.forEach(function(summary) {
    if (!summary.querySelector('.avgStars')) {
      summary.style.display = 'none';
    }
  });
});
</script>
<!-- End ----------------------------------------------------------------------------------->

Let me know how you get on.

Did this help? Please give feedback by clicking an icon below  ⬇️

4 hours ago, paul2009 said:

You can move the Review Summary below the Product Title by changing the order from 0 to 1. This Custom CSS should achieve this:

.reviewSummary {
    order: 1;
}

Here's what happens when I enable that CSS:

The Product Price (and associated Afterpay information) is located in a different div container, so it isn't possible to relocate the Review Summary directly below the Product Price using CSS alone.

Did this help? Please give feedback by clicking an icon below  ⬇️ 

This is working when the specific product has a review, like the item above. However, when the specific product doesn’t have a review and the text reads “41 store reviews” it doesn’t want to move it below the title. Any ideas on how to remedy?

2 hours ago, JHoss1 said:

Any ideas on how to remedy?

Apologies. As Squarespace have applied the original order to a autogenerated class (that will change) you'll need to add the !important rule.

.reviewSummary {
  order: 1!important; 
}

I've updated my original post above.