Before you ask please READ THIS

Google pay button is too wide

in FatMoon Posts: 68
Hi,
Under a single product page in woocommerce the "google pay" button is huge. It is much wider than the "add-to-cart" button. Is there a CSS for fix?

Comments

  • AirAir
    Posts: 10,639
    Hello :-)

    It seems this button is as such by nature :-)
    I wonder is there are any settings for it the plugin.

    You can try this custom CSS, but I am not sure if plugin setting will not override it:
    .wc-square-wallet-buttons {
        width: 35%;
    }
    in such case you can try:
    .wc-square-wallet-buttons {
        width: 35% !important;
    }
    With kind regards.
  • Posts: 68
    This works Flawlessly!
    How can I center it? Also, how can i center the "add to cart" button below that?
  • AirAir
    Posts: 10,639
    Hello :-)

    You can add such custom CSS:
    .wc-square-wallet-buttons {
        margin-left: auto;
        margin-right: auto;
    }
    .woocommerce div.product form.cart .button {
        float: none;
        margin: 0 auto;
        display: block;
    }
    Should center both buttons.

    With kind regards.
  • Posts: 68
    Flawless! just Flawless!
  • Posts: 68
    Is it possible to remove the wallet button from only single product pages?
  • AirAir
    Posts: 10,639
    I don't think I see such button on your single product page. I have checked here https://sensibleedibles.com/shop/6-raspberry-hazelnut-bar-v-gf

    Is it there, or should I look somewhere else?

    With kind regards.
  • AirAir
    Posts: 10,639
    Hey :-)

    Sorry but I don't see anything that looks like a "wallet" button.

    Or do you mean to remove the button that we just tried to center?

    With kind regards.
  • Posts: 68
    Sorry Air, thats exactly what i mean. The google/apple button is what i would like to remove from product page.
  • AirAir
    Posts: 10,639
    We just centered this button, to hide it now ;-)

    Lets add such custom CSS:
    .single-product #wc-square-digital-wallet {
        display: none;
    }
    With kind regards.
  • Posts: 68
    Hi Air,
    Thanks. It didn't work. I tried deleting the previous CSS as well. no difference. Thank you.
    image (1).png
    3600 x 1080 - 2M
  • AirAir
    edited April 2 Posts: 10,639
    Hey :-)

    Let's try with stronger rule:
    .single-product #wc-square-digital-wallet {
        display: none !important;
    }
    Post edited by Air on
  • Posts: 68
    Alright! That worked. Your killing it Air!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion