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.
-
Log in to WooCommerce.
-
Go to WooCommerce > Settings.
-
Select the Mollie Settings tab.
-
Select Edit next to the payment method name.
-
Select the Display logo checkbox
-
Select the Enable custom logo checkbox.
The Upload custom logo field appears.
-
Click choose file.
A modal displaying your local file system appears.
-
Go to the folder containing the logo file and select it.
-
Click the upload button in the modal.
-
Save the changes.
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.
#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;
}
#payment .payment_methods li img {
float:left;
margin: 0 .5em 0 0;
}
.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;
}
This setting applies to the following payment methods:
-
iDEAL
-
KBC/CBC Payment Button
-
Gift cards
-
Log in to WooCommerce.
-
Go to WooCommerce > Settings.
-
Select the Mollie Settings tab.
-
Select Edit next to the payment method name.
-
Deselect Show [payment method] banks drop-down list.
-
(Optional) Enter the name of an issuer in the Issuers empty option field.
This text will replace the default
Select your banktext. -
Save the changes.