Home › Forums › WoodMart support forum › extending product title area in product loop
extending product title area in product loop
- This topic has 11 replies, 3 voices, and was last updated 1 day, 6 hours ago by Hung Pham.
-
AuthorPosts
-
September 26, 2024 at 11:52 am #600340
josh-6874ParticipantAs seen in the screenshot, I have successfully hid the star rating to yield more space for product title:
.star-rating { visibility: hidden; }
However, the title text area remains the same while it does not continue to display in the second line. Can you please help me to fully display long product title using two lines and in full width?
- This topic was modified 1 week ago by josh-6874.
Attachments:
You must be logged in to view attached files.September 27, 2024 at 9:33 am #600585
Bogdan DonovanKeymasterHi,
1. The property visibility: hidden; only makes an element transparent, but it does not remove the element from the page layout, and it still occupies its space. To completely hide it from the page, you should use the display: none property. Here’s an example of code that hides the rating on the product loop:
.wd-product .product-wrapper .star-rating { display: none; }
You can do the same with the price by substituting the correct price class in the selector.
2. Your product title is displayed in one line because there is an option enabled on the site that limits the title height to one line. Switch or disable this option to change the appearance of the product titles. The option can be found in Theme Settings => Product Archive => Product Styles => Layout (Screenshot https://monosnap.com/file/vrfcRjFS7wdjNQDcq6naqO1bAXoFMZ)
Kind Regards
September 30, 2024 at 4:29 am #601129
josh-6874ParticipantThanks! I removed all elements per your instruction:
.wd-product .product-wrapper .wrap-price, .wd-product .product-wrapper .star-rating, .wd-product.wd-hover-alt .wd-add-btn { display: none; }
But I noticed that the alignment breaks due to the product title area is variable depending on the length of the title. Is there a way to define the product title to two lines to avoid this?
September 30, 2024 at 7:08 am #601156
Hung PhamKeymasterHello josh-6874,
It is due to different heights of images. I kindly recommend you preparing images you want before uploading them to your media library using the graphic editor (Photoshop or any other) to have a nice-looking grid.
For the Product Archive page, please navigate to Theme Settings > Product archives -> Products styles, here you can enable the
Even product grid for desktop
option to align products if they have different height components.
https://prnt.sc/ASt5z0mmasuzBest Regards,
September 30, 2024 at 7:26 am #601159
josh-6874ParticipantIt seems that it is not due to the different image dimensions. Referring to the enclosed screenshot, the adjacent columns are expanded due to the long product title which take up two lines, while the shorter product title remains in a single line. I ultimately want the title lines to be fixed at two lines so that the grid remains uniform regardless of the length of the product title. Can this be done?
Attachments:
You must be logged in to view attached files.September 30, 2024 at 10:23 am #601236
Hung PhamKeymasterHello josh-6874,
Navigate to Theme Settings > Product Archive > Product Styles > Product title lines limit. Set the number of product title lines if it does not fit on one line.
https://ibb.co/2kztmN5Best Regards
- This reply was modified 2 days, 12 hours ago by Hung Pham.
September 30, 2024 at 11:18 am #601285
josh-6874ParticipantThis looks more like a bug to me. When Product title lines limit is configured, even the single-lined product title should reserve an extra line to maintain the overall alignment. Right now, the alignment is not maintained due to various lines the product title takes up for each product on the same page. Please refer to the screenshot, review my comment, and advise.
October 1, 2024 at 8:26 am #601503
Hung PhamKeymasterHello josh-6874,
It seems you fixed by yourself, please confirm me back. https://ibb.co/fMqgzXW
Kind Regards,
October 1, 2024 at 10:05 am #601531
josh-6874ParticipantI kept the title to one line and added ellipsis to add … for long titles to avoid breaking the product loop layout. I still want to use two lines without breakage.
October 1, 2024 at 1:30 pm #601646
Hung PhamKeymasterHi josh-6874,
To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.
Regards,
October 2, 2024 at 3:43 am #601827
josh-6874ParticipantThanks for your continuing support. Please refer to the private content for details.
- This reply was modified 1 day, 17 hours ago by josh-6874.
October 2, 2024 at 2:50 pm #602014
Hung PhamKeymasterHi josh-6874,
Thanks for details.
I’ve fixed your issue. Please check your site again.
1. I have disabled the
masonry grid
option from theme settingsTheme Settings > Product archives > Products styles https://ibb.co/hF5WTkr2. Commented out ellipsis code.
Regards,
-
AuthorPosts
- You must be logged in to create new topics. Login / Register