WooCommerce Star Symbols Showing up as Box Icons

2
votes

I've read through the previous threads regarding wooCommerce star issues and haven't been able to help myself fix this problem. I apologize for any redundancies. I'm a teacher and new to css. Here is my issue:

I'm using the Mystile theme for my website k12movieguides.com and I've combed through the wooCommerce section of my style.css file. I got the stars working properly on the individual product page and review areas, but I can't figure out how to get the stars to show up under the product thumbnails on the shop and home pages, where there are multiple products next to each. Instead of stars, I see a generic box icon.

Here is a screenshot of the box icons, I've tried to use chrome's inspect feature to figure out what is going wrong with class="rating" but I can't figure it out.

Here is the entire code in my style.css under the WooCommerce section. Please let me know if any other information is required to help fix this problem. Your time and genius is much appreciated.

/*-------------------------------------------------------------------------------------------*/
/* 7. WOOCOMMERCE */
/*-------------------------------------------------------------------------------------------*/
p.demo_store {
  background: #4d65a4;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  padding: 1em;
}
.homepage-banner {
  display: none;
}


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



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;
}
2
csswordpresswoocommerce
Just to implore the community, if anyone can offer any advice or suggestions it would be much appreciated. I've been messing with this bit of code and searching the internet looking for similar posts for the last two weeks and can't figure this out. Much appreciated : ) – TeacherTravis

2 Answers

2
votes

This is a workaround for this error, not a solution to it, but it may be a helpful interim shim until someone smarter figures out the real answer.

Using the FontAwesome icon set, you can use their stars to replace the missing stars.

Here's the necessary CSS once FontAwesome has been successfully installed.

/* Base */
p.stars.selected a.active~a:before,
p.stars:hover a:before,
p.stars a:before, 
p.stars a:hover~a:before,
p.stars.selected a:not(.active):before, 
p.stars.selected a.active:before { 
font-family: fontawesome;
}

/* Empty Stars */
p.stars a:before,
p.stars a:hover~a:before, 
p.stars.selected a.active~a:before {
    content: "\f006";
}

/* Filled Stars */
p.stars:hover a:before, 
p.stars.selected a:not(.active):before, 
p.stars.selected a.active:before {
    content: "\f005";   
}
0
votes

I'm having an incredibly similar issue, except I was able to output S's but cannot format them into stars. See the questions I've posted as they might help you. Below is some code I uses. Please excuse the tone of some of my comments. I've been working on this for an entire week lol

/*--------------------------------------*/
/* MAKES LEAVE A REVIEW WORK PERFECTLY! */
/* Copied from plugins-woocommerce-assets-css-woocommerce.ss */
/*--------------------------------------*/
.woocommerce p.stars a:before,.woocommerce p.stars a:hover~a:before{content:"\e021"}.woocommerce #review_form #respond p{margin:0 0 10px}.woocommerce #review_form #respond .form-submit input{left:auto}.woocommerce #review_form #respond textarea{box-sizing:border-box;width:100%}.woocommerce p.stars a{position:relative;height:1em;width:1em;text-indent:-999em;display:inline-block;text-decoration:none}.woocommerce p.stars a:before{display:block;position:absolute;top:0;left:0;width:1em;height:1em;line-height:1;font-family:WooCommerce;text-indent:0}.woocommerce table.shop_attributes td,.woocommerce table.shop_attributes th{line-height:1.5;border-bottom:1px dotted rgba(0,0,0,.1);border-top:0;margin:0}.woocommerce p.stars.selected a.active:before,.woocommerce p.stars:hover a:before{content:"\e020"}.woocommerce p.stars.selected a.active~a:before{content:"\e021"}.woocommerce p.stars.selected a:not(.active):before{content:"\e020"}


/*--------------------------------------*/
/* STAR RATINGS!! EEEEYYYY!! */
/*--------------------------------------*/
/* COULD POSSIBLY BE FORCING S's on SHOP PAGE! When removed, all ratings change to numerical "4 out of 5". But when above taken from woocommerce.css then Add a review section works fine */

/* Adds some space between top avg review and product price */
.woocommerce div.product .woocommerce-product-rating {
    margin-bottom: 1.618em;
}


/* Deleting made no changes to Product OR Shop page stars */
/*.woocommerce .woocommerce-product-rating:after, .woocommerce .woocommerce-product-rating:before {
    content: " ";
    display: table;
}*/

/* Deleting made no changes to Product OR Shop page stars */
/*.woocommerce .woocommerce-product-rating .star-rating {
    margin: .5em 4px 0 0;
    float: left;
}*/


/* Fills in posted review's star's on product page and removes "# out of # based on customer reviews" from top of product page next to avg stars & removes "# out of # from shop page and aligns S's */
.woocommerce .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
}

/* Adds empty stars behind user submitted star ratings & grey s's to shop page */
.woocommerce .star-rating:before {
    content: "\73\73\73\73\73";
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    font-family: star;
}

/* Changes product page black stars to blue and removes previous "# out of #" text & removes "# out of # from Shop page*/
.woocommerce .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
    font-family = "star";
    color: #52a0cd;
}

/* Fills in product page review stars and avg star ratings appropriately based on posted reviews & Add's uppercase blue S's to Shop page */
.woocommerce .star-rating span:before {
    content: "\53\53\53\53\53";
    top: 0;
    position: absolute;
    left: 0;
    font-family: star;
    visibility: visible;
    font-family: star;
}