-
AuthorPosts
-
April 9, 2021 at 1:15 am #1293399
Am trying to do the following on Woo Commerce Shop/Archive page, but am running into a snag — perhaps on the final CSS?
Think that’s where I particularly need help.1. Would like rating stars visible in on Shop page — no matter if reviews or not. (Below is my solution.)
2. Would like rating stars to appear like this on Shop page. (Below is my solution.)
Product Title
Blank Line
Rating Stars
Blank Line
Product Price3. With following actions and filters have accomplished SOME of this with the following code in functions.php.
HOWEVER, my little “diagram” of blank lines and product segments — is still not achievable by me.Tried all day and feel like my thinking cap has a power shortage.
Perhaps someone out there might be able to help?The non-production site url is https://ibeautylashes.com/home-2021. The Magnetic liner is the product with a review, so has all colored stars visible.
4. Just for completeness — and maybe to help someone else — the functions.php has:
/* ———————————————
* WooCommerce – Always display rating stars
* https://wordpress.org/support/topic/woocommerce-always-show-stars-even-with-no-reviews/
* ———————————————
*/
function filter_woocommerce_product_get_rating_html( $rating_html, $rating, $count ) {
$rating_html = ‘<div class=”star-rating”>’;
$rating_html .= wc_get_star_rating_html( $rating, $count );
$rating_html .= ‘</div>’;return $rating_html;
};
add_filter( ‘woocommerce_product_get_rating_html’, ‘filter_woocommerce_product_get_rating_html’, 10, 3 );/* ———————————————
* WooCommerce – Put rating stars AFTER product title and BEFORE price on SHOP page — leaving a blank line (or white space, really) between title, rating stars and price.
* https://stackoverflow.com/questions/52181193/show-product-star-ratings-and-count-below-the-price-in-woocommerce-archive-pages*/
* ———————————————
*/
add_action(‘woocommerce_after_shop_loop_item_title’,’change_loop_ratings_location’, 25 );function change_loop_ratings_location(){
remove_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 5 );
add_action(‘woocommerce_before_shop_loop_item_title’,’woocommerce_template_loop_rating’, 25, 10 );
}5. Thanks for any help you might be able to give me. Please tell me (for the future) how could I attach or provide images for this question?
April 12, 2021 at 5:56 am #1293843Hey CharlieTh,
Thank you for the inquiry.
You have to replace the hook woocommerce_before_shop_loop_item_title with woocommerce_after_shop_loop_item_title to render the rating AFTER the product title. Right now, the star-rating container is being rendered BEFORE the title.
Best regards,
IsmaelApril 14, 2021 at 1:53 am #1294226Please see note in private content.
April 15, 2021 at 11:19 am #1294547Hi,
Thank you for following up.
What happens when you increase the priority of the action hook from 25 to 10?
Example:
add_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 10);
This should render the rating container before the price.
Best regards,
IsmaelApril 18, 2021 at 2:36 am #1294946Somehow, this just didn’t change anything.
So tried the following and got PART of it SORTA working.
I went back to
add_action(‘woocommerce_before_shop_loop_item_title’,’woocommerce_template_loop_rating’,35);I then added the following — which DOES put the stars on the line under the product title.
.star-rating{position:absolute!important;
margin-left:0!important;
top:35px!important;
margin-top:10px!important;
}However, I still can’t figure out how to use css (or whatever!) to scoot the price down, leaving the stars on a separate, nicely spaced line between the product title and the price.
Any ideas?
April 19, 2021 at 6:24 am #1295113Hi,
The rating is still beside the product title when we checked the site. Did you put it back?
To create more space between the product title and the price, try use this css code.
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link div.inner_product_header div.inner_product_header_table div.inner_product_header_cell h2.woocommerce-loop-product__title { padding-bottom: 50px; }
Please toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the changes.
Thank you for your patience.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.