[Resolved] Product Archive Grid

Home Forums Support Product Archive Grid

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1434247
    Stelios

    Hello guys,

    Firstly, to wish you all the best! Even though I’m new to WordPress and with no coding experience, I see GeneratePress/GenerateBlocks principles and level of work as standing out from the rest and one where I’m more than happy to support. Incredible work and support and truly enjoyable to work with.

    On topic, I’m trying to recreate our main supplier’s website. One element I’m having difficulty recreating is the ‘product grid’ they use, see picture below:

    Product Grid

    In my effort to recreate it, I’ve modified some CSS from the ‘Prime’ theme but 1) the box is too narrow 2) the ‘Add to Cart’ button modifications elude me completely. See picture below:

    Custom Product Grid

    Thanks

    #1434466
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Your screenshots seem to be private – any chance you can open them up so we can take a look?

    Thanks for the kind words! Glad you’re enjoying GP and GB so far 🙂

    #1434476
    Stelios

    Oops!

    Screenshots should work now.

    #1435018
    David
    Staff
    Customer Support

    Hi there,

    any chance we can get temporary login so we can look at the CSS required.

    You can send the login via the Account Issue form:

    https://generatepress.com/contact/

    Please include the URL of this topic so we can track

    #1435493
    Stelios

    Hi David,

    I’ve disabled the “Coming Soon” page, the site should be accessible now.

    Thanks

    #1435866
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    To make the area wider, you’ll need to increase your container width in Customize > Layout > Container.

    For the buttons, are you just wanting to make them full width? If so, try this:

    .woocommerce ul.products li.product .button {
        margin-left: -10px;
        margin-right: -10px;
    }
    #1435947
    Stelios

    Thanks Tom,

    The container width part I need to experiment more as I’ve tried a layout element to increase the width but it somehow pushed some elements to the top and zoomed on the page.

    The button code is perfect, it helped me add to the CSS to get the effect I wanted. However, the hover effect now activates when I mouse over any part of the product image.

    The CSS I’ve used:

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

    This is the rest of the CSS code that targets the Product Archives, modified from “Prime” theme:

    .woocommerce ul.products li.product,
    .wp-block-columns.contact .wp-block-column {
        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-bottom: px;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #ffffff
    }
    
    .woocommerce ul.products li.product:hover, 
    .wp-block-columns.contact .wp-block-column:hover {
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    }
    #1436019
    Stelios

    Nevermind the above, I found the mistake:

    .woocommerce ul.products li.product .button:hover {

    Instead of

    .woocommerce ul.products li.product:hover .button {

    #1436042
    Stelios

    A few more issues:

    1. I’ve aligned the text to the left through Customizer-Layout-Woocommerce. Now, there’s a little gap to the left side that breaks the button’s top border. I know it’s due to the padding from the css I’ve used from the prime theme but if I remove that then the text sticks to the border and doesn’t look right.

    Any ideas? Btw, is this the thing with coders and bugs, you fix one, more pop up? 🙂

    2. Can the price position be fixed? It now goes up and down depending on how many lines there are in the text description.

    3. On mobile view, when I press add to cart the button expands.

    #1436978
    Tom
    Lead Developer
    Lead Developer

    1. Give this a shot:

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

    That’s the way bugs work! 🙂

    2. Try this:

    .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;
    }

    3. Not sure I’m seeing this?

    #1437026
    Stelios

    Awesome, love your css magic! 🙂

    Everything is fixed on the product archive pages.

    The discrepancy is on woocommerce shortcodes (I have one on the home page). I think the grid adjusts according to the number of text description lines, right now evident on mobile view, which also the add to cart button expansion happens.

    #1437397
    Tom
    Lead Developer
    Lead Developer

    Not sure I’m seeing it on the homepage, either. Can you show me a screenshot of what you’re seeing?

    #1437733
    Stelios

    On mobile

    https://drive.google.com/file/d/1vwqpKZIdfw0VX_T1CVFbeijLyVkQLC-u/view?usp=sharing

    Now that the products have changed, the uneven grid shows also on desktop

    https://drive.google.com/file/d/1xd8wA7SEZe6o8AJ4SnDx0JH6UyVvpUGr/view?usp=sharing

    Btw, can the column gap be reduced for shortcodes?

    #1438321
    Tom
    Lead Developer
    Lead Developer

    Ah, well that’s happening because the icon is making the text too wide.

    Could try tackling all of that with this CSS:

    .woocommerce .products {
        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;
        }
    }
    #1438441
    Stelios

    Several discrepancies with the above code.

    On shortcodes:

    Fixed on desktop and tablet view but on mobile, see screenshot

    https://drive.google.com/file/d/1_Pr-oO3G2Js-Aqf_IFyowCF7zJVdUAme/view?usp=sharing

    On product archive:

    On desktop, now it’s two columns instead of three with uneven box sizes, on tablet and mobile view it’s one column instead of two, again with uneven box sizes.

    https://drive.google.com/file/d/1QG3KZfW7_PtUW94xMSSxZ3V3dfJGmeYL/view?usp=sharing

    Also, and this has happened when I added the first css code you’ve shared, the css code below this section has stopped working, at least most of it.

    Since then, I’ve read about cascade and conflicting rules and now I have little faith in the css I’ve used so far as it’s random bits and pieces I’ve pieced together from the forum.

    I’m wondering if first creating a child theme (which I wanted to do at some point) would help, in addition to tidying up the css.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.