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

extending product title area in product loop

Viewing 5 posts - 1 through 5 (of 5 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 3 days, 20 hours 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.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)