Woocommerce Review Star Ratings. Please read description to learn more...

gistfile1.txt

/* ==========================================================================
	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 */

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;
}

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