Simplify Commerce Credit Card Images Huge!

Usually they are scaled to 32px height in the CSS. Is your theme perhaps missing some rules?

Thanks for the reply. I’m not sure what you mean about missing some rules. In status Woocommerce tells me my theme is supported and there are no overrides. I see the width reference in the code (see below), but that’s definitely not what is displaying. I checked in multiple browsers as well.

/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg" alt="Visa" width="32" />

Is there a file I can hack to remove these large images or perhaps reference the cards.png image that is in the simplify commerce gateway plugin under the assets folder?

https://dl.dropboxusercontent.com/s/yofmpoof2e21ffh/2016-06-22%20at%2011.16.png?dl=0

Definitely different then what I see:

`#add_payment_method #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img {
vertical-align: middle;
margin: -2px 0 0 .5em;
padding: 0;
position: relative;
box-shadow: none;
}

I downloaded a fresh copy of Woocommerce to look at the woocommerce.css file and I see no reference to the max-height. I’m assuming the max height is controlling the size. Should I be looking elsewhere?

Thanks for your help Mike!

Nvm, that was storefront. Twenty twelve has no size rules, the HTML 32 size is enough. Maybe you have a width/height auto rule?

There’s nothing in woocommerce.css to control the size of the credit card images and the individual .svg files for each credit card logo apparently are being used (width=”750″ height=”471″). This is why I think the images are so large and causing my customer to have to scroll alot to enter their credit card info.

My temporary fix was to add a max-height of 40 to the woocommerce css.

#payment ul.payment_methods li img{vertical-align:middle;margin:-2px 0 0 .5em;max-height:40px;padding:0;position:relative;box-shadow:none}

I’m sure modifying the core css is not desired, but provided a quick fix to prevent customers from having to scroll 2,000+ pixels to enter their credit card info. Besides that, it just looked gaudy and unprofessional. Unfortunately my change also resized the paypal image size, but beats what was displaying.

I’m thinking this is not a problem with my theme since the credit card image sizes are controlled within woocommerce.css and the .svg files (is a default size of 750×451 per image really needed). Can you please look into this as I would really like the credit card images to be somewhat consistent and avoid having to update the css with each version change.

Thanks so much for your help Mike and for such a great ecommerce platform!

Did you have any height auto rules in your CSS that would change the HTML height?

Nothing that I saw nor any past problems problems with the credit card image sizes when Simplify was part of core WC.

If you use the browser inspector like in my above screenshot you can check this.

I have the same problem. Don’t know what to do.

Resolved!

You need file
woocommerce-layout.css

your-site.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

find (ctrl+f)
woocommerce-page img

next to that you will see:
height: auto
max-width: 100%

I just changed 100% to 10% and it works perfectly for me!

Update:

pictures of selling goods become smaller as well))))

So, I’m looking for different way.

Use the method I posted above. It has worked on multiple sites without impacting product images. The only thing is that every time WC gets updated, the CSS will have to be fixed. Hopefully WC team will revert back to the way images are displayed or allow dimensions to be added in back end.

Oh! I didn’t notice it. Thank you it works!!!