−Table of Contents
Auto-Fill and Hide Purchase Order Field
If your site is made for creating quotes, or similar functionality, where you don't want to require payment from your customers, you can pre-fill the Purchase Order field and hide it so your customers can check out without providing payment or a Purchase Order.
Step 1: Turn on purchase orders
Note: An active FoxyCart subscription is required in order to access and use the Purchase Order option.
Go to your Payment Gateway Settings and turn on the option for Let customers pay with a Purchase Order
Step 2: Add snippet to your Checkout template to populate the P.O. field
- In your Foxy administration, head to the checkout template page
- In the template, after the line
{% embed 'checkout.inc.twig' %}
paste the following snippet:
{% block payment_method %} {% set purchase_order = "Quote" %} {{ parent() }} {% endblock %}
- You can customise the
"Quote"
string above to match whatever payment method type you're utilising here - for example that could be"Cash On Pickup"
or"Bank Transfer"
etc. - Save the template
Step 3: Add snippet to custom header to hide the P.O.
- Go to the “Configuration” page in the administration and look for the option labelled
Add custom header and footer code to your templates
. You may need to check the box to see the followingcustom header
textarea. - In the
custom header
textarea, paste the following snippet. If there's already code in the box, paste at the bottom of the code already present there:<style type="text/css"> #fc #fc-payment-method-purchase-order .fc-form-group { display: none; } #fc #fc-payment-method-purchase-order .fc-input-group-container--active { padding-bottom: 0px; } #fc #fc-payment-method-purchase-order .fc-input-group-container__title { border-radius: 5px; } </style>
- Save the configuration.
If you then load up your checkout - you should see the purchase order method still displayed - but without the text input section below it when selected.
Hide purchase order entirely
If you instead want to hide the purchase order option entirely, and not provide any text reference to customers for how they would be paying, then you can simply use this CSS block instead:
<style type="text/css"> #fc #fc-payment-method-purchase-order { display: none; } </style>
Optional Step 4: Customize language on the Checkout
You can change/remove the image and text for Purchase Order on the checkout by customizing the language strings.
- Go to the language templates customization in your FoxyCart admin.
- Click the
show all details
button. You'll see custom language fields. - You can scroll until you see
pay with purchase order
or use your browser's find feature to locate it. Just change the text to what you desire. If you want to format it, you can use html formatting. - You may also want to then edit the language string for
purchase order
. This language string is used on the web and email receipt, and will be the label before whatever value you entered in step 2 (“Quote” in the default example code). - Scroll to the bottom of the page and click
Update Language Customizations
to save.
Optional Step 5: Add custom language to the Web/Email Receipt
Depending on the type of custom payment option you're needing to allow, you may also need to provide some details for the customer on their receipt to complete their alternative payment method. This would be especially useful for Bank Transfer payment methods.
This step will add a little extra language after the default success message that appears at the top of the web and email receipts.
Web Receipt
- Go to the Web Receipt section in the Foxy admin.
- Click the “Custom Template” radio input if it isn't already to show the template
- At the top of the template, paste in the following code:
{% if purchase_order %} {% set custom_purchase_order_message = '<br><br><h4>Bank Transfer Details</h4><p><span style="text-decoration: underline;">BSB</span>: 123 456 | <span style="text-decoration: underline;">Account Number</span>: 9876 54321 | <span style="text-decoration: underline;">Bank</span>: My Bank</p>' %} {% set custom_lang = config.lang|merge({ "receipt_message_order": config.lang.receipt_message_order ~ custom_purchase_order_message }) %} {% set config = config|merge({"lang": custom_lang }) %} {% endif %}
- Edit the code as needed to provide your details, specifically the value set in the
custom_purchase_order_message
line above. The example code above is formatted for a Bank Transfer type option, but you can add any custom HTML you want. - Save the updated template
Email Receipt
Note: This approach relies on the HTML email template, activated by selecting Send Text and HTML E-mail
.
- Go to the Email Receipt section in the Foxy admin.
- Click the “Custom Template” radio input if it isn't already to show the template
- At the top of the template, paste in the following code:
{% if purchase_order %} {% set custom_purchase_order_message = '<br><h2 style="margin:0;padding:0;font-family:Verdana,Helvetica,Arial,sans-serif;color:#666666;font-weight:normal;font-size:18px;margin-bottom:10px">Bank Transfer Details</h2><p style="margin-top:0; margin-bottom:30px"><span style="text-decoration: underline;">BSB</span>: 123 456 | <span style="text-decoration: underline;">Account Number</span>: 9876 54321 | <span style="text-decoration: underline;">Bank</span>: My Bank</p>' %} {% set custom_lang = config.lang|merge({ "email_html_message_order": config.lang.email_html_message_order ~ custom_purchase_order_message }) %} {% set config = config|merge({"lang": custom_lang }) %} {% endif %}
- Edit the code as needed to provide your details, specifically the value set in the
custom_purchase_order_message
line above. The example code above is formatted for a Bank Transfer type option, but you can add any custom HTML you want. - Save the updated template