Bad Graphics

[Paul]

I have two problems with graphics at Woocommerce checkout.

1 – In the shipping section, my text is on top of my buttons.

2 – In the credit card payment section, I have a broken image link.

Click HERE for the screen cap.

I’ve got no coding skills, so hopefully the fix isn’t too complicated.

Thanks.

[George]

Hey Paul,

The checkout styles are dictated by a) your theme and b) WooCommerce itself, not by The Events Calendar at all. So there’s quite a limited amount of support we can provide in this domain, especially for customization requests within this domain…

With that being said, however, I took a quick look and can recommend some minor tweaks 🙂

First, to fix the buttons in the shipping section, try adding CSS like the following to the bottom of your theme’s style.css file:


#shipping_method input {
margin-right: 34px;
}


Here’s how that made things look for me → https://cloudup.com/clGCaeCbT7N

The issue of the missing credit-card logos is a bit trickier. The URL the image there is pointing to is this one: https://jazzwinnipeg.com/wp-content/plugins/beanstream-for-woocommerce/assets/images/credits.png

When I go to that URL, I get a “404 – Not Found” page, so the image file itself could genuinely be missing. This is not something we can fix – however it’s also possible that the file does exist but doesn’t have the permissions enabled that allow it to be publicly accessible. To fix this, you can contact your web host support and ask them to reset your site’s permissions – particularly the /wp-content/ directory – so that it is owned be the web server, with permissions at 755 recursively.

If that doesn’t help, the file is genuinely missing and you’d need to try re-uploading the plugin or something. Or, as an alternative to all of these steps, you could simply hide that missing image altogether by adding CSS like the following to the bottom of your theme’s style.css file:


li.payment_method_beanstream label img {
display: none !important;
}


Cheers,
George

[Paul]

Thanks George. These suggestions helped clean things up.

In terms of the broken image link, I used your code to eliminate it altogether. But I wouldn’t mind having a graphic there to instill some customer confidence in the system. I know you said it’s a Woocommerce issue, but I can’t seem to get support through them since, at their woothemes website, they say I’m not a paying customer and am therefore not eligible for support. Maybe I’m going to the wrong place for support.

With that in mind, I thought I’d share what my host reported back: “By taking a look at it, it appears that this is an issue that is caused by a coding error in WooCommerce’s plugin. This is something you’d need to talk to them about. Here’s what you’ll want to tell them: “By looking at the source code, I see . However, this is inconsistent with the image’s installation location: wp-content/plugins/beanstream-gateway-for-woocommerce/assets/images/credits.png.”

[George]

Thanks for the information here Paul – and for your patience with the issue on our end.

I’m sorry to hear about the situation you’re in, but it’s possible that there’s a “Blessing in disguise”, so to speak, with the information shared by your webhost – because even though you’re not a paying customer, if they are right and there’s an outright bug in the code itself causing your problem, then perhaps you can report the bug to WooCommerce on twitter/email/facebook something like that.

Bugs usually get attention from developers and it might lead to a fix down the line.

I hope that’s the case, and that in the meantime your website and project go smoothly despite this one bug 🙂

Cheers!
George

[Author]

Posts