Products alignment and display - by tumoneygram@gmail.com

This topic has 10 replies, 2 voices, and was last updated 5 years ago ago by tumoneygram@gmail.com

  • Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 4, 2020 at 12:12

    Hi,

    I would like to know if is to possible to do the following customizations:

    1) To have grid product display on desktop and list on mobile by default (without filters)

    2) To make title length equal for all the products. Products Short titles are displayed just in one row, while products longer titles occupy 2 rows, consequently, price and buttons of the different products are not aligned. There is a way to leave a two row space on short titles even if they do not needed. I know there is a way to limit on desktop the title words however I would prefer that titles are not cut (in addition, this option does not work for mobile devices).

    3) Increase the size of price in shop product grid

    7.2 / Core plugin 3.2 + child theme

    Please, contact administrator
    for this information.
    9 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    December 4, 2020 at 15:55

    Hello,

    1) Submit customization request here to get help with this because we are unable to provide support for major customizations under our Support Policy. We can help you only with minor CSS styles.

    2) Add the below 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;
    }
    .content-product .product-title a {
        min-height: 5ex;
        line-height: 2.5ex;
    }
    /* ========= To align products END ========== */
    

    3) Add the below custom code

    .product-details .price {
        font-size: 25px;
    }

    Regards

    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 4, 2020 at 18:10

    Thank you Olga.

    2) It seems to work however there is a problem. The first row shows just 2 products instead of 3 products.

    3) works correctly

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    December 5, 2020 at 00:47

    Hello,

    You are welcome. What browser do you use? Because I don’t see the mentioned issue http://prntscr.com/vw3c5h

    Regards

    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 6, 2020 at 17:43

    Thank you for the answer. I have tried with Chrome and no problems reported. However with Safari there is this problem. I tried with different computers.

    In the first row of the shop page there are just 2 products and a blank space instead of 3 products. Then, in product page, in the section of related products just 3 products and a blank space instead of 4 and the fourth product is displayed by itself in second row.

    However, in the picture you sent me, the sale badge of 32% is not ok. Must be something that is creating problem.

    Please contact administrator
    for this information.
    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 6, 2020 at 21:02

    I have also another problem. The header category banner of the following page has been created with WPBakery. Once one of the filters of the shop has been applied, the header banner changes its format

    Please contact administrator
    for this information.
    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 6, 2020 at 23:05

    “I have also another problem. The header category banner of the following page has been created with WPBakery. Once one of the filters of the shop has been applied, the header banner changes its format. ”

    This problem has been partially solved. I disabled Ajax filters. I don’t know why they were changing the format of some elements of my website. Right now I am using xstore filters without Ajax.

    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 7, 2020 at 11:42

    However the problem of product display was not solved.

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    December 8, 2020 at 13:24

    Hello,

    1) What version of Safari do you use? I checked your site again and the sale label is ok http://prntscr.com/vy7umy
    Try to remove the previous code I gave you and replace by this one only

    .content-product .product-title a {
        min-height: 5ex;
        line-height: 2.5ex;
    }

    2) So, do you still need help with this or disabling the Ajax filtering is ok for you?

    Regards

    Avatar: tumoneygram@gmail.com
    tumoneygram@gmail.com
    Participant
    December 8, 2020 at 13:39

    Hi,

    Thank you very Much Olga.

    Product filter alignment is ok.

    I have another topic opened about the Ajax filtering problem. I am going to close this topic.

    Thank you again

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

The issue related to '‘Products alignment and display’' 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.