WooCommerce가 "SSSSS"텍스트 기반 등급을 기본 별표 등급으로 변경합니다.

Question

WooCommerce를 아는 사람들에게는 간단한 수정으로 보일 수 있습니다. 글쎄, 난 완전히 난처한 ...

내 테마는 추악한 "진행률 표시 줄"스타일 등급 시스템으로 WooCommerce의 별 등급 시스템을 덮어 씁니다. 먼저,이 문제를 없애기 위해 (성공적으로) "5 중 4 개"와 같은 텍스트 기반 등급으로 전환했습니다.

다음, 나는 변경하려면 다른 WooCommerce 웹 사이트에서 가져온 CSS의 톤을 사용하는 개별 제품 페이지의 "4 인 5 점"그러나 나는 절대적으로 전체 상점 페이지에 난처한 상황에 빠진입니다.

여기 내 가게 페이지의 : 여기 timulator.net/shop thebrains 원래 "진행 막대가"어떻게 생겼는지입니다 : http://demo.woothemes.com/function/shop/

은 여기가 변경하기 위해 구현 할 수 있었다 코드입니다 ("카스티요 모자"참조) 별의 텍스트 평가에서 개별 제품 페이지 : 위의 코드가 구현되면

.woocommerce div.product .woocommerce-product-rating { 
    margin-bottom: 1.618em; 
} 
.woocommerce .woocommerce-product-rating:after, .woocommerce .woocommerce-product-rating:before { 
    content: " "; 
    display: table; 
} 
.woocommerce .woocommerce-product-rating .star-rating { 
    margin: .5em 4px 0 0; 
    float: left; 
} 
.woocommerce .star-rating { 
    float: right; 
    overflow: hidden; 
    position: relative; 
    height: 1em; 
    line-height: 1; 
    font-size: 1em; 
    width: 5.4em; 
    font-family: star; 
} 
.woocommerce .star-rating:before { 
    content: "\73\73\73\73\73"; 
    color: #d3ced2; 
    float: left; 
    top: 0; 
    left: 0; 
    position: absolute; 
    font-family = "star"; 
} 
.woocommerce .star-rating span { 
    overflow: hidden; 
    float: left; 
    top: 0; 
    left: 0; 
    position: absolute; 
    padding-top: 1.5em; 
    font-family = "star"; 
} 
.woocommerce .star-rating span:before { 
    content: "\53\53\53\53\53"; 
    top: 0; 
    position: absolute; 
    left: 0; 
    font-family: star; 
    visibility: visible; 
} 

, 내 가게 페이지 GREAT 인 S 년대에 "5 개 만점에 5 개"텍스트 변경! (그래서 나는 생각했다.) 그것이 실제로 WooCommerce가 스타 등급을 보여주기 위해 사용하는 것이기 때문이다! 대문자와 소문자 S는 채워진 채 채워지지 않은 별의 등급과 관련이 있습니다.

그러나 위의 코드를 내 Shop 페이지에 맞추려고해도 코드를 해독 할 수 없습니다. 아직도 S의 붙어 ...

어떤 제안?

편집 내가이 파일의 상단에있는 "// 안 Woocommerce 스타일"코드를 제거하여 별을 변환하기 위해 상점 페이지에서 S 년대를 얻을 수있었습니다 : WP - 콘텐츠/테마/기능/포함 /integrations/woocommerce/woocommerce.php 그러나, 내 제품 페이지의 모양 ...

<?php 
if (! defined('ABSPATH')) exit; 

global $woo_options; 

add_theme_support('woocommerce'); 

// Disable WooCommerce styles 
if (version_compare(WOOCOMMERCE_VERSION, '2.1') >= 0) { 
    // WooCommerce 2.1 or above is active 
    add_filter('woocommerce_enqueue_styles', '__return_false'); 
} else { 
    // WooCommerce less than 2.1 is active 
    define('WOOCOMMERCE_USE_CSS', false); 
} 

// Load WooCommerce stylsheet 
if (! is_admin()) { add_action('wp_enqueue_scripts', 'woo_load_woocommerce_css', 20); } 

if (! function_exists('woo_load_woocommerce_css')) { 
    function woo_load_woocommerce_css() { 
     wp_register_style('woocommerce', esc_url(get_template_directory_uri() . '/includes/integrations/woocommerce/css/woocommerce.css')); 
     wp_enqueue_style('woocommerce'); 
    } // End woo_load_woocommerce_css() 
} 

더 이상의 제안을 망쳐 제거하는?

Answer 1

CSS를 구분하고 테마의 CSS보다 구체적으로 지정할 수있는 사용자 정의 게시 클래스를 추가 할 수 있습니다. 당신의 테마의 사용자 정의 woocommerce.css는 모든 글꼴 얼굴 선언을하지 않는 것 같습니다

.woocommerce div.product.use-star-rating .woocommerce-product-rating { 
    margin-bottom: 1.618em; 
} 

편집 :

add_filter('post_class', 'so_43142741_post_class', 10, 2); 
function so_43142741_post_class($classes, $post_id){ 
    if('product' == get_post_type($post_id)){ 
     $classes[] = 'use-star-ratings'; 
    } 
    return $classes; 
} 

그런 다음 CSS는 같을 것이다.

모든 WooCommerce 별 글꼴을 테마의 fonts 폴더로 복사 한 다음 글꼴 테마 선언을 하위 테마 CSS에 추가하는 것이 좋습니다.

@font-face { 
    font-family: 'star'; 
    src: url('fonts/star.eot'); 
    src: url('fonts/star.eot?#iefix') format('embedded-opentype'), 
     url('fonts/star.woff') format('woff'), 
     url('fonts/star.ttf') format('truetype'), 
     url('fonts/star.svg#star') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

또는 테마의 상대 경로를 WooCommerce 플러그인 폴더로 분류 할 수도 있지만이 방법이 더 쉽습니다.

Answer 2

font-family = "star"

로 변경;

글꼴 - 가족 = "fontawesome"실제 글꼴 "fontawesome"에 소위 "별"을 변경

지금 쇼 별, 날 위해 일했습니다. 나는 "별"글꼴을 찾을 수 없었다.

별을 호출하는 숫자를 제외하고는 '\ f005 \ f005 \ f005 \ f005 \ f005'을 사용합니다.