Payment Icons - Home Page

Site URL: https://www.antipodeanco.com/

Hi,

I was looking to add payment icons to the footer of my homepage so my customer's can see which type of payments are be accepted on my website e.g. Visa, Mastercard ( I am currently registered with Stripe).

Can anybody help?

Thanks!

Please see the following.

Let us know how it goes.

Hi, I have added this to my footer on my site https://andymallinsphotography.com and it looks great, the only issue is that it doesn't center like all the other blocks do when viewing on mobile, I have the following in my CSS code which centers everything else without issue. Any guidance on where I might be going wrong would be greatly appreciated. 

@media screen and (max-width:767px) {
footer#footer-sections * {
    text-align: center !important;
}

5 hours ago, andymallinsphotography said:

the only issue is that it doesn't center like all the other blocks do when viewing on mobile,

Change the horizontal alignment for the section to center.

Add the following to Design > Custom CSS.

#twc-payment-processors {

  flex-wrap : nowrap;
  justify-content : center;
  
  }

Let us know how it goes.

8 hours ago, creedon said:

Change the horizontal alignment for the section to center.

Add the following to Design > Custom CSS.

#twc-payment-processors {

  flex-wrap : nowrap;
  justify-content : center;
  
  }

Let us know how it goes.

That works an absolute treat, thanks so much! Are you planning on adding another ICONs such as PayPal?

12 hours ago, andymallinsphotography said:

Are you planning on adding another ICONs such as PayPal?

When I created the code I went looking for official PayPal SVG files but sadly they appear to be stuck in the early 2000's with their official media offerings ( PNGs ). I will only use official SVGs provided by their companies.

1 minute ago, creedon said:

When I created the code I went looking for official PayPal SVG files but sadly they appear to be stuck in the early 2000's with their official media offerings ( PNGs ). I will only use official SVGs provided by their companies.

Typical PayPal! Appreciate you coming back to me, have one last question promise! Here in the UK after pay is called Clearpay, do you have any plans to add this at any point? Appreciate your help so far its been a great help.

18 minutes ago, andymallinsphotography said:

Clearpay, do you have any plans to add this at any point? Appreciate your help so far its been a great help.

I'll see if I can find official Clearpay SVGs!

@andymallinsphotography

Please revisit the thread mentioned in my December 5, 2021 post earlier in this thread. I think you'll be pleased! 🙂

I was able to add Clearpay. I think the icons were available to me when I first created the code but I didn't have an international focus at the time.

I was able to find a kind of official PayPal icon. Not what I'm used to but it is from PP. All the others provided a media page of some kind with some guidance on how to use their icons. The single PP icon I found was buried in a PP app developers page. Not ideal but hey, I guess my code could be considered an app of kinds! 🙂

Let us know how it goes.

8 hours ago, creedon said:

@andymallinsphotography

Please revisit the thread mentioned in my December 5, 2021 post earlier in this thread. I think you'll be pleased! 🙂

I was able to add Clearpay. I think the icons were available to me when I first created the code but I didn't have an international focus at the time.

I was able to find a kind of official PayPal icon. Not what I'm used to but it is from PP. All the others provided a media page of some kind with some guidance on how to use their icons. The single PP icon I found was buried in a PP app developers page. Not ideal but hey, I guess my code could be considered an app of kinds! 🙂

Let us know how it goes.

Hi, many thanks for adding these! For some reason the ICONs for Clearpay are not obeying "none" so they all appear for both the badge and lockup although the ordering works, for now I've manually removed all bar the mint badge so if displaying fine 🙂

6 hours ago, andymallinsphotography said:

For some reason the ICONs for Clearpay are not obeying "none" so they all appear for both the badge and lockup

Sounds like a bug! Thank you for the report.

On 1/29/2022 at 1:46 AM, creedon said:

Change the horizontal alignment for the section to center.

Add the following to Design > Custom CSS.

#twc-payment-processors {

  flex-wrap : nowrap;
  justify-content : center;
  
  }

Let us know how it goes.

Hi @creedon I am trying to do the same with a logo in the footer of my site...Not sure why it's being a bit of a pain.  

#block-yui_3_17_2_1_1647446956387_11985 {
  flex-wrap : nowrap !important;
  justify-content : center!important;
  }

Is it because it's in the footer? I tried centering with spacer blocks but I've coded them to not be seen on mobile because it works better for rest of site. 

/* remove spacer block mobile */
@media screen and (max-width:767px) {
	.spacer-block-id {
	display: none;
}
}

😬

6 hours ago, failbetter said:

Hi @creedon I am trying to do the same with a logo in the footer of my site...Not sure why it's being a bit of a pain.  

#block-yui_3_17_2_1_1647446956387_11985 {
  flex-wrap : nowrap !important;
  justify-content : center!important;
  }

Is it because it's in the footer? I tried centering with spacer blocks but I've coded them to not be seen on mobile because it works better for rest of site. 

/* remove spacer block mobile */
@media screen and (max-width:767px) {
	.spacer-block-id {
	display: none;
}
}

😬

What is your site url?

its www.colettesmith.com

@failbetter

Add the following to Design > Custom CSS.

[data-section-id="61f11b89e3bacf64deef4b4d"] .sqs-layout > .sqs-row > .sqs-col-12 .sqs-row .sqs-col-12 > .sqs-block-image {

  margin-left : auto;
  margin-right : auto;
  
  }

This is for v7.1 and specific to the poster's need.

This is a bit of a tortured selector and is fragile in that it will break if any of the elements of that section are edited.

Another way to go might be to use spacers but then turn them on/off with media queries as needed for that specific situation.

Let us know how it goes.

Thanks @creedon

I have put spacer blocks in which works fine for desktop, just still cant get it to be centered in mobile. Even if I don't hide space blocks it still pushes itself to the left. 

35 minutes ago, failbetter said:

I have put spacer blocks in which works fine for desktop, just still cant get it to be centered in mobile. Even if I don't hide space blocks it still pushes itself to the left.

Keep the spacers.

Remove or comment out my previous code.

Remove or comment out the following ruleset.

#block-yui_3_17_2_1_1647446956387_11985 {
  flex-wrap: nowrap !important;
  justify-content: center !important
}

Change the following ruleset, make a copy somewhere, from...

#block-yui_3_17_2_1_1647446956387_11985 {

  max-width : 150px;
  text-align : center;
  
  }

...to...

#block-yui_3_17_2_1_1647446956387_11985 {

  max-width : 150px;
  margin-left : auto;
  margin-right : auto;  
  
  }

Let us know how it goes.

@creedon

That is what I was trying to figure out! worked a treat thank you!!!

Hi there,

I'm trying to add Stripe-accepted payment methods so Google Merchant Centre doesnt block me! They've said I need to add to footer accepted payment methods.

I have tried to use this site and the code it gives me doesn't work! https://www.merchantequip.com/information-center/credit-card-logos/

Here's my site: https://lateafternoon.co.uk/

I have no coding ability but can copy and paste into Advanced > CSS etc.

All help greatly appreciated! Thanks

2 hours ago, LALtd said:

I have tried to use this site and the code it gives me doesn't work

The code that it provides is HTML. You should add it to a Code Block.