WooCommerce: Customise your checkout

Improve the user experience and maintain brand consistency in your WooCommerce checkout by customising payment method descriptions, logos, the bank issuer list, and payment method display.

Mollie for WooCommerce also offers localisation options for your checkout in specific markets.

Change payment method descriptions

  1. Log in to WooCommerce.

  2. Go to WooCommerce > Settings.

  3. Select the Mollie Settings tab.

  4. Select Edit next to the payment method name.

  5. Enter a description in the Description field.

  6. Save the changes.

Change payment method logos

  1. Log in to WooCommerce.

  2. Go to WooCommerce > Settings.

  3. Select the Mollie Settings tab.

  4. Select Edit next to the payment method name.

  5. Select the Display logo checkbox

  6. Select the Enable custom logo checkbox.

    The Upload custom logo field appears.

  7. Select choose file.

    A modal displaying your local file system appears.

  8. Go to the folder containing the logo file and select it.

  9. In the modal, select the upload button.

  10. Save the changes.

Style the payment method logo display

With the CSS snippets in this article, you can change the position of a payment method's logo relative to its name.

  • The snippets only work with WooCommerce shortcodes; they do not work with WooCommerce blocks.

  • The snippets provide the expected results with most if not all popular themes.

Default
Payment method icon to the far right of payment method name
Closer to name
Payment method icon close to the right of payment method name

#payment .payment_methods li img {

float:none;

margin-left:1em;

display:inline;

}

//this moves the credit card icon selector images

#payment .payment_methods li svg {

float:none !important;

margin-left:1em;

display:inline;

}

Left of radio button
Payment method icon to the left of radio button selector

#payment .payment_methods li img {

float:left;

margin: 0 .5em 0 0;

}

Between radio button and name
Payment method icon between radio button selector and payment method name

.mollie-gateway-icon {

width: 32px;

vertical-align: top;

float:left

}

#payment .payment_methods li img {

float:left;

margin: 0 .5em 0 0 ;

}

#payment .payment_methods>.wc_payment_method>label::before {

float:left;

}

Hide payment method logos

  1. Log in to WooCommerce.

  2. Go to WooCommerce > Settings.

  3. Select the Mollie Settings tab.

  4. Select Edit next to the payment method name.

  5. Deselect Display logo.

  6. Save the changes.

Hide the payment method issuer list

This setting applies to the following payment methods:

  • iDEAL

  • KBC payment button

  • Gift cards

  1. Log in to WooCommerce.

  2. Go to WooCommerce > Settings.

  3. Select the Mollie Settings tab.

  4. Select Edit next to the payment method name.

  5. Deselect Show [payment method] banks drop-down list.

  6. Optional: Enter the name of an issuer in the Issuers empty option field.

    This text will replace the default Select your bank text.

  7. Save the changes.