Buttons completely misaligned

Hi @donmarkon,

The spacing of the buttons is dependent on the theme and may not look the same everywhere. Can you tell us which theme you are using?
A bit of space can be added with custom CSS:

.woocommerce-cart #ppc-button {
	margin-top: 1em;
}

The checkout buttons are rendered where they are supposed to be. The other plugin you mentioned renders the smart buttons within the description box. PayPal Payments instead replaces the regular “Place order” button with the smart buttons at its original position.
PayPal Payments provides render hooks though, so you can reposition the buttons within the checkout page: https://github.com/woocommerce/woocommerce-paypal-payments/wiki/Actions-and-Filters#change-button-placement-via-render-hooks
It shouldn’t be difficult to get the buttons to render above the trusted icons but they are not intended to be displayed within the gateway box.

Eventually, there may be an option to do this, but it will probably take some time.

Kind regards,
Niklas

Hi @donmarkon,

It depends on where the trusted image is hooked, but the button position on the checkout page could be modified with a filter like this:

add_filter('woocommerce_paypal_payments_checkout_button_renderer_hook', function() {
    return 'woocommerce_review_order_before_submit';
});

This filter must be added to the functions.php file of the child theme.

If this alone doesn’t do it, then please make sure the trusted image uses this hook: woocommerce_review_order_after_submit

That’s how it works for us with the Shoptimizer theme: https://drive.google.com/uc?export=view&id=1G7xJvRJVwR2kN5jqRiwRQiyyRW7IGhaC
I hope this helps!

Kind regards,
Niklas

This depends on how you added the image in the first place. I added the trusted image as described here with a simple filter: https://quadlayers.com/woocommerce-checkout-hooks/

add_action( 'woocommerce_review_order_after_submit', 'quadlayers_trust_badges' );
function quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Trust badges above where hooked with the WooCommerce hook woocommerce_review_order_after_submit</i></div>';
}

PayPal Payments adds the smart buttons to this hook by default: woocommerce_review_order_after_payment
It seems the PayPal Checkout plugin was using a different hook: woocommerce_review_order_after_submit
And if you look at this page, you may notice that it’s below the other hooks.
https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/
But with this filter you can use any hook you like:

add_filter('woocommerce_paypal_payments_checkout_button_renderer_hook', function() {
    return 'woocommerce_review_order_before_submit';
});

So while the default may not be the same as with the Checkout plugin, you have the freedom the hook the buttons wherever you prefer them to be with the above-mentioned filter.

Kind regards,
Niklas