WooCommerce 将“SSSSS”基于文本的评级更改为默认星级评级

Question

对于那些了解 WooCommerce 的人来说，这似乎是一个简单的解决方法。好吧，我完全被难住了......

我的主题用丑陋的“进度条”样式评级系统覆盖了 WooCommerce 的星级评级系统。首先，我努力摆脱这个（成功地）并将其切换为基于文本的评级，例如“4 分 5 分”。

接下来，我使用来自另一个 WooCommerce 网站的大量 CSS 来更改单个 产品页面 上的“5 分之 4”，但是我对整个 商店感到非常困惑页面。

这是我的商店页面：thebrains timulator.net/shop 以下是最初的“进度条”的样子：http://demo.woothemes.com/function/shop/（参见“Castillo Hat”）

这是我能够实现的代码，用于将单个产品页面从文本评级更改为星级：

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

实施上述代码后，我的商店页面从“5 out of 5”文本变为 S，这太棒了！ （所以我想）因为这实际上是 WooCommerce 用来显示星级的！大写和小写的 S 与填充和未填充的星级相关。

但是，无论我如何尝试将上述代码定制到我的商店页面，我都无法破解代码。还是卡在S的...

有什么建议吗？

编辑我能够通过删除位于此文件顶部的“//禁用 Woocommerce 样式”代码，将商店页面上的 S 转换为星标：wp-content/themes /function/includes/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

我有同样的问题。我刚刚通过浏览器 devtools > 控制台检查了该页面。显示了两个插件错误，以及星型字体的类型问题。我刚刚删除了两个插件，并且修复了错误。我认为是“蜂鸟”插件，另一个是 whishlist 工具。

Answer 2

font-family = "明星"

改成;

font-family = "fontawesome"

将所谓的“星星”更改为实际字体“fontawesome”对我有用，现在星星显示。我找不到“星星”字体。

除了呼星的数字，我用'\f005\f005\f005\f005\f005'来显示。

Answer 3

我会添加一个自定义帖子类，您可以使用它来区分您的 CSS 并使其比主题的 CSS 更具体。

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 div.product.use-star-rating .woocommerce-product-rating {
    margin-bottom: 1.618em;
}

编辑您主题的自定义woocommerce.css 似乎没有任何字体声明。

我建议将所有 WooCommerce 星形字体复制到您主题中的 fonts 文件夹中，然后将 font-face 声明添加到您的子主题的 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 插件文件夹的相对路径，但这可能更容易。