Grid issue when there is old price

Hi there,

is there an issue if you change the Customizer > General > Structure to Flexbox ? As this should apply flexbox to the shortcode as well - which should give you equal height columns ?

Let us know.

Hi David,

Thanks for reply. Yes it is as here; https://prnt.sc/121l73y

Hi Tertas,

Try this CSS:

.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    float: none;
}
.woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link > .price {
    margin-top: auto !important;
}

Worked perfect in main page but broke the category pages.
https://prnt.sc/121vxom

Are you only using Shortcodes on the front page ?

If so change Yings code for:

.home .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    float: none;
}
.home .woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.home .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.home .woocommerce ul.products li.product .woocommerce-LoopProduct-link > .price {
    margin-top: auto !important;
}

The change is simply adding the .home class before each of the CSS selectors.

Dear David,

Yes, I am using shortcodes only for home page.
And your suggestion worked very well.

Thank you both :)

You are welcome :)

Hi again,

I have added one more grid to category pages.
I have used this css to resize products.

@media (min-width: 769px) {
.woocommerce .wc-prl-location-68630 ul.products li.product {
			width: calc(14.2% - 0px);
    }
}
}

adding .wc-prl-location-68630 item to CSS worked well for resize.
But didn't work for vertical alignment with below CSS. https://prnt.sc/12ubpxp

.woocommerce .wc-prl-location-68630 ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.woocommerce .wc-prl-location-68630 li.product .woocommerce-LoopProduct-link > .price {
    margin-top: auto !important;
}

Try:

.wc-prl-location-68630 ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wc-prl-location-68630 li.product .woocommerce-LoopProduct-link > .price {
    margin-top: auto !important;
}

Hi David, Actually I tried that.
I tried again but didn't work.

Thank you for your time and reply.

Hi Tertas,

Addtionally to the CSS David provided, add this CSS as well:

.woocommerce .wc-prl-location-68630 ul.products {
    display: flex;
    flex-wrap: wrap;
}

Let me know :)

Hi Ying,

Thanks. That solved align issue.
But also broke responsiveness. https://prnt.sc/12vo315
When we go narrow windows, products doesn't go second row.

Edited CSS here :)
https://generatepress.com/forums/topic/grid-issue-when-there-is-old-price/#post-1776257

Perfect!

thank you.