Hi all! Does anyone know what CSS I could use to: Remove the ‘write a review’ Make all headings capitalsThank you so much! Kesha

K

keshabutterfly

Contributor I

Solved

Custom CSS for Reviews Widget Shopify

4 replies
240 views

Hi all!

Does anyone know what CSS I could use to:

Remove the ‘write a review’
Make all headings capitals

Thank you so much!

Kesha

MANSIR2094Answer

Expert Problem Solver IV

Hey @keshabutterfly , you are on the right track!
Here's the CSS you need simple and effective:

/* Hide the 'Write a review' button */
button[data-hook="write-review-button"] {
display: none !important;
}

/* Make all headings uppercase */
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase !important;
}

Just pop this into your theme's custom CSS or whatever your platform allows for additional styles. Let me know if your setup is different and I will tweak it.

Mansir Digital Portfolio

MANSIR2094Answer

Expert Problem Solver IV

Hey @keshabutterfly , you are on the right track!
Here's the CSS you need simple and effective:

/* Hide the 'Write a review' button */
button[data-hook="write-review-button"] {
display: none !important;
}

/* Make all headings uppercase */
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase !important;
}

Just pop this into your theme's custom CSS or whatever your platform allows for additional styles. Let me know if your setup is different and I will tweak it.

Mansir Digital Portfolio

K

keshabutterflyAuthor

Contributor I

Thank you SO much for your quick reply!

I inputted this code + the only heading that was capitalised was the ‘CUSTOMER REVIEWS’. The ‘Reviews’ + buttons remained the same. Perhaps it is user error and I am inputting incorrectly? Confirming I did clear my cache.

Thank you kindly,

Kesha

MANSIR2094

Expert Problem Solver IV

Thank you for you kind response, @keshabutterfly ,

You are doing great so far just a small adjustment needed.

Here's a refined CSS snippet that target those specific parts more accurately:

/* Hide the 'Write a review' button */
button[data-hook="write-review-button"],
[data-hook="write-review-button"] {
display: none !important;
}

/* Make all relevant headings uppercase */
h1, h2, h3, h4, h5, h6,
[data-hook="reviews-title"],
[data-hook="review-list-title"] {
text-transform: uppercase !important;
}

This should hide the write a review button and make all headings including reviews uppercase.

Mansir Digital Portfolio

K

keshabutterflyAuthor

Contributor I

The outcome is still the same with new code - I appreciate your assistance so very much!

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials