Home › Forums › WoodMart support forum › extending product title area in product loop

extending product title area in product loop

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 26, 2024 at 11:52 am #600340

    josh-6874
    Participant

    As 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 2 months, 2 weeks ago by josh-6874.
    Attachments:
    You must be logged in to view attached files.
    September 27, 2024 at 9:33 am #600585

    Bogdan Donovan
    Keymaster

    Hi,

    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-6874
    Participant

    Thanks! 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 Pham
    Keymaster

    Hello 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/ASt5z0mmasuz

    Best Regards,

    September 30, 2024 at 7:26 am #601159

    josh-6874
    Participant

    It 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 Pham
    Keymaster

    Hello 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/2kztmN5

    Best Regards

    • This reply was modified 2 months, 2 weeks ago by Hung Pham.
    September 30, 2024 at 11:18 am #601285

    josh-6874
    Participant

    This 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 Pham
    Keymaster

    Hello 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-6874
    Participant

    I 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 Pham
    Keymaster

    Hi 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-6874
    Participant

    Thanks for your continuing support. Please refer to the private content for details.

    • This reply was modified 2 months, 2 weeks ago by josh-6874.
    October 2, 2024 at 2:50 pm #602014

    Hung Pham
    Keymaster

    Hi 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/hF5WTkr

    2. Commented out ellipsis code.

    Regards,

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)