Introduction
This plugin offers advanced users the ability to create their own payment forms. The following guide will walk you through how to create a custom form and register it with the plugin.
- Create a file in your active theme's custom-forms directory and give it a descriptive name. See our article on customizing a form for steps on adding the woo-payment-gateway folder to your theme.
- Add your custom HTML to the file. The id attributes of your hosted field containers must match those shown in the screenshot.
ID attributes of the hosted fields:
credit card: #bfwc-card-number
expiration date: #bfwc-expiration-date
expiration month: #bfwc-expiration-month
expiration year: #bfwc-expiration-year
cvv: #bfwc-cvv
postal code: #bfwc-postal-code
- Create a CSS file that contains your custom styles for your form. Optionally, you can just include your CSS in your theme's custom.css file.
.my-form-container, .my-form-container *{ box-sizing: border-box; } .my-form-container{ display: flex; display: -webkit-flex; flex-wrap: wrap; background: #fff; padding: 15px; border-radius: 4px; } .my-form-container .field-container{ width: 100%; margin-top: 20px; } body.bfwc-body .my-form-container .field-container label{ font-weight: 600; letter-spacing: 0.6px; } .my-form-container .field-container .hosted-field{ height: 40px; background: #fff; border-radius: 4px; padding-left: 10px; border: 1px solid #bfbfbf; transition: all ease-in 0.3s; } .my-form-container .field-container .hosted-field.braintree-hosted-fields-valid{ border-color: #5aa739; }
- Register your custom form in your theme's functions.php file. To keep your changes safe from theme updates, it's recommended that you use your child theme or create one.
label: This is the text that will appear in the admin section for the form.html: The relative path to your custom form. This path should point to your theme's custom-forms directory.css: The url to your css for your form. If you are using your theme's custom.css, then leave this option blank since custom.css is already loaded by Wordpress.external_css: url path to any externally hosted css that you want to use.javascript: custom JavaScript related to your form.default_styles: the json formatted styles that are used in the rendering of your hosted fields
function add_my_custom_form( $custom_forms ) { $custom_forms [ 'my_custom_form' ] = array ( 'label' => 'My Custom Form', 'html' => 'custom-forms/my-custom-form.php', 'css' => get_stylesheet_directory_uri() . '/my-custom-form.css', 'external_css' => '', 'javascript' => '', 'default_styles' => '' ); return $custom_forms; } add_filter( 'bwc_get_custom_forms', 'add_my_custom_form' );
- Navigate back to your admin settings for custom forms. Refresh the page and you will see your custom form as an option now. Select the form and save your settings.
- Verify that your custom form appears on your checkout page.
Comments
0 comments
Please sign in to leave a comment.