9.8.0 Checkout Experience – Title and Styling
-
In the latest version 9.8.0 the checkout has the new option for the Optimized Checkout. It seems like it adds a default title of “Stripe” but seeing as this is the only gateway I’m using is there a hook or function to remove this title as it’s not need – https://woocommerce.com/document/stripe/admin-experience/optimized-checkout-suite/
Also the styling of this form layout for the credit card, there no options to tweak the layout like the UPE had with function? https://woocommerce.com/document/stripe/customization/style-payment-form/
-
Thanks for reaching out and for sharing those links. I understand you’d like to remove the “Stripe” title in the new Optimized Checkout experience and adjust the styling to match your preferred layout.
In WooCommerce 9.8.0, the Optimized Checkout adds the payment gateway title (“Stripe”) by default. At present, there isn’t a built-in option or setting to hide or remove this in the checkout UI. Achieving this would require either a small custom PHP filter or a CSS rule targeting that element. While we can’t provide full custom code solutions here, your developer could use the checkout markup as a reference to make the change.
Similarly, the Optimized Checkout payment form does not yet offer the same styling hooks as the UPE layout. Any adjustments to the layout or design would need to be applied via custom CSS or filters.
You can review our documentation for more details:
Since these changes involve modifying the checkout template or applying custom CSS, they fall outside the scope of our standard support. If you don’t have a developer, we recommend contacting one of our certified WooExperts, who are experienced in customizing WooCommerce checkout flows.
Hello, @mattthomas-photography
Here’s a snippet which work
What it does
– Waits for the payment page to load.
– Observe the DOM changes (because Stripe dynamically reloads its elements).
– As soon as it finds a label with “Stripe”, it replaces it with your custom text.add_action( ‘wp_footer’, function() {
if ( is_checkout() ) : ?>
<script type=”text/javascript”>
document.addEventListener(‘DOMContentLoaded’, function() {
// Observe changes to the payment block
const observer = new MutationObserver(() => {
document.querySelectorAll(‘.wc_payment_method.payment_method_stripe label’).forEach(label => {
if (label.textContent.trim() === ‘Stripe’) {
label.textContent = ‘Credit & Debit Card / SEPA Direct Debit’;
}
});
});
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
<?php
endif;
});Snippet wasn’t quite right @lovingbro as looks like @rguilbert had the wrong quotes in certain sections so wouldn’t read it right
add_action( 'wp_footer', function() {
if ( is_checkout() ) : ?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const changeLabel = () => {
document.querySelectorAll('.wc_payment_method.payment_method_stripe label').forEach(label => {
if (label.textContent.trim().includes('Stripe')) {
label.textContent = 'Credit / Debit Card';
}
});
};
// Run once on load
changeLabel();
// Observe changes for dynamically loaded content
const observer = new MutationObserver(changeLabel);
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
<?php
endif;
});However the fact needing to add this to change the message when there is already a “Card” title within the new OC form layout, makes sense when you have more payment options enabled but just having Credit/Debit Card – makes a doubled up title which isn’t needed. So looking like just hidding via CSS the label till the OC option has more back end function added
The topic ‘9.8.0 Checkout Experience – Title and Styling’ is closed to new replies.
