* One-Page-Checkout *
* One-Page-Checkout *
Cart 0

How to Customise or Hide Fields in Shopify Checkout with TeleCheckout

Customize Checkout One-Page-Checkout

Depending on your needs, there may be instances when you may want to customize fields on your checkout - be it to simply change their default behavior and style, and/or to hiding the field entirely.

This can be accomplished by adding custom codes to various sections of your checkout page. Below are a few examples of how you can implement this workaround.

Replacing the Default Checkbox with a Custom Mandatory Checkbox

As an example, adding a mandatory "Terms & Conditions" checkbox ensures your business is protected. It also gives you the opportunity to set rules on how your product or service may be used within the applicable law.

You can add this code to the footer section in TeleCheckout Admin:

TeleCheckout Footer Section

<p class="custom-control custom-checkbox text-center text-lg-left"><input class="custom-control-input js-quick-update filled" type="checkbox" value="1" name="checkout[accepts_marketing]" id="checkout_accepts_marketing2" checked="checked" required="required">
<label class="custom-control-label medium" for="checkout_accepts_marketing2"> I agree with all Terms And Conditions</label>
</p>

terms and conditions sample

To hide the "old" and now unused checkbox, go to the Customize Checkout section. Under custom style, add this line of CSS code:

.custom-control.custom-checkbox.space-top-4.text-center.text-lg-left {display: none;}

 

Hiding Fields by Adding a Preset Value

The same technique used above can be used to give default values and hide any fields such as hiding the zip cod field and hiding the email address field from the checkout page. 

  1. Hide the field using custom CSS.
  2. Add the default value in the footer section as a hidden input.

How to add additional custom fields

To add a custom field, there are two options:

  1. Custom fields can be added to the product itself as a product property. 
  2. Custom information can be added as a cart note attribute.

Older Post


Leave a comment

Please note, comments must be approved before they are published