WooCommerce明星符号出现作为框图标

我已经阅读了以前关于wooCommerce明星问题的线索,并且无法帮助自己解决这个问题 . 我为任何裁员道歉 . 我是一名老师,也是css的新手 . 这是我的问题:

我正在为我的网站k12movieguides.com使用Mystile主题,并且我想知道如何让商店和主页上的产品缩略图下的星星显示出来,每个产品旁边都有多个产品 . 而不是星星,我看到一个通用的盒子图标 .

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.

以下是我在wooCommerce部分下的style.css中的完整代码 . 如果需要任何其他信息来帮助解决此问题,请与我们联系 . 非常感谢您的时间和天才 .

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

3 years ago

我有一个非常相似的问题,除了我能够输出S但不能将它们格式化为星星 . 查看我发布的问题,因为它们可能会对您有所帮助 . 下面是我使用的一些代码 . 请原谅我的一些评论 . 我整整一周都在研究这个问题

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

3 years ago

这是此错误的解决方法,而不是解决方案,但它可能是一个有用的临时垫片,直到有人聪明地找出真正的答案 .

使用FontAwesome图标集,您可以使用他们的星星替换丢失的星星 .

一旦FontAwesome成功安装,这就是必要的CSS .

/* 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";   
}