Style forms

  • Resolved alexanderzhel88

    (@alexanderzhel88)


    1 month, 1 week ago

    I use this code to style the form. Only the theme changes, the styles for the form are not applied. Website with woocommerce. 


    add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    /** * Custom shortcode checkout styles -- Use Stripe's Flat Theme */
     $stripe_params['appearance'] = (object) [ 'theme' => 'stripe' ];
    /** * Custom Block checkout styles -- Use Stripe's Night Theme with custom variables + rules */
     $stripe_params['blocksAppearance'] = (object) [
    'theme' => 'stripe',

    'rules' => (object) [
    '.Input' => (object) [
    'backgroundColor' => '#212D63',
    'border' => '20px solid var(--colorPrimary)',
    ],
    '.Label' => (object) [
    'fontSize' => '14px',

    ]
    ],
    ];
    return $stripe_params;
    } );
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello alexanderzhel88,

    Thank you for contacting WooCommerce support.

    Please note that custom code is outside the scope of our support policy.

    However, as a general guideline, I recommend checking the WooCommerce documentation on customizing and styling the payment form:
    https://woocommerce.com/document/stripe/customization/style-payment-form/

    If you need further assistance, you may want to consult a developer.
    You can find one through platforms like WooExperts or Codeable.

    I hope this helps.

    Best regards.

    Thread Starter alexanderzhel88

    (@alexanderzhel88)

    Hi. @doublezed2
    If you haven’t noticed, the code is taken from this link. And it doesn’t work as expected. It only changes the theme of the form itself, but doesn’t apply to the styles.

    Partizan

    (@partizan)

    I have same problem as @alexanderzhel88. Can’t apply ‘fontSize’ .

    @alexanderzhel88 found a solution maybe?

    Best regards.

    Partizan

    (@partizan)

    Sorry for double post but just tweaked and made a working filter for my case – to change size of input field fonts ->

    add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
        // Modify the appearance settings for Stripe UPE to adjust font size only
        $stripe_params['appearance'] = (object) [
            'rules' => (object) [
                '.Input' => (object) [
                    'fontSize' => '16px' // Set the font size to 16px
                ]
            ]
        ];

        return $stripe_params;
    } );

    Good luck.

    Thread Starter alexanderzhel88

    (@alexanderzhel88)

    Hi @partizan

    I understand that there is no solution and the plugin developers have given up on it.
    You can make a custom form and then all the styles are applied.

    Thread Starter alexanderzhel88

    (@alexanderzhel88)

    @partizan
    Thank you. Your solution works.

    Plugin Support Reynier C. (woo-hc)

    (@reynierc)

    Hi @alexanderzhel88 ,

    I see where the confusion is coming in with the styling of the Stripe payment forms. It’s great to hear that you are diving into customization with the guide you found on our site. The code example given from this link is designed to show how you can start to apply your own styles. However, it may not cover all elements or specific changes you’re looking to make.

    As for what @partizan shared, (we really appreciate you for providing this by the way). This snippet modifies the default appearance settings for the Stripe Universal Payment Element (UPE) through a filter provided by WooCommerce Stripe Gateway. What has been added specifically is an adjustment to the font size of input fields within the payment form.

    In essence, this tells WooCommerce Stripe Gateway to instruct Stripe to apply a 16px font size to all the input fields on the payment form, which would affect things like the card number, expiration date, and CVC input areas. It’s a clear and concise example of customizing just one aspect, the font size, of the payment form elements.

    Remember that the structure of CSS-like rules within the array will need to match the exact elements and properties that Stripe’s API is expecting. If this isn’t giving you the desired results, you may need to alter the selectors or properties to match the correct format for Stripe’s UPE (Universal Payment Element) customization.

    If you continue to face design challenges, while we can’t customize it for you, you might want to reach out to a developer who can dive deeper into this with you.

    We really appreciate you for reaching out and I’m sure that others who have encountered the same issue will find this thread helpful.

    I’ll mark this as resolved for now and if you have further questions, please feel free to open a new topic?.

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

Tags