How to Hide a Payment Method from Checkout Page
You can hide any payment method or system from the checkout page of a particular product. In this article, you will learn how to use custom CSS to hide all or a specific payment method from a specific checkout page.
To do that, first go to the checkout page of a product. When you are in the checkout page, right click anywhere on the page and select the inspect option.
On the inspect window, scroll to the top and find the body element. Here, the class name that’s generated is unique for all the different products. In other words, for every product checkout page, there’s an unique class which is generated. The class name should be something like this: .checkout\?product_id\=6974\&product_type\=course\&price_id\=33097
[Note: You can copy the class from here as you might not be able to copy from the inspect window. When you are copying it, ensure you replace the product_id, product_type, and price_id.]
[Note: You might see the same class given twice in the body element. Make sure you use it once in the custom CSS.]
Now, head over to your EzyCourse dashboard and go to Website builder -> Custom CSS.
Paste or use the class (found on the body element from the inspect window) on the custom CSS editor. Also, use the following class: .ant-radio-button-wrapper. And set the property of display as none. And click the Save button on the top right corner.
This will hide all the payment methods from the checkout page you inspected. You can use nth-last-child(n) to hide any particular payment method.
Some Example Scenarios
Suppose, there are three payment methods on a checkout page of a product: Card, Wallet, and Manual Payment.
- Then the last child will be Manual Payment. To hide last child we can use:
.checkout\?product_id\=6974\&product_type\=course\&price_id\=33097 .ant-radio-button-wrapper:nth-last-child(1) {
display: none;
}
- To hide 2nd to last child, which in this case is Wallet method, we can use:
.checkout\?product_id\=6974\&product_type\=course\&price_id\=33097 .ant-radio-button-wrapper:nth-last-child(2) {
display: none;
}
- To hide 3rd to last child, which in this case is Card method, we can use:
.checkout\?product_id\=6974\&product_type\=course\&price_id\=33097 .ant-radio-button-wrapper:nth-last-child(3) {
display: none;
}
- To hide all the payment methods, we can use:
.checkout\?product_id\=6974\&product_type\=course\&price_id\=33097 .ant-radio-button-wrapper {
display: none;
}