Learn in this tutorial how to optionally show the billing fields in Easy Digital Downloads (EDD) checkout page using code.
The Easy Digital Downloads plugin allows you to show or hide the billing fields from its settings (Downloads > Settings > Payment gateways > Stripe > Billing Address Display).
But it has the limitation that it’s a global setting and doesn’t give the customers the option to decide if they want to fill in those fields or not.
As I’ve told you several times, the fewer fields a potential customer has to fill in, the better. In other words, the more likely they are to complete the purchase.
But it is also true that, depending on the type of business (if your customers are also professionals) you may want to collect billing data from the beginning to save time creating complete invoices.
The idea of this tutorial is to bring the best of both worlds together.
This would be the final result:
And here’s the code you need:
Instructions to show/hide the billing fields on the EDD checkout page.
1. Customize the billing fields
Add the following code snippet to your functionality plugin:
To see this and another 1097 code snippets of this website, login or subscribe here.
In this case you use the edd_after_cc_fields hook to customize the Easy Digital Downloads billing fields.
Also, you can add the question “Do you need a company/self-employed invoice? (which you can change to whatever you want) and an HTML markup that in conjunction with CSS allows you to hide the fields at the start.
You also indicate that the answer selected by default is “No”, so you minimize the number of fields that the potential customer sees at the checkout.
In the second part of the code, you indicate that none of the billing fields are mandatory so you avoid displaying an error to customers who choose not to enter the data.
2. Customize the CSS of the billing fields
Once you have customized the billing fields, you just need to take advantage of the magic of CSS to hide or show the fields depending on the choice.
Add the following fragment at the end of style.css:
To see this and another 1097 code snippets of this website, login or subscribe here.
By inserting these lines of CSS you make sure that the billing fields are not shown by default. And only when they select “Yes” to the question “Do you need a company / freelance invoice?” it will be visible.
If you notice you have used the same strategy that I mentioned in the tutorial to show the legal tagline in accordion format in Gravity Forms.
These are good examples of interactions that often use JavaScript but can be achieved more efficiently with a little HTML and CSS.
Conclusions
Now you know how to optionally hide or show billing fields in Easy Digital Downloads checkout.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
