Return to previous page

Facebook login on checkout page takes full width.

This topic has 7 replies, 2 voices, and was last updated 1 years, 8 months ago ago by Awais Ahmed

Diollo Store

Participant

August 7, 2022 at 19:10

hello support please i want to edit the fields where if the customer wants to login during checkout, the fields right now are too long and i want them to be more less in width
all the fields including the login with facebook button
see screen shot:

https://prnt.sc/oh-eYcGbtGtS

#331270 Copied Theme version: 8.1.6

6 Answers

Awais Ahmed

Participant

August 8, 2022 at 05:31

Hello, @Diollo Store,

I have just checked your site now and there is no such Facebook Login on your site on the Checkout page, here is the screenshot: https://postimg.cc/t1Lxkqwt, and the Login Form on Checkout is working fine, It has the same width as the other page content has.

So if you want me to change the current Form width then let me know I’ll provide you the Custom CSS fix for it.

OR

If you have the Facebook Login on the Checkout page then please share the URL of that page, so that I’ll check it on that page for you.

Regards 8Themes Team.

#331276 Copied

Diollo Store

Participant

August 8, 2022 at 13:42

Hello, first of all the screenshot you provided don’t belong to my website
my website is: diollo.store

also yes i need to change the eidth of the field as mentioned in my question

الحقول الحالية طويلة جدا جدا و تحتاج الى انقاص في العرض لكي تتماشى مع النسق العام

تحياتي

regards

#331299 Copied

Diollo Store

Participant

August 8, 2022 at 13:45

also how can i add payments icon like the ss you uploaded ?

#331300 Copied
Awais Ahmed

Participant

August 9, 2022 at 05:28
Hello, @Diollo Store,

Well, Sorry for the inconvenience but that site was in your old topics, so I thought it was your site. sorry for that.

1. For making the width smaller, Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back to your site after removing the browser cache.
```
.woocommerce-checkout .before-checkout-form input {
    width: 50% !important;
    display: block !important;
}
.woocommerce-checkout .et-facebook-login-wrapper.text-center {
    width: 50% !important;
}
```
Screenshot: https://postimg.cc/MMvnWZ4F

2. Those icons are from the plugins/extensions the customer used for the payment purposes on the site, those are not from our theme.

Regards 8Themes Team.
#331336 Copied
Diollo Store

Participant

August 10, 2022 at 16:30

yes the code worked, is there a way to put the login with socials next the actual login button:
https://postimg.cc/jLfmZSfB

#331479 Copied

Awais Ahmed

Participant

August 11, 2022 at 08:11

Hello, @Diollo Store,

Unfortunately, this is not possible as both the buttons are in the different div’s and in between there is another div with the content and separate line, so if we set it with the Custom CSS then we have to remove that in-between separator and content. This basically requires extra Customization.

Regards 8Themes Team.

#331521 Copied
Tagged: checkout page, facebook login, full width, woocommerce, wordpress themes
Viewing 7 results - 1 through 7 (of 7 total)