Before you ask please READ THIS

Google pay button is too wide

in FatMoon Posts: 124
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,970
    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: 124
    This works Flawlessly!
    How can I center it? Also, how can i center the "add to cart" button below that?
  • AirAir
    Posts: 10,970
    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: 124
    Flawless! just Flawless!
  • Posts: 124
    Is it possible to remove the wallet button from only single product pages?
  • AirAir
    Posts: 10,970
    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,970
    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: 124
    Sorry Air, thats exactly what i mean. The google/apple button is what i would like to remove from product page.
  • AirAir
    Posts: 10,970
    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: 124
    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 2021 Posts: 10,970
    Hey :-)

    Let's try with stronger rule:
    .single-product #wc-square-digital-wallet {
        display: none !important;
    }
    Post edited by Air on
  • Posts: 124
    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