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

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

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1019972
    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.

    #1020074
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1020084
    Alberto

    Hi Tom.

    Yes!

    #1020582
    David
    Staff
    Customer Support

    Hi there,

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

    #1020607
    Alberto

    Hi David.

    No. I need to see the product view too.

    #1020624
    David
    Staff
    Customer Support

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

    #1020626
    Alberto

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

    #1020649
    David
    Staff
    Customer Support

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

    #1020653
    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/

    #1020702
    David
    Staff
    Customer Support

    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

    #1020713
    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

    #1020739
    David
    Staff
    Customer Support

    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.

    #1020799
    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!

    #1020827
    David
    Staff
    Customer Support

    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.

    #1020829
    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 …

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