Support » Plugin: WooCommerce Stripe Payment Gateway » Remove/adjust stripe separator css

Remove/adjust stripe separator css

  • Resolved yogabasics

    (@yogabasics)


    1 year, 9 months ago

    I don’t know why you have hardcoded an inline css in the “— OR —” separator text as I see no easy way to adjust the padding. Here is the html code:

    <div id=”wc-stripe-payment-request-wrapper” style=”clear:both;padding-top:1.5em;”>
    <p id=”wc-stripe-payment-request-button-separator” style=”margin-top: 1.5em; text-align: center;”>— OR —

    How do I reduce the padding on the ”wc-stripe-payment-request-button-separator” element?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Stef

    (@serafinnyc)

    1 year, 9 months ago

    Chances are that Stripe did that, not WC.

    Try this
    wc-stripe-payment-request-button-separator{padding:0px 0px !important;}

    Plugin Support Doug – a11n

    (@dougaitken)

    Automattic Happiness Engineer

    1 year, 9 months ago

    Hey @yogabasics

    I don’t know why you have hardcoded an inline css in the “— OR —” separator text as I see no easy way to adjust the padding.

    @serafinnyc is correct – this is served by Stripe using their JavaScript for the Payment Request button.

    You can target the button div using #wc-stripe-payment-request-button and the “OR” separator using #wc-stripe-payment-request-button-separator

    Also, it is margin and not padding on the separator – the separator is inheriting the paragraph styles of your site.

    I use this CSS on my site to make the Payment Request button width match the Add to basket (cart) button, also moved the separator into place, and gives a small margin around the separator:

    `
    #wc-stripe-payment-request-button
    {
    max-width:138.656px;
    }

    p#wc-stripe-payment-request-button-separator
    {
    max-width: 138.656px;
    position: relative;
    margin: 5px 5px 5px 5px !important;
    }
    `

    I’ve added that in the Additional CSS in the Customizer and it shows like this – https://cld.wthms.co/90tDSf

    I hope this helps, have a great day!

    Thanks,

    Thread Starter yogabasics

    (@yogabasics)

    1 year, 9 months ago

    Awesome, thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Remove/adjust stripe separator css’ is closed to new replies.

Views