Support » Plugin: WooCommerce Stripe Payment Gateway » Disable Apple Pay on free products

  • Resolved kgagne

    (@kgagne)


    I have several free products in my online store; since store registration is required for checkout, I use these products as lead-gen opportunities.

    However, when viewing the product listing, customers see “Buy with 🍎 Pay” button. This option works great on paid products, but Apple Pay can’t process a payment of $0, so clicking the button causes the Apple Pay window to pop up then disappear, with no progress to the cart or checkout workflow.

    To avoid that confusing user experience, is there a way to disable Apple Pay on free products only?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support wpnomad a11n

    (@wpnomad)

    Hi @kgagne ,

    You can add the free products to a category and then use the following CSS to hide the Apple Pay button. For example, if the category name is free, the CSS code would be:

    
    .product_cat-free #wc-stripe-payment-request-wrapper {
        display: none;
    }
    

    You can add the custom CSS code under Appearance > Customize > Additional CSS.

    I hope that helps!

    Thread Starter kgagne

    (@kgagne)

    Thanks, Ashish!

    If I create a new category, I’d be concerned about it becoming customer-facing and/or its permalinks being indexed by Google. But I imagine the same CSS trick would work if I created a custom shipping class — such as substituting .product_shipping_class-free for .product_cat-free in your example?

    Plugin Support wpnomad a11n

    (@wpnomad)

    Hi @kgagne ,

    If I create a new category, I’d be concerned about it becoming customer-facing and/or its permalinks being indexed by Google. But I imagine the same CSS trick would work if I created a custom shipping class — such as substituting .product_shipping_class-free for .product_cat-free in your example?

    The shipping class is not included in the product page’s HTML code, so I’m afraid shipping class CSS will not work.

    Alternatively, you can hide the products individually using their product ID.

    For example, with the product ID, the CSS would be:

    
    #product-5269 #wc-stripe-payment-request-wrapper {
        display: none;
    }
    

    You’d however need to add the CSS for each free product based on their ID. You can find the product ID from the “Products” page on WP-Admin as shown here: https://d.pr/i/blIJw2

    I hope that helps!

    Thread Starter kgagne

    (@kgagne)

    The shipping class is not included in the product page’s HTML code, so I’m afraid shipping class CSS will not work.

    That’s odd. I see both product_cat-books and product_shipping_class-book in this HTML:

    
    <div id="post-7736" class="post-7736 product type-product status-publish has-post-thumbnail product_cat-books product_tag-chronology product_tag-history product_tag-non-fiction product_tag-steve-weyhrich product_shipping_class-book wcpv_product_vendors-a2history first instock featured shipping-taxable purchasable product-type-variable">
    

    I will try the individual product ID approach you outlined — I have few enough free products that this should be scaleable. Thanks!

    Nonetheless, this approach won’t work, as unlike the above example, my free products are all digital downloads and have no shipping class.

    Plugin Support wpnomad a11n

    (@wpnomad)

    Hi @kgagne ,

    That’s odd. I see both product_cat-books and product_shipping_class-book in this HTML:

    Aha, thanks for pointing that out. I see you found the shipping class in product with ID 7736, I was checking this digital product that you previously linked – and it didn’t have the shipping_class in the HTML (as no shipping class was assigned due to it being a digital product like you mentioned).

    I’m glad that the individual product ID approach would work for you!

    Thread Starter kgagne

    (@kgagne)

    Haha, yeah, my bad for pointing you to the product that I actually wanted to apply this CSS to, then redirecting you to a different one as an example :\

    Anyway, the CSS worked! I had to include !important, but I’m OK with that 🙂

    Cheers!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Disable Apple Pay on free products’ is closed to new replies.