Question

我的WordPress主题（＆＃34;功能＆＃34;）使用了一个丑陋的＆＃34;进度条＆＃34;样式评级系统，它会覆盖默认的WooCommerce星级评级。见下文： http://demo.woothemes.com/function/shop/castillo-cap/#tab-reviews

对于我的生活，我无法弄清楚如何删除它并将其替换为默认/原始的WooCommerce星级评级，实际上看起来像星星的那些（我相信字体很棒？）

我认为需要做的是以某种方式覆盖或优先考虑WooCommerce星级评级css的主题。最终，我希望所有的进度条（商店页面和个别产品页面，评论提交表单）都被默认的WordPress明星所取代，但是目前我只能满足评级的商店页面（进度条））出现在产品的照片下

我能够在Function->Includes->Integrations->woocommerce->css->woocommerce.css中找到控制（创建？）进度条的css代码但是，我还在同一个css文件夹中的woocommerce.less中找到了一些可疑的代码。

以下是我在woocommerce.css中找到的代码：

star-rating {
width: 80px;
height: 1em;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
clear: both;
}
.star-rating span {
background: #52a0cd;
height: 100%;
overflow: hidden;
float: left;
text-indent: -999em;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.star-rating span span {
display: none;
}
p.stars {
overflow: hidden;
zoom: 1;
}
p.stars span {
width: 80px;
height: 16px;
position: relative;
float: left;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a {
float: left;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 0;
padding-top: 16px;
overflow: hidden;
}
p.stars span a:hover,
p.stars span a:focus {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.active {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-1 {
width: 16px;
z-index: 10;
-webkit-border-top-left-radius: 3.631em;
-webkit-border-bottom-left-radius: 3.631em;
border-top-left-radius: 3.631em;
border-bottom-left-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-2 {
width: 32px;
z-index: 9;
}
p.stars span a.star-3 {
width: 48px;
z-index: 8;
}
p.stars span a.star-4 {
width: 64px;
z-index: 7;
}
p.stars span a.star-5 {
width: 80px;
z-index: 6;
}

......这就是我在woocommerce.less中找到的：

   // Single product
    .single-product {
    .summary {
            .woocommerce-product-rating {
                .clearfix;
                .star-rating {
                    float: left;
                    margin: .327em 0 0;
                }
                .woocommerce-review-link {
                    float: right;
                    display: block;
                }
            }
    // General WooCommerce
    .star-rating {
        width:80px;
        height: 1em;
        background: @border_main;
        .border_radius(3.631em);
        clear:both;
        span {
            background: @color_links;
            height:100%;
            overflow: hidden;
            float: left;
            text-indent: -999em;
            .borderbox;
            .border_radius(3.631em);
            span {
                display: none;
            }
        }
    }

    p.stars {
        overflow: hidden;
        zoom: 1;
        span {
            width: 80px;
            height: 16px;
            position: relative;
            float: left;
            background: @border_main;
            .border_radius(3.631em);
            a {
                float: left;
                position: absolute;
                left: 0;
                top: 0;
                width: 16px;
                height: 0;
                padding-top: 16px;
                overflow: hidden;
            }
            a:hover, a:focus {
                background: @color_links;
                .border_radius(3.631em);
            }
            a.active {
                background: @color_links;
                .border_radius(3.631em);
            }
            a.star-1 { width: 16px; z-index: 10; .border_radius_left(3.631em); }
            a.star-2 { width: 32px; z-index: 9; }
            a.star-3 { width: 48px; z-index: 8; }
            a.star-4 { width: 64px; z-index: 7; }
            a.star-5 { width: 80px; z-index: 6; }
        }
    }

...以及更多小部件区域，评论等等。

我发现了一些关于如何使用主题覆盖默认WooCommerce星级评分的帖子，但我无法找到相反的内容。我碰到过这个： http://findnerd.com/list/view/How-to-show-stars-instead-of-theme-ratings-in-Woocommerce/3854/ 然而它对我来说并不起作用......

任何帮助都会受到很多赞赏。谢谢！

修改我被告知这可能是由我的functions.php文件引起的。以下是wp-content-＆gt; themes-＆gt; Function-Child-＆gt; functions.php

中的代码

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

/*-----------------------------------------------------------------------------------*/
/* Start WooThemes Functions - Please refrain from editing this section */
/*-----------------------------------------------------------------------------------*/

// WooFramework init
require_once ( get_template_directory() . '/functions/admin-init.php' );

/*-----------------------------------------------------------------------------------*/
/* Load the theme-specific files, with support for overriding via a child theme.
/*-----------------------------------------------------------------------------------*/

$includes = array(
                'includes/theme-options.php',               // Options panel settings and custom settings
                'includes/theme-functions.php',             // Custom theme functions
                'includes/theme-actions.php',               // Theme actions & user defined hooks
                'includes/theme-comments.php',              // Custom comments/pingback loop
                'includes/theme-js.php',                    // Load JavaScript via wp_enqueue_script
                'includes/sidebar-init.php',                // Initialize widgetized areas
                'includes/theme-widgets.php',               // Theme widgets
                'includes/theme-plugin-integrations.php'    // Plugin integrations
                );

// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );

foreach ( $includes as $i ) {
    locate_template( $i, true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/

这与我的常规（非子）主题的functions.php文件中的代码完全相同。我在这下面有一些自定义代码，但是这些都不涉及任何与此相关的内容。

编辑2： 好的，我觉得我离这里越来越近了!!我发现这个文件是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()
}

当我删除上面的代码时，进度条改变了一点，在添加新的评论部分，我实际上可以看到两个蓝色的STARS放在空白进度条的顶部（当你滚动选择时通常会突出显示蓝色你的评分）。所以似乎删除这种有一半解决了问题。还有什么建议？

使用默认的WooCommerce覆盖Wordpress主题的星级评分

0 个答案: