2
我讀過以前的線程關於wooCommerce明星問題，並沒有能夠幫助自己解決這個問題。我對任何裁員表示歉意。我是一名老師，也是新來的css。這是我的問題：WooCommerce明星符號顯示爲框圖標
我使用Mystile主題爲我的網站k12movieguides.com，我梳理了我style.css文件的wooCommerce部分。我在各個產品頁面和評論區域獲得了星星的正常工作，但我無法弄清楚如何讓星星出現在商店和主頁上的產品縮略圖下，其中每個產品旁邊有多個產品。我不用星星，而是看到一個通用的盒子圖標。
這裏是我的下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;
}
/* ==========================================================================
\t Snippet Name: WooCommerce Review Star Ratings
\t 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.
\t Author: GL Walker
\t Author URI: http://wsfive.com
========================================================================== */
.woocommerce .star-rating, .woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
\t font-family: WooCommerce;
\t speak: none;
\t font-weight: 400;
\t font-variant: normal;
\t text-transform: none;
\t line-height: 1;
\t -webkit-font-smoothing: antialiased;
\t font-size: 1em;
}
.woocommerce .star-rating {
\t overflow: hidden;
\t position: relative;
\t height: 1em;
\t width: 5em;
}
.woocommerce .star-rating:before {
\t content: "\e021\e021\e021\e021\e021";
\t float: left;
\t top: 0;
\t left: 0;
\t position: absolute;
\t color: #999;
}
.woocommerce .star-rating span {
\t overflow: hidden;
\t float: left;
\t top: 0;
\t left: 0;
\t position: absolute;
\t padding-top: 1.5em
}
.woocommerce .star-rating span:before {
\t content: "\e020\e020\e020\e020\e020";
\t top: 0;
\t position: absolute;
\t left: 0;
\t color: #F90;
}
/* rating block specific to single product summary area */
.woocommerce .woocommerce-product-rating {
\t display: block;
\t width: 100%;
}
.woocommerce .woocommerce-product-rating .star-rating {
\t margin: 0 auto;
\t float: left;
\t font-size: 1em;
}
.woocommerce .woocommerce-product-rating .woocommerce-review-link {
\t font-size: 85%;
\t width: 100%;
\t margin: 0.5em 0;
\t float: left;
}
/* rating block specific to review submit form */
.woocommerce p.stars {
\t position: relative;
\t padding: 0.75em;
}
.woocommerce p.stars a {
\t display: inline-block;
\t margin-right: 1em;
\t text-indent: -9999px;
\t position: relative;
\t border-bottom: 0!important;
\t outline: 0;
\t color: #999;
}
.woocommerce p.stars a:hover, .woocommerce p.stars a.active {
\t color: #F90;
}
.woocommerce p.stars a:last-child {
\t border-right: 0
}
.woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
\t border-right: 1px solid #ccc
}
.woocommerce p.stars [class^="star-"]:after, .woocommerce p.stars [class*=" star-"]:after {
\t text-indent: 0;
\t position: absolute;
\t top: 0;
\t left: 0
}
.woocommerce p.stars a.star-1 {
\t width: 2em
}
.woocommerce p.stars a.star-1:after {
\t content: "\e021"
}
.woocommerce p.stars a.star-1.active:after, .woocommerce p.stars a.star-1:hover:after {
\t content: "\e020"
}
.woocommerce p.stars a.star-2 {
\t width: 3em
}
.woocommerce p.stars a.star-2:after {
\t content: "\e021\e021"
}
.woocommerce p.stars a.star-2.active:after, .woocommerce p.stars a.star-2:hover:after {
\t content: "\e020\e020"
}
.woocommerce p.stars a.star-3 {
\t width: 4em
}
.woocommerce p.stars a.star-3:after {
\t content: "\e021\e021\e021"
}
.woocommerce p.stars a.star-3.active:after, .woocommerce p.stars a.star-3:hover:after {
\t content: "\e020\e020\e020"
}
.woocommerce p.stars a.star-4 {
\t width: 5em
}
.woocommerce p.stars a.star-4:after {
\t content: "\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-4.active:after, .woocommerce p.stars a.star-4:hover:after {
\t content: "\e020\e020\e020\e020"
}
.woocommerce p.stars a.star-5 {
\t width: 6em;
}
.woocommerce p.stars a.star-5:after {
\t content: "\e021\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-5.active:after, .woocommerce p.stars a.star-5:hover:after {
\t content: "\e020\e020\e020\e020\e020"
}
/* rating block specific to product listing */
.woocommerce ul.products li.product .star-rating {
\t display: block;
\t text-align: center;
\t margin: 0 auto;
}
/* rating block specific to sidebar widgets */
.woocommerce ul.cart_list li .star-rating, .woocommerce ul.product_list_widget li .star-rating {
\t display: block;
\t text-align: center;
\t 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;
}
只要懇求社區，如果任何人可以提供任何意見或建議，將不勝感激。我一直在搞這些代碼，並在過去的兩週裏在互聯網上尋找類似的帖子，但無法弄清楚。非常感謝：） – TeacherTravis