SVG Logo not working in header

Hi @fox-didl,

We’ve tested with an SVG image and it worked as expected.

We used the plugin Safe SVG by Daryll Doyle to enable SVG uploads. For more information about using SVG images on WordPress please check the following Kinsta article:
https://kinsta.com/blog/what-is-an-svg-file/

We also tested with the unsafe method of enabling SVG uploads which consists in just adding the mime type to the allowed list, and it too worked as expected.

Fluid Checkout uses the WordPress media library to let you upload a logo image to be used in the checkout page header.

If your website supports uploading SVG, WebP (or any other image format), it should also work to upload the logo image via Fluid Checkout settings.

We could not test with a WebP image because neither our local environment nor our demo site server supports WebP. However, as mentioned, if it works for the media library it should also work for the logo image.

I’m closing this topic for now. If you need further assistance, please reply with more information about your setup and the steps to reproduce the problem.

Best,
Diego

We don’t work with your SVG plugin because of missing updates since more then 2 years. This is a problem in professional view.

We are using this SVG plugin. It’s updated an more user are using it.
https://www.ads-software.com/plugins/svg-support/

Is there a possibility that you test this?

• This reply was modified 2 years, 11 months ago by fox-didl.

Hi @fox-didl,

If the image file is on the WordPress media library it will work with Fluid Checkout.

I tested also it with the plugin “SVG Support” and it works without any problem.

Please make sure the SVG file you are using works on other parts of WordPress, and that you are selecting a logo for the checkout page from the Fluid Checkout settings.

Here is an SVG file you can use to test it and the screenshots for the Fluid Checkout settings:

SVG File:
https://t2449427.p.clickup-attachments.com/t2449427/22f08a84-61ac-4800-9190-0b9ccb8010f8/astra.svg

Media library details:
https://t2449427.p.clickup-attachments.com/t2449427/2f105b99-8ddc-4a06-b781-2616a40c4bbc/Screen%20Shot%202021-12-24%20at%2005.56.50.png

Fluid Checkout settings:
https://t2449427.p.clickup-attachments.com/t2449427/705ef719-ed4b-4e22-a62c-aaf22f9d6c96/Screen%20Shot%202021-12-24%20at%2005.56.35.png

Fluid Checkout, checkout header:
https://t2449427.p.clickup-attachments.com/t2449427/9390bc85-14ea-4177-8ffd-b07fc3228420/Screen%20Shot%202021-12-24%20at%2006.00.14.png

Please provide more information about your setup, such as:
– screenshots for the settings page
– details of the SVG file you are using
– if you are using the Fluid Checkout header or the theme’s header at the checkout page

Also, please check for incompatibility with other plugins by following the instructions from the WooCommerce article:
https://woocommerce.com/document/how-to-test-for-conflicts/

Best,
Diego

Hi. I’m using website SVG images on the whole site. Since 2 years and without any problems. Using flatsome themme. Not other plugin with images has problems with our SVG files.

Enclosed the settings:
https://ibb.co/d0p7CtK

Hi @fox-didl,

We’ve tested also it with the Flatsome theme and it works on our end.

Without being able to reproduce the problem on our end, it is almost impossible to fix it.

1. What is exactly the problem you are facing?
– any error message?
– does it break the checkout page, showing only parts of it or just a white screen?
– show the image skewed or distorted?
– does not show anything? Does it output any HTML in the place of the image?

2. And what are the steps to reproduce it?

3. If possible, tell send the URL of your checkout page so we can take a look if we find any clues.

If you prefer, contact our support channel directly to share the necessary information:
https://support.fluidcheckout.com/portal/en/newticket

Best,
Diego

• This reply was modified 2 years, 11 months ago by Diego Versiani. Reason: Added link to our support channel

Hi,

no logo on checkout with SVG. PNG will displayed without any problem. Just a white header. Nothing HTML instead of the logo image.

I will send you a login so you can check amazon pay issue aswell.

Greetings
Dietmar

Hi @fox-didl,

Sounds great! Let’s get these things fixed ??

Have a wonderful Christmas ??

Best,
Diego

You too. Merry and happy christmas!

Just thought I would chime in…

I cam to the support threads to ask this question, but I see somebody else reported the same thing.

SVGs are being shown with a 0x0 size in the header thus cannot be seen. I am not using a plugin to enable SVG uploads as I added the support for SVG uploads from our own custom code (plugin).

PNGs do (as mentioned above) do work.

Cheers.

Digging into this I found that it might be CSS.

This style..

.fc-checkout-header .fc-checkout__branding img {
    max-height: 46px;
    max-width: 130px;
    width: auto;
    -o-object-fit: contain;
    object-fit: contain
}

When I change the width to 100% (instead of auto) the SVG shows fine.

• This reply was modified 2 years, 10 months ago by streamworksaudio.

Also just to chime in (I’m the developer of SVG Support), that is usually the case where there is no specified size and it displays at 0px. Setting a width using CSS fixes it, usually 100% works because it’s typically inside a container.

This happens with some theme logos too.

Hi @streamworksaudio and @benbodhi,

Thanks for your input.

The problem has already been fixed and a beta version was sent to the original user asking the question.

The suggested CSS changes were exactly what fixed the problem.

We avoided releasing new updates during the month of December because of the holidays season.

Usually, we leave a link to download a beta version with the fix before a new version is officially released. However, this time we sent it directly to the original users and forgot to leave it here. Here it goes for the record:
https://t2449427.p.clickup-attachments.com/t2449427/9fd2d059-f103-443c-a746-d098d56ccecd/fluid-checkout-1.4.2-beta-17.zip

The new official version with this fix will be released later today or in the last case tomorrow.

Best,
Diego

Thanks @diegoversiani

I am doing some of my own custom styles to the checkout form (mainly just color to match our branding and making the form full width) so I added it to my own CSS for now. Once the new release it out I will remove that fix from my styles.

Cheers

Nice work @diegoversiani
??

Hi @benbodhi & @streamworksaudio,

The version 1.4.2 with this fix has been released.

Best,
Diego