Remove the "More Payment Options" link on product page

Hi,

I’m using the theme “Elixir” and I’m trying to remove the More Payment Options link, which appears below the add to cart/payment buttons.

I know this is commonly requested, but I’ve read most of the other blog posts and attempted to follow the instructions, but it does not work, which is why I’m creating this new one.

I’ve added:

.shopify-payment-button .shopify-payment-button__more-options {
display: none;
}

To the theme.css, base.css and many other snippets/assets.

Any help with this would be greatly appreciated.

That doesn’t mean anything, provide a PUBLICLY access URL to the example sample of the design.
Not everyone has your exact setup, or some how magically know what your doing or can access it.
Keep other people in mind when communicating and provide the info you have right in front of you UPFRONT.

Or if you cannot provide inspectable websites then exhaust search first https://community.shopify.com/search?q=Remove+the+“More+Payment+Options”


Use Custom css settings before modifying files or otherwise BACKUP themes first.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Can you send the link to the page you’re trying to remove it on? Inspecting the element in the browser may show that it has a different name than the ones you’ve listed below.

I tried this code and it seemed to hide that link. I would add it as a custom liquid section in the template or in the custom css on the product card in the theme editor as Paul mentioned that modifying back end theme code can be tricky.

more-payment-options-link {
display: none;
}

The display:none; may need the !important CSS declaration , test and use as last resort.

:bomb: Merchants really need to think it through before disabling/hiding things where customers choose how to GIVE YOU MONEY.

Put another way your making it harder for people to buy things across the board by limiting payment options.
Great way to tank conversions if you don’t have hard business reasons to do and this for personal aesthetics.
THOROUGHLY document that you’ve done this so you can easily undo it later.

@SibCo please add this css to the very end of your base.css file and check, should look like the screenshot below

a#more-payment-options-link {display: none;}

Hi @SibCo ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

more-payment-options-link {
    display: none;
}

Hello, @SibCo

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

#more-payment-options-link {
    display: none !important;
}

Thank You!