Is it possible to design something similar with GP in woocommerce?

[Alberto]

Hello

I know this site is not developed in wordpress, but will it be possible to get something similar in the view of woocommerce products?

Below everything (before the footer), in the url.

Thank you in advance.

[Tom]

Hi there,

Just to confirm, are we talking about the products in the “Paquetes similares” section? I assume you’re wanting the overlay/slide effect?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alberto]

Hi Tom.

Yes!

[David]

Hi there,

so this effect would it only be applied to the Related Products on the single product page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

Hi David.

No. I need to see the product view too.

[David]

Tricky to do may have a few questions. First one thats real important: Are all your images the same size?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

The size of the images is not important, but it could be set so that all the thumbnails were the same size.

[David]

Do you have a Site with your products in place so i can take a look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

Currently not…

But I give you an example. This example is a slider (and it shouldn’t be) but it serves as a sample. (the first demo)

http://demo1.wpbean.com/wpb-woocommerce-product-slider-pro/

[David]

Let’s try this.
First we need to add a wrapper around our title, price and button. Which will require two Hook Elements:

https://docs.generatepress.com/article/hooks-element-overview/

Hook 1
Title: Open shop wrapper
Content: <div class="shop-item-wrap">
Please note the editor will add a closing </div> you must remove this.
Hook: Custom Hook
Custom Hook field: woocommerce_shop_loop_item_title
Priority: 9
Display Rules: Entire Site

Hook 2
Title: Close shop wrapper
Content: </div>
Ignore any color warnings:
Hook: Custom Hook
Custom Hook Field: woocommerce_after_shop_loop_item
Priority: 10 default
Display Rules: Entire Site

Now add this CSS:

@media (min-width: 769px) {
    .shop-item-wrap {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(0);
        transition: transform 0.3s;
        color: #fff;
    }
    
    #wc-column-container .product {
        position: relative;
        overflow: hidden;
    }
    
    #wc-column-container .product:not(:hover) .shop-item-wrap {
        transform: translateY(100%);
        transition: transform 0.3s;
    }
}

Will require some tweaking

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

David.

First of all thank you very much for your help.

I just tried it on a local wp installation and it doesn’t work …

The images of each product and its title remain inside a dark gray container, that is, there is no opening or closing movement …

view

[David]

Hmmm… i added it to this test site – it needs some tweaking but the basics work:

https://floh.assemblewp.com/shop/

That link you provided didn’t have an image – but i would need to see the site to determine what the problem is.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

David.

I just tried it on a production site and it works. Thank you! Spectacular!

The problem I have now is that the title and links are in black (which is the color selected for all system links?

How could I change the color to white so that only this color can be seen on this effect?

Thank you in advance!

[David]

Awesome 🙂

So title and price this CSS:

h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    color: #fff;
}

Buttons for the product page only:

.woocommerce .products a.button {
    color: #000;
    background-color: #fff;
}

.woocommerce .products a.button:hover {
    color: #fff;
    background-color: #000;
}

I suggest you include them within @media query so they only apply to the desktop.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alberto]

Thanks a lot, David!

What I notice is that in the resolutions of tablets and phones the effect does not work. It only works on desktop resolutions …

[Author]

Posts