Customizing/Branding checkout page appreance : Blockonomics

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 you can remove the powered by Blockonomics text? How to add text or HTML to the checkout page like instructions on how to buy bitcoin? Would you like to change the styling of the checkout or completely change the layout of the template?

This can be done in many ways but today we will show you how to do it the right way. We will show you how to customize the different aspects of the checkout page with some examples.

How to edit any text

Changing the styling

Customizing the checkout template

Editing any text

Editing text in your Blockonomics Plugin can be achieved using the Loco Translate plugin.

Follow the instructions here to change any text.

Changing the styling

CSS can be used to edit the colors and styling of elements in the checkout page. This can be achieved by placing your custom CSS under the WordPress Additional CSS:

Log in to your WordPress dashboard: Log in to your WordPress website using your username and password.
Navigate to Appearance > Customize: From the dashboard, navigate to the "Appearance" menu and select "Customize."
Select Additional CSS: In the Customizer menu, select "Additional CSS."
Add your custom CSS code: In the Additional CSS section, you can add your custom CSS code in the text area provided.
Save your changes: Once you have added your CSS code, click on the "Publish" button to save your changes.

Text color and background color

#blockonomics_checkout table th {
  color:white; /* Set text color */
  background: #292929; /* Set background color */
  border-radius: 10px; /* Set rounded borders */
}

Always show the QR code

.bnomics-qr-code {
    display: block !important; /* Always show the QR code */
}
#bnomics-show-qr {
    display: none !important; /* Hide the 'show QR code' button */
}

Decrease the bitcoin address font size, to show the full address

#bnomics-address-input {
    font-size:0.8em; /* Decrease the font size to 80% of the original */
}

Customizing the checkout template

We offer a simple way to fully edit the display of the Blockonomics checkout page HTML.

1. Download the latest checkout template file: Open the blockonomics_checkout.php link. Right-click on the page, then click Save-as.

2. Edit the template: Change any of the template HTML as you desire, or use one of the already edited templates provided below.

3. Upload the template file to the root folder of your theme: This can be done using FTP or the WordPress file manager. Here are the steps to upload the file using both methods:

Using FTP:

Connect to your server via FTP: Open an FTP client such as FileZilla and connect to your server using your FTP login credentials.
Navigate to your active theme root folder: Navigate to the root folder of your active theme. This can typically be found at wp-content/themes/your-theme-name/.
Upload the custom template file: Locate the blockonomics_checkout.php template file on your computer and drag it into the root folder of your active theme on the FTP client. Wait for the file to finish uploading.

For this demonstration, the default Twenty Twenty wordpress theme was used.

The root directory for this theme is wp-content/themes/twentytwenty

Using WordPress file manager:

Log in to your WordPress dashboard: Log in to your WordPress dashboard using your username and password.
Navigate to Appearance > Theme Editor: From the dashboard, navigate to the "Appearance" menu and select "Theme Editor."
Select your active theme: From the Theme Editor, select your active theme from the dropdown menu in the top right corner.
Upload the custom template file: In the Theme Editor, click on "New File" on the right side of the screen. Enter the name 'blockonomics_checkout.php' for the file and add its contents to the text area. Click on "Create File" to create the file.

That's it! Once you have completed the upload to your theme root, your custom Blockonomics checkout template file will now be used during checkout.