Skip to content

Instantly share code, notes, and snippets.

@GLWalker
Created September 16, 2015 15:55
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save GLWalker/f293e8ab61303c465f41 to your computer and use it in GitHub Desktop.
Woocommerce Review Star Ratings. Please read description to learn more...
/* ==========================================================================
Snippet Name: WooCommerce Review Star Ratings
Description: This css snippet blends all woocommerce star rating for a consistant look sitewide. Consolidates code and makes uses of WooCommerce.eot font. If you disabled the woocommerce.css and built your own styles then this will work great. If you are overriding woocommerce.css by adding styles to another styesheet that loads afterwards, this will still work fine, but you may need to target specific elements or create a master reset targeting all elements listed below in order to remove some of woocommerce default margins and padding.
Author: GL Walker
Author URI: http://wsfive.com
========================================================================== */
.woocommerce .star-rating, .woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
font-family: WooCommerce;
speak: none;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
font-size: 1em;
}
.woocommerce .star-rating {
overflow: hidden;
position: relative;
height: 1em;
width: 5em;
}
.woocommerce .star-rating:before {
content: "\e021\e021\e021\e021\e021";
float: left;
top: 0;
left: 0;
position: absolute;
color: #999;
}
.woocommerce .star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em
}
.woocommerce .star-rating span:before {
content: "\e020\e020\e020\e020\e020";
top: 0;
position: absolute;
left: 0;
color: #F90;
}
/* rating block specific to single product summary area */
.woocommerce .woocommerce-product-rating {
display: block;
width: 100%;
}
.woocommerce .woocommerce-product-rating .star-rating {
margin: 0 auto;
float: left;
font-size: 1em;
}
.woocommerce .woocommerce-product-rating .woocommerce-review-link {
font-size: 85%;
width: 100%;
margin: 0.5em 0;
float: left;
}
/* rating block specific to review submit form */
.woocommerce p.stars {
position: relative;
padding: 0.75em;
}
.woocommerce p.stars a {
display: inline-block;
margin-right: 1em;
text-indent: -9999px;
position: relative;
border-bottom: 0!important;
outline: 0;
color: #999;
}
.woocommerce p.stars a:hover, .woocommerce p.stars a.active {
color: #F90;
}
.woocommerce p.stars a:last-child {
border-right: 0
}
.woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
border-right: 1px solid #ccc
}
.woocommerce p.stars [class^="star-"]:after, .woocommerce p.stars [class*=" star-"]:after {
text-indent: 0;
position: absolute;
top: 0;
left: 0
}
.woocommerce p.stars a.star-1 {
width: 2em
}
.woocommerce p.stars a.star-1:after {
content: "\e021"
}
.woocommerce p.stars a.star-1.active:after, .woocommerce p.stars a.star-1:hover:after {
content: "\e020"
}
.woocommerce p.stars a.star-2 {
width: 3em
}
.woocommerce p.stars a.star-2:after {
content: "\e021\e021"
}
.woocommerce p.stars a.star-2.active:after, .woocommerce p.stars a.star-2:hover:after {
content: "\e020\e020"
}
.woocommerce p.stars a.star-3 {
width: 4em
}
.woocommerce p.stars a.star-3:after {
content: "\e021\e021\e021"
}
.woocommerce p.stars a.star-3.active:after, .woocommerce p.stars a.star-3:hover:after {
content: "\e020\e020\e020"
}
.woocommerce p.stars a.star-4 {
width: 5em
}
.woocommerce p.stars a.star-4:after {
content: "\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-4.active:after, .woocommerce p.stars a.star-4:hover:after {
content: "\e020\e020\e020\e020"
}
.woocommerce p.stars a.star-5 {
width: 6em;
}
.woocommerce p.stars a.star-5:after {
content: "\e021\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-5.active:after, .woocommerce p.stars a.star-5:hover:after {
content: "\e020\e020\e020\e020\e020"
}
/* rating block specific to product listing */
.woocommerce ul.products li.product .star-rating {
display: block;
text-align: center;
margin: 0 auto;
}
/* rating block specific to sidebar widgets */
.woocommerce ul.cart_list li .star-rating, .woocommerce ul.product_list_widget li .star-rating {
display: block;
text-align: center;
margin: 0 auto;
}
/* end of review stars */
@TeacherTravis
Copy link

TeacherTravis commented Feb 23, 2017

After spending every minute between my classes for two days (I'm an elementary teacher with no css experience) and stumbling through tons of threads, I finally came across this brilliant snippet that worked perfectly! Thanks so much GL Walker!

Everything just worked when I copied this into my wp .css editor. The only thing now I'm struggling with is the start below each product in the shop show up as empty boxes. For an example of what I mean, here is my [website] http://k12movieguides.com/, look under the Trolls Movie Guide product. Any help appreciated, here is the rest of my .css code in the Woocommerce section of my stylesheet. I'm thinking I just need to change something small so this rest of this code communicates with GL Walker's code.

/* end of review stars */

div.quantity {
white-space: nowrap;
/* Disable input[type=number] buttons until the world is ready */
}
div.quantity input::-webkit-outer-spin-button,
div.quantity input::-webkit-inner-spin-button {
display: none;
}
div.quantity .plus,
div.quantity .minus {
font-family: 'WooCommerce';
background: none;
border: none;
font-size: 1.387em;
padding: 0;
color: #ff4800;
-webkit-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
-ms-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}
div.quantity .plus:hover,
div.quantity .minus:hover {
color: #dd2600;
}
div.quantity .qty {
margin: 0 .618em;
width: 2.618em;
text-align: center;
padding-left: 0;
padding-right: 0;
}
table div.quantity {
font-size: .857em;
}
.single-product div.quantity {
float: left;
margin-right: 1.618em;
border-right: 4px double #e8e4e3;
padding-right: 1.618em;
}
.single-product table div.quantity {
padding-right: 0;
border: 0;
}
.single-product #reviews .star-rating {
float: right;
}
.single-product .single_variation .price {
display: block;
margin-bottom: .618em;
}
dl.variation dt,
dl.variation dd {
float: left;
}
dl.variation dt {
clear: left;
margin-right: .53em;
}
dl.variation dd ul {
list-style: none;
}
.backorder_notification {
clear: both;
}
.validate-required.woocommerce-validated input {
border-color: #84ac50;
background: #e5eeda;
}
.validate-required.woocommerce-invalid input {
border-color: #b85f56;
background: #f4e7e6;
}

@GLWalker
Copy link
Author

GLWalker commented Jul 19, 2022

@TeacherTravis Glad it helped, its probably dated now, but could still have some value...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment