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

I managed to fix for the cart page.
But what I don’t like is how it looks on the checkout page.
Keep in mind that previous Paypal official plugin was displaying on the checkout at the correct position

The theme is
https://www.commercegurus.com/product/shoptimizer/

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

Thanks!
I use shoptimizer …
I contacted support and they told me that next week they will issue an update to fix this.

Btw how I add this hook to trusted image?

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

Hi there

We have not heard back from you in a while, so I’m marking this thread as resolved.
Hopefully, the above information helped you out.
If you have any further questions, please feel free to reopen this topic or create a new one.

Cheers! ??