Question

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

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

接下来，我使用了来自另一个WooCommerce网站的大量CSS来改变个人产品页面上的“4个满分5”，但是我对整个商店感到非常难过页

这是我的商店页面：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个满分5”文本变为了S，这太棒了！（所以我想），因为这实际上是WooCommerce用来展示星级评分的！大写和小写S与填充和未填充的星级相关。

然而，无论我如何尝试将上述代码定制到我的Shop页面，我都无法破解代码。仍然坚持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

font-family =“star”

改为;

font-family =“fontawesome”

将所谓的“星星”改为实际的字体“fontawesome”，对我来说，现在是明星秀。我找不到字体“星星”。

除了要打电话给星星的号码外，我使用'\ f005 \ f005 \ f005 \ f005 \ f005'来显示它们。

Answer 2

我会添加一个自定义帖子类，您可以使用它来区分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插件文件夹的相对路径，但这可能更容易。

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

2 个答案: