ResolvedTruncated Product Title in rigid-list-prod-summary
Tagged: product description
- This topic has 10 replies, 2 voices, and was last updated 2 years, 10 months ago by
Althemist.
- AuthorPosts
- May 14, 2020 at 1:39 pm #22945
Pablo
ParticipantHi, can you please explain to me how I can display the full product title for the product listings? At the moment the product title is truncated and has three dots “…” appended. Because I am selling branded products I am using Brand Name + Model + Model Number so with a long brand name you cannot see enough of the product title.
Using web browser inspection tools
<div class=”rigid-list-prod-summary”> <span class=”name”> Tre Spade TC-22 Inox – F0… </span> <div class=”price_hold”><span class=”woocommerce-Price-amount amount”><span class=”woocommerce-Price-currencySymbol”>€</span> 702.10</span></div></div>Also, would it be possible to fix the lines displayed to 2 or 3 lines so that for products with shorter descriptions the product will not appear out of position with other products on the same row?
Kind regards
May 14, 2020 at 3:10 pm #22948Pablo
ParticipantHi,
I have found the code… in the file content-product.php. I copied the file to my child theme and changed line 61 to <?php echo rigid_short_product_title(get_the_title(), 100); ?>
Now products with long titles wrap over to the second line. The products do line up along the row with the product images but the line is pushed down one so product price, VAT rate etc are slightly out of line. Can you please explain how I could fix the line depth? Should that be with CSS or can I pad the rigid_short_product_title with spaces so that all product titles have the same length?
Kind regards,
May 16, 2020 at 12:40 pm #22984Althemist
KeymasterHi zuyo,
Not really sure exactly what do you mean. Could you please provide a link, where we can see the problem “live” and provide a solution?
May 19, 2020 at 7:38 am #22998Pablo
ParticipantThis reply has been marked as private.May 19, 2020 at 7:38 am #22997Pablo
ParticipantThis reply has been marked as private.May 22, 2020 at 3:14 pm #23083Pablo
ParticipantHi Dimitar,
Have you managed to look at this yet?
As I posted in my reply above I found that adding the CSS below achieves what I want by fixing the Product Title to 2 lines but I don’t know if it has any impact elsewhere in the Theme or whether it would be better to pad the Product Title so all are the same length.
div.prod_hold .name {
height: 30.4px;
}Also, the other questions:
1) When changing the Theme Options -> Shop -> Add to Cart Button Style from Text to Icon, how can I change the icon to be a shopping trolley instead of the shopping bag? I have done this in the header but I cannot find the identifier of the icon on the Product hover box.
2) When you have the Pre Header Widget active and the Shop Notice, you cannot close the Shop Notice bar in desktop mode because the Pre Header Widget expansion icon covers the close icon of the shop notice bar. You can just about close it from a mobile phone, enough of the notice bar is shown. Is there any workaround for this?
3) Do you have a suggested image size for the title background image for Categories because the image changes for Desktop, Tablet and Mobile view…
May 26, 2020 at 1:44 pm #23158Pablo
ParticipantIt seems I have been bumped onto the second page and other more recent requests have been replied to but not this request.
Can you please reply ASAP?
May 27, 2020 at 7:07 pm #23198Althemist
KeymasterHi zuyo,
It looks like we somehow missed your topic. Sorry about that.
1. The problem with the price filter and the Germanized plugin was caused by recent changes in WooCommerce. We have updated the theme and it should be OK now in the latest version (released today).
2. You can change the add to cart icon with the following CSS:
div.prod_hold .links a.button.add_to_cart_button::before { content: "\f07a" !important; }
3. The best size would e a full HD size (1920×1080) so it always covers the entire area no matter what device, screen size and title size). Keep in mind it was meant to be used with decorative background only and not with images containing sensitive information like texts.
Regards,
DimitarMay 28, 2020 at 10:07 am #23217Pablo
ParticipantHi Dimitar,
1. Yes, the problem with the price filter is now resolved, than you. There was no issue with the Germanized plugin, I had just mentioned that was the plugin that added extra information. The original support request was about the length of the Product Title being truncated. I found the code in content-product.php and so I copied the file to my child theme and changed line 61 to <?php echo rigid_short_product_title(get_the_title(), 100); ?> changing 100 instead of the 28 originally. Now the Product Title will wrap over several lines if necessary. But then the issue was for short titles that the Product Title and the Price below did not line up. I added the CSS code:
div.prod_hold .name { height: 30.4px; }
That now fixes the Product Title to 2 lines so the titles and prices line up. Is that OK or is there a better solution? I will send you a link to some screenshots.
2. Thank you. The cart icon is now changed. I need to learn more on the Web Inspection tools!
3. The pictures were large enough to cover the area but resizing and cropping picture to 1920×1080 has helped on the example I gave you. I guess I just need to play with the aspect ratio and cropping the pictures to suit different views because the background image is not responsive or scaled for different views. The important subject needs to be kept to the centre if to be seen on mobile. It is the same on your demo site rigid.althemist.com (e.g. https://rigid.althemist.com/home-classic-v-3/ loses model left and right, https://rigid.althemist.com/home-classic-v-2/ moves text to centre and see only part of model on the left).
May 28, 2020 at 10:10 am #23218Pablo
ParticipantThis reply has been marked as private.May 29, 2020 at 11:59 am #23244Althemist
KeymasterThe number indicates the number of character allowed before it’s truncated. However, there is really no way to lineup everything if products titles are different length. That’s the main reason we use truncation. 🙂
- AuthorPosts
You must be logged in and have valid license to reply to this topic.