Return to previous page

Fixed title space in categories preview / not using capital letters for titles

This topic has 13 replies, 3 voices, and was last updated 10 years, 1 months ago ago by Robert Hall

  • Avatar: sorin.manica
    sorin.manica
    Participant
    September 9, 2014 at 16:29

    Hello!

    As you can see here, my client isn’t satisfied with how some titles are shown, making the preview of some products in the categories page larger than other, because of the length of the title.

    So please provide me with some custom .css code to do the following:

    1. Not use capital letters for those titles (in the product categories pages);

    2. Have a fixed space / height for the title preview, making all the product preview to have a similar size in the categories pages.

    Thank you in advance 🙂

    #14775 Copied
    12 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    September 9, 2014 at 18:37

    Hello,

    Please provide us with the link to your site.
    Thank you.

    Regards,
    Eva Kemp.

    #14797 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    September 10, 2014 at 09:56

    The website isn’t public for now, you have admin credentials below, in private content.

    Please look at this page – http://mobilum.uk/product-category/furniture/

    Also, please take into account I already have a .css custom change, for the height of the picture previews in the categories page to be the same:

    img.hide-image {
height: 230px;
}

    Right now I have 4 products per row, as the client changed his mind.

    Please give me custom .css codes to make everything have the same size, the whole preview area, including the title. Probably not having capital letters there will help 🙂

    Thanks again 🙂

    Please, contact administrator
    for this information.
    #14858 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 10, 2014 at 10:12

    Hello,

    Please, add this code into custom.css file.

    .products-grid .product .product-name {
text-transform: none;
}

    Regards,
    Robert Hall.

    #14859 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    September 10, 2014 at 11:14

    Yep, this helps with the capital letter, and the title is now ”smaller” also in height. However, it’s still not enough, although it clearly helps a litlle.

    Please take a look here… http://mobilum.uk/product-category/furniture/

    Can I somehow force a height for the title (let’s say two rows for all titles), so everythime it stays the same (the preview height to be always the same).

    I rely on your judgement, maybe you have a better solution 🙂 Thank you again 🙂

    #14860 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 10, 2014 at 11:49

    The height of the block depends on the product name. You can try to set a fixed height. Maybe it will help you.
    Add this code into custom.css file.

    .products-grid .product .product-name {
height:45px;
}

    Regards,
    Robert Hall.

    #14868 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    September 10, 2014 at 13:38

    Yep, that was what I needed.

    Thank you very much!!! 🙂

    Ticket closed 😉

    #14876 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 10, 2014 at 14:43

    Hello,

    You’re welcome!
    If you have any questions please feel free to contact us.

    Regards,
    Robert Hall.

    #14882 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    October 3, 2014 at 12:01

    Hello!

    This ticket is not exactly fixed. I mean that always only two lines of the title are shown, however when a title is longer than two lines, the third line is still shown, overwriting the line below. What code must I add to force ONLY two line of the title to be shown?

    See here exactly the problem (the last product on the right).

    Please note I have the following custom .css changes for the category pages:

    img.hide-image {
height: 192px;
}

.products-grid .product .product-name {
text-transform: none;
}

.products-grid .product .product-name {
height:45px;
}

    The last one is from this thread, mentioned two posts above.

    Thank you in advance 😉

    #18172 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    October 3, 2014 at 12:10

    If you want admin credentials, they’re below. You can also use the ones from a post below, this ones are for a demo for the same client (mirrored content).

    And this is the link in the screenshot above… http://www.protopopescu.ro/demo-adi/site/product-category/furniture/

    Both the demo and also the main site aren’t live.

    Thanks again 🙂

    Please, contact administrator
    for this information.
    #18175 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    October 3, 2014 at 12:14

    Hello sorin.manica,

    Please add this code into custom.css file.

    .products-grid .product .product-name{
overflow:hidden;
}

    Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

    Regards,
    Robert Hall.

    #18177 Copied
    Avatar: sorin.manica
    sorin.manica
    Participant
    October 3, 2014 at 13:02

    Great, it works! Thank you very much! 🙂

    #18186 Copied
    Avatar: Robert Hall
    Robert Hall
    Support staff
    October 3, 2014 at 13:45

    You’re welcome!

    Regards,
    Robert Hall.

    #18193 Copied
  • Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘Fixed title space in categories preview / not using capital letters for titles’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Underwear Store – WordPress WooCommerce Theme
lazy-placeholder
Concert Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme
lazy-placeholder
Onepage Store – WooCommerce Theme
lazy-placeholder
Plants Store– WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.