Item name length - by Goostaf - on WordPress WooCommerce support

This topic has 18 replies, 3 voices, and was last updated 3 years, 4 months ago ago by Goostaf

  • Avatar: Goostaf
    Goostaf
    Participant
    November 16, 2020 at 18:10

    Hello, our names in the products are different in length and it turns out that the cards are not horizontally aligned, if one name is short and the other is long, for example, it is impossible to make all the cards aligned? If we take the abbreviation of the title (Product Title Chars Limit), then in order to be exactly on the mobile, almost the entire title needs to be cut off. https://ibb.co/0VJY3Cr
    https://ibb.co/f4t37r0
    https://ibb.co/RgBHgyy

    17 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 16, 2020 at 19:57

    Hello,

    Add the following code to Theme Options > Custom CSS

    /* ========= To align products ========== */
    .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
        display: flex;
        justify-content: center;
    }
    
    .products-loop .ajax-content, .products-loop {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
    .content-product {
        flex-direction: column;
        justify-content: space-between;
        display: flex;
    flex: 1;
    }
    .content-product .quantity-wrapper {
        margin-right: auto;
    		margin-left: auto;
    }

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 16, 2020 at 20:17

    Thanks, it works in directories, but not on the main page, we have a carousel there too.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 17, 2020 at 09:05
    .products-slider.swiper-container  {
        display: flex;
        align-items: stretch;
    		flex-wrap: wrap;
    }
    .products-slider .product-slide .product {
        display: flex;
        height: 100%;
    }
    .products-slider .swiper-wrapper {
        height: auto;
    }
    .content-product .product-title {
        line-height: 2.5ex;
        min-height: 5ex;
    }

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 17, 2020 at 17:29

    Thank you:)

    Avatar: Goostaf
    Goostaf
    Participant
    November 17, 2020 at 19:53

    Thank you, everything works, I put 2 codes, but I noticed that in the category, the second product falls below in the first line for some reason (Screenshot)

    Please contact administrator
    for this information.
    Avatar: Goostaf
    Goostaf
    Participant
    November 17, 2020 at 22:05

    And also the lines disappeared partially around the cards (Screenshot)

    Please contact administrator
    for this information.
    Avatar: Goostaf
    Goostaf
    Participant
    November 17, 2020 at 23:20

    And the navigation elements with the latest code and the frame for products are also disappearing

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 18, 2020 at 17:23

    Hello,

    Could you, please, provide us with temporary Wp Dashboard access to log in and try to fix the issue?

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 18, 2020 at 18:43

    Sure

    Please contact administrator
    for this information.
    Avatar: Goostaf
    Goostaf
    Participant
    November 18, 2020 at 18:48

    And, if possible, raise the line up, it is the second row, thanks a lot in advance (screenshoot)

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 19, 2020 at 19:07

    Hello,

    1) Could you, please, provide us with link to the category where you faced the problem on mobile device?

    2) I see that line is added only for the right side in the custom CSS http://prntscr.com/vmcl7y So, tell me how you want to show the lines?

    3) Navigation fixed.

    4) Check titles now.

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 20, 2020 at 10:27

    1) In any category, attach a link, remove the code that was dropped above and everything becomes normal.
    2. Also, something happens to the banner, I remove the code, everything is in order.
    3. Also, for some reason, the logo and the phone are not centered in the mobile version.
    4. I don’t understand about the lines, they are only in one row of goods, they are no longer below, and why only on the right?)) Either do it everywhere, or remove it altogether, if possible. Thank you so much. I’ve removed the code for now

    Please contact administrator
    for this information.
    Avatar: Goostaf
    Goostaf
    Participant
    November 21, 2020 at 23:41

    4. With the line, we decided it was some style in the line, sorry.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 23, 2020 at 15:13

    Hello,

    1) Check the categories on mobile now.
    2) Check the banner.
    3) Check now.

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 23, 2020 at 18:59

    Thank you so much,
    1. I still leave the second item in the 1st row down (Iphone 6), maybe that’s the only way of course.
    2. Thank you
    3. Thanks

    4. I also noticed in the mobile subcategory they also go to the 1st row and stuck to the goods, you can’t separate the goods somehow? (I attach screenshots)
    Thank you for everything, you do a lot for us, I really like the template!

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    November 23, 2020 at 19:49

    Hello,

    1) Check the products now.
    4) Unfortunately, there is no way to separate it with the existing HTML structure of the page.

    Regards

    Avatar: Goostaf
    Goostaf
    Participant
    November 24, 2020 at 08:23

    Thank you very much, everything works.

  • Viewing 18 results - 1 through 18 (of 18 total)

The issue related to '‘Item name length’' has been successfully resolved, and the topic is now closed for further responses

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