Star ratings next to product title

[gimmechefs]

Hi. I would like the star ratings on li.product to appear next to the product title.

I will be controlling the length of the product title, so as to keep the stars inline.

The css i have found from other topics on the forum show the stars either above or below product title.

I would like them to float right, 40 px from bottom of product, 20 px from right of product.

Please see attached…

Thanks
Max

[ruenel]

Hello Max,

Thanks for writing in! To accomplish what you have in mind, kindly check this thread: How get Woocommerce star rating to show

You need to display the star rating first and then you must limit the width of the product title so that there will be enough space to display the star rating. By setting the maximum width of the product title, it will automatically goes to the next line without overlapping the star rating on the right side.

Hope this makes sense.

[gimmechefs]

Hi Mate. I tried this css snippet before i posted.

It places the stars in the centre of the product, and pushes down the title.

I would like the stars to be in a constant place, exactly right of the title. I will indeed be clipping the title character length, to accomodate the stars.

I have added a mockup which should clarify it. Thanks for your understanding.

Max

[tristup]

Hi Max,

In WooCommerce several hooks are called to show the elements within the product. Usually the rating shows after the Product Title and that is the convention followed by WooCommerce itself.
Now if you need to change this convention, you need to modify the method priority which is called in the hooks or change the hooks to call the same method to show it in a different position.

You can find the hooks for shop page here: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
Please check specifically the hook woocommerce_shop_loop_item_title and woocommerce_after_shop_loop_item_title.

We also recommend you to hire a developer who can assist you to do this customization or you can avail our newly launched service called One
Please remember that we don’t offer any support to custom codes or issues related to it.

Thanks