Unattracive UI

Yes, it’s not supposed to look like that obviously. The CSS provided obviously isn’t quite compatible with your theme.

It is possible to modify the CSS or the entire HTML of the button. If you want to, I can try to help with the CSS first, just in case the changes required can be generally useful. We’ll need access to the front-end (only) of your site; you can contact us on [email protected].

The filters provided are for this banner

'continue_with_vipps_checkout_banner'
'continue_with_vipps_login_banner'
'continue_with_vipps_register_banner'

(depending on where this is shown.) It will take the entire HTML and needs to return the same. Based on your screenshot I think you will need to override 'continue_with_vipps_login_banner' with something like this:

add_filter('continue_with_vipps_login_banner', function ($message) {
   $logo = plugins_url() . '/login-with-vipps/img/vipps_logo_negativ_rgb_transparent.png';
   $text = "<a href='javascript:login_with_vipps(\"woocommerce\");'>Log-in with %s (within Norway)</a>";
   $message = sprintf($text, "<img class='inline vipps-logo negative' border=0 src='$logo' alt='Vipps'/>");
   return $message;
});

For the CSS, the classes involved are div.woocommerce-info.vipps-info, but to fix that we need to see what other rules are active. You may try to just add some padding with !important.

well – I didn’t get the button to show up correctly, but i did get padding around the text to take effect. That makes it look better at least

Good. The button code I posted is tested by the way, so it should take effect if added to your child-theme or similar.

If you need more help with customizing the buttons we may need a bit more access; if so you can send an email to [email protected] and we can se what we can do.

I’m so happy others than me had this issue.
Mine looks the same.
https://ibb.co/8K4M5Tm

But I’m a bit stupid, and cant seem to understand what CSS file you are reffering to.

Are you able to help me to?

Thanks in advance

– Arne

What CSS file to modify will depend on your theme or child-theme. Some themes will allow you to add extra CSS as a theme option, and if this is lacking, there are plugins you can use (like https://www.ads-software.com/plugins/simple-custom-css/, and others).

We should be able to help further (after Easter, at least) but then we’ll have to see the actual page. If you want to keep this private, you can contact [email protected] with the information.

We’ll of course try to make our CSS compatible with as many themes as possible, but there are a lot of them out there.

Thanks for the reply.
I’m currently using OceanWP theme.
The page isn’t a secret, it can be found at https://profiltoy.no

Looking forward to this Easter is over, and forward to hear from you again. ??

Thanks in advance

– Arne

Sorry about the delay; here is some CSS that should help. Either add it with your themes “Custom CSS” feature, or if your theme does not provide this, you can use a “Custom CSS” plugin as noted above.

Since you are (prudently!) hiding your wp-login link, I can’t help with any issues with the login button there, so this is for the WooCommerce login screen only and the various buttons and banners in the checkout process.

Because some of your CSS is added inline on the page, these may need some extra code to get applied properly, but it should be a good start:

/* To fix the "Press here" links, this should work. This will be included 
    in the plugins' default CSS in the next version, but in the meantime 
    add this too: */
.woocommerce-info.vipps-info a {
color: #fff !important; 
background-color: transparent !important;
}
.woocommerce-info.vipps-info a:hover {
    color:#fff !important;
    font-weight: bolder;
    background-color: transparent !important;
}

/* The login banner uses the standard style of the woocommerce notices in your
   theme, but if you would like slightly larger text on this banner, try this: */
.woocommerce-account .woocommerce-info.vipps-info {
    font-size: 105%;
}

/* To ensure the login banner doesn't grow too wide on larger screens, 
 you can try this. If you change font sizes, you may need to change 
 the numbers here: */

@media screen and (min-width: 800px) {
    .woocommerce-account .woocommerce-info.vipps-info {
    width: 700px;
    position: relative;
    margin-left: -350px;
    left: 50%;
 }
}

/* Finally, this fixes the padding and margin of the "continue with Vipps" button in the shopping cart: */

a.button.vipps-orange.vipps-button.continue-with-vipps {
    padding-top:0;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}