My WordPress theme ("Function") uses an ugly "progress bar" style ratings system which overrides the default WooCommerce star-ratings. See below: http://demo.woothemes.com/function/shop/castillo-cap/#tab-reviews
For the life of me I can't figure out how remove this and replace it with the default/original WooCommerce star-ratings, the ones that actually look like stars (font awesome I believe?)
I believe what needs to be done is to somehow overwrite or prioritize WooCommerce star-ratings css over the theme's. Ultimately I would like for all of the progress bars (shop page & individual product pages, review submission forms) to be replaced with the default WordPress stars, however at the moment I can settle for just the shop page where the ratings (progress bars) appear under the product's photos
I was able to find the css code controlling (creating?) the progress bars in Function->Includes->Integrations->woocommerce->css->woocommerce.css However, I also found some suspicious looking code in woocommerce.less located in the same css folder.
Here is code I found in 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;
}
...and here is what I found in 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; }
}
}
...along with some more for the widget areas, reviews, etc. etc.
I've found a few posts on how to override default WooCommerce star-ratings with a Theme's, but I can't find anything on doing the reverse. I did come across this: http://findnerd.com/list/view/How-to-show-stars-instead-of-theme-ratings-in-Woocommerce/3854/ However it didn't work for me...
Any help would be much MUCH appreciated. Thank you!
EDIT: I was informed this might be caused by my functions.php file. Here is the code found in wp-content->themes->Function-Child->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 */
/*-----------------------------------------------------------------------------------*/
This is the exact same as the code in my regular (non-child) theme's functions.php file. I do have some custom code below this, however none of it relates to anything that would be relevant here.
EDIT 2: OK I think I'm getting closer here!! I found this file wp-content/themes/function/includes/integrations/woocommerce/woocommerce.php which included this code at the top:
<?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()
}
When I deleted the above code, the progress bars changed a little, and in the add new review section I could actually see two blue STARS laid on top of the blank progress bar (which normally highlights blue when you scroll over to choose your rating). So it seems that removing this kinda half fixed the problem. Any further suggestions?
