Payment methods
3 min read
How work this Addon?
The Payment methods addon is ready to display the WooCommerce Payment methods. Just need to activate the addon from the plugin Addons tab and save the settings.
This addon only will work if you use it in a page selected as the WooCommerce account page, so you can use it in the by default WooCommerce account page, removing the by default shortcode [woocommerce_my_Account]Â to avoid conflicts and ensure that it will work correctly.
Also, you can build your custom account page from scratch and assign it as the WooCommerce account page, to do it just need go to: WooCommerce > Settings > Advanced and look for the dropdown menu where you can choose the page as the WooCommerce account page.
You can use this widget directly on the account page with just drag & drop. Although it can also be added in an Elementor template, so that later you can add it where you need, for example as tab content using the Advanced tabs extension.
How to configure the Addon?
This widget not includes any option to set, so you can start to customize the style directly.
It is very customizable in terms of styles, it has style options to customize each element individually, as well as:
- General Container
- Table General
- Table Header
- Table Content
- Action Buttons
- Add Payment Button
You can also show the message that appears when have not any payment method saved and thus be able to apply styles to it from the Elementor editor and in real time.
You can configure the container, the icon, the message and the button independently, and you can also hide it so that it is not shown in the editor and keep a less cluttered view when you have finished configuring it.
Also in the same way you can show the payment methods form, to be able to apply styles from the Elementor editor and in real time. You can configure everything part by part as well as:
- General Container
- Form Container
+ Separator - Form Payment Box
- Form Labels
- Form Fields
- Form Button Container
- Form Button
Additionally, you can close the payment methods form by clicking on the button in the upper right corner, and you will be redirected to the last point where you were. This button receives the style from the Payment method’s form link style option, although you can also apply a custom style with CSS. To do this, you just have to use the class add_pay_method_closebtn
For example:
.add_pay_method_closebtn {
color:red;
}
.add_pay_method_closebtn:hover {
color:blue;
}
