Woopayments Style Form

  • Resolved frensis

    (@frensis)


    6 months, 2 weeks ago

    Hi there,
    I’write cause I’m experiencing an issue styling WooPayments fields in checkout page.

    In other topics, everyone link these pages:
    https://woocommerce.com/document/stripe/customization/style-payment-form/
    https://woocommerce.com/document/woopayments/customization-and-translation/customize-payments-appearance/

    No changes appear to me, no matter what I did.
    Clear transient via the code below broke the site:
    delete_transient( 'wcpay_upe_appearance' );
    delete_transient( 'wcpay_wc_blocks_upe_appearance' );

    I’m just asking for 3 simple options:

    • font color
    • fields background
    • fields borders

    Below instructions was added to my functions.php without effect:
    add_filter( 'wcpay_upe_appearance', function ( $appearance ) { $appearance->variables->{'colorDanger'} = '#00FFFF'; return $appearance; } );

    or
    add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) { /** * Custom shortcode checkout styles -- Use Stripe's Flat Theme */ $stripe_params['appearance'] = (object) [ 'theme' => 'flat' ]; /** * Custom Block checkout styles -- Use Stripe's Night Theme with custom variables + rules */ $stripe_params['blocksAppearance'] = (object) [ 'theme' => 'night', 'variables' => (object) [ 'colorPrimary' => '#FFA500', ], 'rules' => (object) [ '.Input' => (object) [ 'backgroundColor' => '#212D63', 'border' => '1px solid var(--colorPrimary)', ] ], ]; return $stripe_params; } );

    FYI: I’m running WooPayments Credit Cart method in test mode… this can impact on iframe/form style?

    Any help?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @frensis

    I’m running WooPayments Credit Cart method in test mode… this can impact on iframe/form style?

    Running WooPayments in test mode should not impact the iframe/form style, so that’s not the issue here. However, the best way to determine this is by checking in the live mode.

    No changes appear to me, no matter what I did.

    Your code seems correct, but it’s possible that your theme or another plugin is conflicting with these changes. To check if this is the case, try switching temporarily to a default WordPress theme like Storefront and disabling all other plugins except WooCommerce and WooCommerce Payments. If the changes take effect, then the issue is likely due to a conflict.

    If the issue persists, it might be related to a caching issue. Make sure to clear all caches (browser, plugin, server, etc.) after making changes to the code.

    If none of these suggestions work, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

    Please note that writing or providing custom code is not within the scope of our support policy.

    I hope this helps! Please let us know how it goes or if you need further assistance.

    Thread Starter frensis

    (@frensis)

    Hi @shameemreza, thank you for your reply… I will check with Storefront (parent) and deactivating other plugins.
    Anyway, I read somewhere that I need to wait 24h to see changes: is it right?
    If so, is it possible to force changes to see it quickly?

    Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    Hi @frensis,

     I will check with Storefront (parent) and deactivating other plugins.

    Sounds like a plan, please try this out and let us know about your findings.

    I read somewhere that I need to wait 24h to see changes: is it right?
    If so, is it possible to force changes to see it quickly?

    Could you please clarify on this>? Also, are you able to share your source so that we can be able to validate this information?

    Looking forward to your reply.

    Thread Starter frensis

    (@frensis)

    Hello there… I only get back into this right now, sorry for the delay.
    After few tests I found something which could cause an issue about styling credit cards fields: I’m using a child theme for Storefront and I started style from scratch dequeuing parent templates:

    add_action( 'wp_enqueue_scripts', 'sf_child_theme_dequeue_style', 999 );
    function sf_child_theme_dequeue_style() {
        wp_dequeue_style( 'storefront-style' );
        wp_dequeue_style( 'storefront-woocommerce-style' );
    }

    If I comment these lines, credit cards fields inherit some style and they look better.
    But for me isn’t possible to apply default Storefront style cause I will loose tons of ready-made work.

    Is there a way to get style only for woopayments iframe? Or dequeue all except checkout payment fields?

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello frensis,

    Thank you for your reply.

    As your request involves custom code, it falls outside the scope of our support.

    I recommend consulting a developer for assistance. You can also connect with the WooCommerce community through our Facebook or Slack channels, where many experienced developers are available to help.

    I hope this helps.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.