Okay
  Public Ticket #2160604
How to change payment icons in UKU
Closed

Comments

  • Georg started the conversation

    Hello there,

    I am using the UKU Theme with WooCommerce.
    As default option, there are several payment provider icons with links (in footer menu 4).

    I couldnt find any possibilites to change or replace the icons with different payment provider icons.

    Unfortunately I also found no option to upload my own graphic with payment provider icons. 

    Any help for a solution would be much appreciated!

  •  956
    Marc replied

    Hi Georg,

    the images will be set automatically when a custom menu with links to the providers is placed in the fourth footer menu position.

    Unfortunately it's not possible to set custom images without additional CSS code.

    You can inspect, adjust and use the following sample code to add custom images by uploading them to your media library:

    .menu li a[href*="postfinance.com"]::before,
    .menu li a[href*="twint.com"]::before {
        content: '';
        display: inline-block;
        background-image: url(https://url.to/your-cusom/payment-logo.png);
        background-size: 100px;
        background-repeat: no-repeat;
        background-position: center;
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        height: 40px;
        text-indent: 0;
        opacity: 0.5;
    }
    .menu li a[href*="twint.com"]::before {
        background-image: url(https://url.to/your-cusom/payment-logo.png);
    }
    .menu li a[href*="postfinance.com"],
    .menu li a[href*="twint.com"] {
        position: relative;
        display: block;
        overflow: hidden;
        width: 100px;
        height: 40px;
        text-indent: -9999px;
        float: left;
        margin: 0 8px 8px 0;
        box-shadow: inset 0 0 0 transparent !important;
    }
    .menu li a[href*="postfinance.com"]:hover::before,
    .menu li a[href*="twint.com"]:hover::before {
        opacity: 1;
    }

    As you can see the sample code adds images for the postfinance.com and twint.com links using the direct image URLs.

    Best,
    Marc