Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Product Archive Grid

Home Forums Support [Resolved] Product Archive Grid

Home Forums Support Product Archive Grid

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #1438592
    Tom
    Lead Developer
    Lead Developer

    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.

    #1438766
    Stelios

    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.

    #1439637
    Tom
    Lead Developer
    Lead Developer

    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?

    #1439990
    Stelios

    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?

    #1440811
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .woocommerce ul.products:before {
        display: none;
    }
    #1440950
    Stelios

    Perfect! Thank you for the help and your time!

    #1441616
    Tom
    Lead Developer
    Lead Developer
    #1451192
    Stelios

    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;
    }
    #1451509
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1451587
    Stelios

    Awesome, thank you!

    #1452651
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.