Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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 Price

    3. 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?

    #1293843

    Hey 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,
    Ismael

    #1294226

    Please see note in private content.

    #1294547

    Hi,

    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,
    Ismael

    #1294946

    Somehow, 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?

    #1295113

    Hi,

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.