[Resolved] Display add to cart panel on scroll transformation

[Tom]

Likely near the beginning of October at this point (1.11.0 was just released).

[nik9]

Ok, Cool. Will wait for this and will post there after the update. 🙂

[nik9]

Hello Tom,

I saw that the new GP Version is available. How can I now use the class in order to transformation the “Add to cart” panel properly?

Cheers

[Tom]

Try this:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: none;
}

.add-to-cart-panel.show-sticky-add-to-cart,
.add-to-cart-panel.item-added {
    pointer-events: auto;
}

Let me know if it works or not 🙂

[nik9]

Tom, this works perfect! 🙂

BUT.. I didn’t update GP Pro yet. So this is working without any update? haha.. How is this possible?

Thanks.

[Tom]

We both must have overlooked that class somehow – not sure how!

[nik9]

haha 🙂

But this is now a clean approach? Or do we have here also side effect?

[Tom]

Totally clean 🙂

[nik9]

Hello Tom,

I have some problems with this. By using your css above, the added to cart “go to checkout” button does not work. When change pointer-events: none; to pointer-events: auto; then the added to cart banner button “go to checkout” works but then the Add to cart banner is on the page active but not visible. So I can click add when I know where the button is.

Also I made some changes for iPad. Because with the code above the transition jumps on ipad’s becasue of the header px.

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: auto;
}

@media (min-width:767px) {
.add-to-cart-panel {
    transform: translateY(56px);
}
}

@media (min-width:992px) {
.add-to-cart-panel {
    transform: translateY(85px);
}
}

.add-to-cart-panel.show-sticky-add-to-cart {
    pointer-events: auto;
}

[Tom]

Can you try the updated CSS?: https://generatepress.com/forums/topic/display-add-to-cart-panel-on-scroll-transformation/page/2/#post-1467721

[nik9]

Hello Tom,

Thanks. Not it works better. But now the add to cart banner is on mobile at the bottom and not anymore underneath the header.

[Tom]

The only change I made was adding .add-to-cart-panel.item-added to the pointer-events CSS.

.add-to-cart-panel.show-sticky-add-to-cart,
.add-to-cart-panel.item-added {
    pointer-events: auto;
}

You can leave the other part out if necessary.

[nik9]

Hello Tom,

This is strange. When i delete all the CSS, the add to cart banner is still at the bottom from the page. But ONLY on mobile. Tabled (iPad) and Desktop looks normal. How is this possible? We didn’t add something. We made the GP Pro Update some days ago. But I can not say if it works normal before the update or not. But the add to cart banner on mobile was not always at the bottom.

Hmm..

[David]

Hi there,

that is the default behaviour of the Add to Cart Panel. ie. On Mobile it is fixed to the bottom of the viewport.

[nik9]

Hi David,

Okey, But this was not the case for the past 5 month for which we use this feature. 🙂

How can we move this below the header again? top: 0 does not work. 🙁

[Author]

Posts