TABLE OF CONTENTS


Improving the design of your checkout page is a guaranteed way to increase sales and build a strong reputation with your customers. Blockonomics allows you to easily edit the appearance of your payment screens, to let you add that personal touch to your pages.


Ever wondered how to add text or HTML to the payment page, like instructions on how to buy bitcoin? This can be done in many ways, but this article will help you to do it the right way. 


Editing WordPress

Editing your checkout page on WordPress is valuable for a number of reasons, including the improvement of your customer’s experience and, consequently, satisfaction. When using our plugin, you’re able to integrate this screen with a wide range of themes: from premium ones to those constructed using popular page builders. 

Also, you have the freedom to tailor its display to perfectly align with your brand and style. This level of customization ensures that your payment process reflects your unique identity.


Adding instructions to your payment page

To make the most of this feature, you may add both instructions and graphics. For the instructions, you can log into your WordPress dashboard using your information. Navigate to Pages, then All pages and click on Payment — Blockonomics Payment Page to Edit it. After that, you’ll be able to easily edit your checkout page, as you want. 

For example, you could create a how to pay in Bitcoin step-by-step guide, or go through any details related to your e-commerce. It’s up to you!


To add a paragraph with instructions, for example, simply create a WordPress Paragraph Block above the blockonomics_payment shortcode and type in your information.





Adding your logo to the payment page

Besides adding instructions, you can include any WordPress blocks, patterns, or media you wish. On the same page, just click on “Block” and set it up. You could create cool graphics for this section or even add your brand’s logo. Either way, we’re pretty sure it will add up to your website's appeal and functionality.

To add an image, create a WordPress Logo Block above the blockonomics_payment shortcode and upload your photo. 



Checkout page

That's it! Once you have completed editing the page, your custom Blockonomics payment page will now be used during checkout.


FAQs

How do I add Additional CSS to my WordPress Site?

You can add Additional CSS styles in WordPress by following the steps mentioned below:

  • Open WordPress Site Editor by going to WordPress Admin > Appearance > Editor. Open "Styles" and click on Edit button next to Styles.
  • In the Styles Editing menu on right, click on "Additional CSS".
  • Now you can add any Additional CSS here to customer your Checkout Page and click on "Save" to apply those changes.


How to change appearance of specific component on Checkout Page?

By getting the "id" of the component you want to change appearance of, you can easily add additional CSS to do so. You can get "id" by right clicking on the component, selecting "Inspect" and copy the value of "id" field from that component as shown below.


How to make sure that entire address is visible in Checkout Page?

If don't want your customers to have to scroll to the right in Bitcoin Address input field to see entire address, add following Additional CSS in styles in your WordPress site editor:

html .bnomics-copy-container {
    width: 150%;
}


If this doesn't work, try adding following CSS to change text size in Bitcoin Address input field while keeping default width:

#bnomics-address-input {
    font-size: 9px;
}