[Resolved] Display Sticky 'Add-to-Cart' Button Sooner

[pairfum]

Dear Support,

With WooCommerce on mobile devices, the individual product page only shows a single column. As a consequence, the add-to-cart button is quite far down the page, compared with the two column layout on PC / tablet.

You can see this on our live site:
https://www.pairfum.com

A potential solution would be for the sticky ‘add-to-cart’ button to appear sooner/higher up on the page and not only when the standard ‘add-to-cart’ button has passed from the view.

Is this possible?

Many thanks for your help.

Kind regards,

Pairfum London

[Tom]

Hi there,

There isn’t a way to tell it to show up sooner, but we can tell it to always show up on mobile:

@media (max-width: 768px) {
    .single-product .add-to-cart-panel {
        opacity: 1;
    }
}

Let me know if that helps or not 🙂

[pairfum]

Dear Tom,

This is great idea!

We have implemented it on our site and find that it works well on both single & variable product pages. We noticed that it does not appear for some variable products but don’t know yet why.

There is though one odd thing we notice, the panel also appears on the home page of our live site (https://www.pairfum.com) before anything has been added to the cart. This is not ideal and we would like to avoid this. Can you let us know how?

Here is a screenshot: https://i.imgur.com/U583EYM.png

It is odd, however, that the panel does NOT appear on our staging site: https://staging.pairfum.com –

Here is a screen shot: https://i.imgur.com/sHQfzKo.png

We have not yet worked out why it appears on one but not the other site. Would you know?

Many thanks for your help on this.

Kind regards,

Pairfum London

[pairfum]

Sorry Tom,

We just noticed one other thing:

On ‘bundled’ and ‘grouped’ products the sticky add-to-cart panel does not appear at all.

Here are some screen shots:
– single product:
https://www.pairfum.com/product/new-diffuser-refill-reeds-classic-long-diffuser-sticks/

OnPaste.20200214-135437

– variable product:
https://www.pairfum.com/product/reed-diffuser-refill/

OnPaste.20200214-135605

– bundled product:
https://www.pairfum.com/product/natural-reed-diffuser-set-oil-refill-sticks/

OnPaste.20200214-135805

– grouped product:
https://www.pairfum.com/product/eau-de-parfum-intense/

OnPaste.20200214-135912

As you can see the last two products do not show a sticky add-to-cart panel on Desktop (and Mobile/Tablet).

Is it possible for the panel to appear on these as well?

Kind regards,

Pairfum London

[Tom]

Can you try the updated CSS?: https://generatepress.com/forums/topic/display-sticky-add-to-cart-button-sooner/#post-1164660

The panel doesn’t work with some product types (as you’ve found out). We’re working on a solution to that 🙂

[pairfum]

Hi Tom,

Yes, this works now.

It looks really good and does exactly what we were hoping for (a pity it doesn’t work for bundled & grouped products, yet):
https://www.pairfum.com

Thank you for this.

The only thing we noticed is that our ‘abandoned cart recovery’ plugin doesn’t trigger the ‘add your email’ pop-up when you click ‘add-to-cart’ on the sticky banner. The pop-up is only triggered when you click the standard WooCommerce ‘add to cart’ button.

What code do we need to add so that the pop-up also triggers when a visitor clicks ‘add-to-cart’ on your GP sticky banner?

Many thanks for your help on this.

Kind regards,

Pairfum London

[pairfum]

Hi Tom,

I have just noticed that the sticky ‘add-to-cart’ panel also appears on blog posts.

Here is a screen shot:

OnPaste.20200215-162044

There is no need for it to appear here and it only a distraction.

Can you please amend the code accordingly.

Many thanks,

Pairfum London

[Tom]

Hi there,

It depends on how that plugin triggers the popup. You may need to ask them.

Here’s how we add the “add to cart” button:

<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
    <button type="submit" class="button alt"><?php echo esc_html( $product->add_to_cart_text() ); ?></button>
</form>

It’s not filterable right now, but that may be something we can add to 1.10 or 1.11.

As for the other issue, we’ve updated the CSS: https://generatepress.com/forums/topic/display-sticky-add-to-cart-button-sooner/#post-1164660

[pairfum]

Dear Tom,

Many thanks for the updated CSS.

This now works perfectly.

We will pass your code for the ‘add-to-cart’ button to the developer of the abandoned cart plugin.

Many thanks for your help with this problem.

Kind regards,

Pairfum London

[Tom]

No problem! 🙂

[pairfum]

Hi Tom,

We have been speaking with the developer of the abandoned cart plugin we are using and they are asking the following:

“try to add more class ‘single_add_to_cart_button’ in your button”

Is it possible to add this to the GP Child Theme?

Many thanks for your help.

Pairfum London

[Tom]

It’s not possible to add via child theme, unfortunately.

Is there a way for us to add their trigger to our own class name using some javascript?

I’ll look at adding the class name in our next GPP update.

[pairfum]

That would be fantastic, Tom.

Many thanks for your help.

Kind regards,

Pairfum London

[Tom]

No problem 🙂

[pairfum]

Dear Tom,

Our apologies that we are re-opening this ticket.

The developer of the ‘abandoned cart plugin’, sent us a modified version of his plugin:
https://codecanyon.net/item/woocommerce-abandoned-cart-recovery/24089125

We have just uploaded this modified version to our site:
https://www.pairfum.com

The ‘add your email’ pop-up now appears when you click ‘add-to-basket’ from the sticky panel, both for single & variable products.

We noticed, however, for single product pages that although the button states that the product has been added to the cart, the product has actually NOT been added to the cart. This is irrespective of whether you click away the ‘add-to-basket’ pop-up or fill in your email address:
https://www.pairfum.com/product/grapefruit-pepper-black-cedar-eau-de-parfum/

The button in the sticky ‘add-to-cart’ panel works as it should on variable product pages:
https://www.pairfum.com/product/reed-diffuser-refill/

Can you amend the code of the ‘add-to-basket’ button to also accommodate single products from the sticky panel?

Many thanks for your help on this.

Kind regards,

Pairfum London

[Author]

Posts