[Resolved] Product Archive Grid

[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

[Tom]

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 🙂

[Stelios]

Oops!

Screenshots should work now.

[David]

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

[Stelios]

Hi David,

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

Thanks

[Tom]

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

[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);
}

[Stelios]

Nevermind the above, I found the mistake:

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

Instead of

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

[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.

[Tom]

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?

[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.

[Tom]

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

[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?

[Tom]

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

[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.

[Author]

Posts