Product Archive Grid

Have you considered using the WooCommerce blocks to build your products instead of the shortcode? I have a feeling the code would be much cleaner. It's difficult navigating through their old shortcode CSS, unfortunately.

A child theme wouldn't hurt, but it likely won't make a huge difference when it comes to the CSS.

I've tried the WooCommerce block but that doesn't "obey" at all to the CSS or the Customizer. I don't know if I'm doing something wrong. Plus, the CSS seems messed up as I'm rearranging sections to get them to work only to break something else.

The Customizer options only apply to the standard WooCommerce archives - not the blocks or the shortcodes.

Perhaps forcing the products on the home page to be in one column on mobile would work better?

I'd rather avoid the one column on mobile from a UX point of view.

I've been searching the forum and I've replaced the top part of your previous code with your suggestion here:
https://generatepress.com/forums/topic/woocommerce-equal-height-in-grid-view/#post-858862

Product archive pages are now fixed.

But, the mobile view issue remains with the misalignment of the first product:
https://drive.google.com/file/d/1_Pr-oO3G2Js-Aqf_IFyowCF7zJVdUAme/view?usp=sharing
Any possibility this can be fixed?

Alternatively, I've been checking out the WooCommerce blocks scss and created a little Frankenstein of a grid. Any idea if this could be a viable solution?

Try adding this CSS:

.woocommerce ul.products:before {
    display: none;
}

Perfect! Thank you for the help and your time!

No problem! :)

Hi again,

Regarding the current topic, how can I make the grid into one column for mobile (taking Tom's advice after all) and two columns for tablet?

Edit: For the shortcode on Homepage

The CSS code:

/* Product archives and product blocks styles */

.woocommerce ul.products li.product {
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
    transition: all 0.1s ease-in;
    border-radius: 1px;
		box-sizing: border-box;
	  padding-top: 10px;
	  padding-left: 10px;
	  padding-right: 10px;
	  background-color: #ffffff
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}

.woocommerce ul.products li.product .button {
		margin-left: -10px;
    margin-right: -10px;
		color: #5C6873;
		text-align: center;
		text-transform: uppercase;
		border-top: 1px solid #E8F0F5;
		background-color: #ffffff
}

.woocommerce ul.products li.product .button:hover {
		color: #ffffff;
		background-color: #4c6721
}

.product .woocommerce-Price-amount {
		font-weight: normal;
		font-size: 18px;
}

.woocommerce ul.products li.product.woocommerce-text-align-left .button {
    margin-left: -10px;
    margin-top: 0;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    height: 100%;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link > .price {
    margin-top: auto;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link > .woocommerce-loop-product__title {
    margin-bottom: 10px;
}

ul.products.columns-4 {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product.woocommerce-text-align-left .button {
        font-size: 15px;
        padding: 10px 5px;
    }

    .woocommerce .products {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-gap: 10px;
    }

    .woocommerce .products li {
        margin-bottom: 0 !important;
    }
}

.woocommerce ul.products:before {
    display: none;
}

Give this a shot:

@media (max-width: 1024px) {
    .woocommerce ul.products li.product {
        width: calc(50% - 2.8%);
        box-sizing: border-box;
        margin-left: 1.4%;
        margin-right: 1.4%;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

Awesome, thank you!

You're welcome :)