Docs

[hnr2802]

Hi there,
i used below css code to display the payment method logo images

.payment_box.payment_method_paypal img {
display: none;
}
.woocommerce-account form .payment_methods label img, .woocommerce-checkout form .payment_methods label img {
display: block;
}

can i reduce their image size?
furthermore, is it possible to add a title “Payment Method” for the Payment Method section.

[Rupok]

Hi there,

Thanks for writing in! We can help you with this but need your URL. Kindly provide us the exact URL where we can see them.

Cheers!

[hnr2802]

it is the checkout page for my website

[hnr2802]

This reply has been marked as private.

[Thai]

Hi There,

Your website is under construction mode.

Please provide us with your admin account so we can take a closer look.

Thanks.

[hnr2802]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

.woocommerce-account form .payment_methods label img, .woocommerce-checkout form .payment_methods label img {
    display: block;
    width: 19%;
}

Hope it helps.

[hnr2802]

i have tried updateing the code. but nothing change. please advice.
just to be clear, my request are:

1) reduce the payment method logo image size (e.g. Paypal & Senangpay)
2) add a title “Payment Method” for the Payment Method section.

[Rad]

Hi there,

I just tried that CSS and it works, but if you’ll add that on customizer’s custom CSS then it will not work due to this CSS

@media (max-width:760px){
.x-brand img {
  width: 220px;
}

It should be properly closed if you plan to add new CSS after.

@media (max-width:760px){
.x-brand img {
  width: 220px;
}
}

About the title, please add this as well

#payment:before {
    content: "Payment Methods";
    display: block;
    margin-top: 60px;
    font-size: 164%;
    font-family: "Lato",sans-serif;
    font-style: normal;
    font-weight: 300;
    margin-bottom: 10px;
}

Hope this helps.

[hnr2802]

Thanks for the advice.

How about reducing the Payment Method image as per my previous query?
1) reduce the payment method logo image size (e.g. Paypal & Senangpay)

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.wc_payment_method payment_method_senangPay img {
     width:200px;
}

.wc_payment_method payment_method_paypal img {
     width:200px;
}

Change 200px to achieve your desired width.

Thanks

[hnr2802]

Hi paul,
i tried using the code but the image does not reduced their size. please advice

[Christopher]

Hi there,

Please remove extra curly bracket from following code :

/* Button Space*/
body.woocommerce-checkout .wc-terms-and-conditions {
    margin-bottom: 20px !important;
}
}

and add the code I provided in previous replay https://community.theme.co/forums/topic/payment-method-title-and-image-size/#post-1381021

Hope it helps.

[hnr2802]

Awesome. But is it possible that the image reduce only in desktop browser not mobile?

[Paul R]

Yes, please replace the code with this.

@media (min-width: 979px) {
.wc_payment_method payment_method_senangPay img {
     width:200px;
}

.wc_payment_method payment_method_paypal img {
     width:200px;
}
}

Hope that helps.

[Author]

Posts