Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 2, 2021 at 8:25 pm #1277203
    npmcgrew

    Hello,

    A few months ago, I added the PayPal buttons to our online shop’s cart page and checkout page. Today, I added the Apple Pay and/or Google Pay Digital Wallet buttons which are now available through the WooCommerce for Square payment gateway plugin.

    All of the buttons work fine and I like that we have options so the customer can select whichever method they prefer to pay with. I am hoping to clean up the appearance of the buttons in the following ways:

  • Keep the default ‘Add to Cart’ Button above the digital wallet and PayPal buttons (I don’t think they would all align horizontally well with smaller devices)
  • Have a uniform size the ‘Add to Cart’, Apple Pay, Google Pay and PayPal buttons so that it is more organized, professional and credible
  • Remove the Apple Pay and Google Pay buttons from the single product pages. I like those options in the cart and checkout, but think they add clutter and confusion sometimes, especially with our older customer base, on the single product pages.

    • I’ve included a couple of screenshots below:

    Single Product Page showing Digital Wallet Button(s) Aligned Center and Above

    Cart Page with Digital Wallet Button(s) top, Checkout Middle and PayPal Below with Various Alignments

    Thank you for your help in advance!

February 6, 2021 at 8:51 pm #1278370
Mike

Hey npmcgrew,
Sorry for the very late reply and thanks for the login. To remove the “digital-wallet” from the single product pages, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.single-product #wc-square-digital-wallet {
	display: none;
}

To adjust your “cart” page, here is one option:
2021-02-06_134258.jpg
for this the css is:

.woocommerce-cart #ppc-button {
	width: 60%;
}
.woocommerce-cart #wc-square-digital-wallet {
	width: 30%;
	display: inline-block;
	margin: 0 !important;
	padding-top: 2em !important;
}
.woocommerce-cart #wc-square-wallet-divider {
	display: none;
}
.woocommerce-cart .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	text-align: left !important;
}

Is this what you had in mind?

Best regards,
Mike

February 9, 2021 at 6:39 pm #1279187
npmcgrew

Mike, thank you much. Apologies for my delayed response as well.

I will give this a go today and circle back with you. Thanks again!

February 23, 2021 at 6:22 pm #1283189
npmcgrew

Mike,

Thanks for getting that over to me. Finally got a moment to give it a try and it’s working much better and looks a lot more organized. Thanks, Mike!

February 24, 2021 at 6:05 am #1283302
Jordan Shannon

Hi,

Did you need additional help with this topic or shall we close?

Best regards,
Jordan Shannon

  • Author
    Posts
    • Viewing 5 posts - 1 through 5 (of 5 total)
    • The topic ‘WooCommerce Digital Wallet, Default Store and PayPal Buttons Alignment/Spacing’ is closed to new replies.