WooCommerce Add to Cart Button Placement

Hi Jesse,
I don’t know if you can help with this one, but I’m having a similar problem with the Quick View ” Add To Cart button. The code that I used for the variable products was

.xoo-qv-modal .woocommerce-variation-add-to-cart {display: flex; align-items: center; flex-wrap: wrap;}

But that doesn’t work for the Simple Products, and I can’t find the right selector in the inspection area.

Anyway, if you can help, that would be fabulous.
Best,
Heather

Hi Joseph !
Perfect !!!!!! That’s took care of it.
Thank you so much, you guys are great !
Really appreciate your help.

I’ve been testing my site with all the new updates and I’m having a strange issue with Amazon Pay. I don’t know if this is a theme issue, or a plugin issue, but you are so great to work with that I’m starting here first.

On the checkout page, when the customer uses and logs in to Amazon Pay, three things happen.

1) The Shipping Address and Payment Method get huge.

2) The “Create an Account” doesn’t have the changes I made in it. You can see the difference in the Before Amazon Login file, and the After Login

3) It’s asking for another password login, and this is after you’ve already logged in.

4) The Amazon Logo shows up at the bottom of the page horribly extended.

These are the before and after images of these 4 issues.

https://momentofperception.com/wp-content/uploads/2021/05/After-Amazon-Sign-In-scaled.jpg
https://momentofperception.com/wp-content/uploads/2021/05/Before-Amazon-Login-scaled.jpg

Thanks ahead for any help.
Best,
Heather

Hi Jesse,
Sorry for responding to this here, but for some reason, I’m getting a 404 code on the link that goes with this. So anyway, this was what you sent me.

I was able to see everything you mentioned, with the exception of the Password field after I log in with Amazon. I only see the checkbox to create an account, so it doesn’t quite match your screenshot.

I did find some CSS rules you can use to tackle each of the other issues though:

#shipping_address_widget h3, #payment_method_widget h3 {
font-size: unset;
}
#shipping_address_widget h3 a, #payment_method_widget h3 a {
padding-left: 8px;
}
ul.payment_methods li label img {
width: unset;
}
input#createaccount {
position: relative;
margin-top: unset;
}

These were the results, and a few more questions.

The first two worked perfectly, yeah ! Thank you so much.

The third did not because it impacts the CC image on the regular checkout page also, and that was the reason for that stretch code. I just did a Display none to hide the Amazon Pay image.

The fourth code did not work, and I’ve been struggling with it for hours. For some reason that ” Create Account ” acts differently on the page when you’re not logged in to Amazon Pay, and when you are. I was able to separate the copy left to right from the checkbox on both, but I can’t seem to get the vertical alignment right on both. When I line the checkbox up with the create account copy on one, it’s off on the other. Is there any way to separate the checkbox on the one page from the checkbox on the other page, or is there a way to vertically lock the checkbox up with the copy so that it stays together ?

And one new question that I was hoping to get the Woocommerce Stripe techs to help with, but they threw it back on the theme. I’m using the Woocommerce Stripe plugin which includes Google Pay and Apple Pay. Google Pay is working other than shipping, which I’m working with their tech on, but Apple Pay is not, and I have no way to test it myself. You have to have a touch Apple device to check it, and I don’t. They’re saying ” It looks like some of the elements are being loaded, but some are not, and the JavaScript to show the button properly is not running properly.”
Is this something you can help me with ?

Thanks so much again.
Best,
Heather

One more thing, that 2nd password prompt is in Firefox. It doesn’t show up in Chrome. Weird, right ?

Hi Jesse,
Thank you so much for all your help, I can’t tell you how much I appreciate it.

The first one works perfectly across Chrome Firefox and Safari. Problem solved, yeah !

The second one works perfectly with Chrome and Safari, but still doesn’t work in Firefox. I’m not sure if you have another rabbit up your sleeve, but I’m hoping.

I’ve got an Email back in to the Stripe Support team to try and get more info on the Apple Pay issue. Thanks for looking into it.

I’ll check that setting for Amazon Pay that you mentioned.

Take Care,
Heather

You did it Jesse !!!!!!!!!!!!!! YEAH !!!!!!!!!!!!!!!!!!!!!
Thank you, thank you, thank you ! Great job ! You’ve made me sooooo happy, and grateful.
I’ll let you know on that Apple issue once I’ve heard back from the Stripe techs.
Have a fabulous weekend.

Hi Jesse,
I had one more question on the Theme update. I asked a tech to set up a Child Theme as you suggested, and they used a plugin to do it. Right now, the current theme is showing as the Child Theme, and I don’t see an update for the main theme. When they used the Child Theme as the working theme, did that alter something ?
Thanks,
Heather

Hi Jesse,
You are amazing ! Thank you so much ! I sent the info you came up with on the Apple Pay issue to the tech, so hopefully, they can do the Unix Link you mentioned.

The shipping for the notebook should be $ 5.75 for first class, and $ 8.75 for Priority, so it sounds like there’s a glitch there also. I’m lost on this as I don’t think I can get any help from the plugin developers, so I may be in trouble there.

Unfortunately, Test mode was not checked.

Thanks for letting me know about the update, I’ll get that taken care of.

Again, thank you so much for all your help, you’ve been a lifesaver.
Best,
Heather

Hi Jesse,
I just can’t stay away for too long. Need that great brain of yours again. This is an issue I was having before, and it’s still there. I have some CSS code that I don’t want to put in the customizer, because I’m unloading that on most of the WordPress pages. When I was adding it to the main theme, I tried to add it to the Style CSS, but it wouldn’t work there for some reason, so I ended up adding it to other areas of the css and it worked. Now that I’m using the Child Theme, I’m trying to add it to the Style CSS, and can’t get it to work there.

I added this code to the ” Color-Palette.css ” in the main theme:
div[id^=bwg_container1_] div[id^=bwg_container2_] span[class^=bwg_slideshow_image_spun2_]{ background-color: #130b19}

div[id^=bwg_container1_] div[id^=bwg_container2_] span[id^=spider_slideshow_left-ico_] span, div[id^=bwg_container1_] div[id^=bwg_container2_] span[id^=spider_slideshow_right-ico_] span { background-color: #ba59e0; border-radius: 20px }

#bwg_slideshow_play_pause-ico_0 > i, #bwg_slideshow_play_pause-ico_1 > i, #bwg_slideshow_play_pause-ico_2 > i { background-color: #ba59e0; padding-right: 15px; padding-left: 15px; padding-top: 15px; padding-bottom: 15px; border-radius: 30px }

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_0, #bwg_container1_1 #bwg_container2_1 .bwg_slideshow_dots_1,#bwg_container1_2 #bwg_container2_2 .bwg_slideshow_dots_2{ background: #92ccfb !important; }

#bwg_container1_0 #bwg_container2_0 .bwg_slideshow_dots_active_0, #bwg_container1_1 #bwg_container2_1 .bwg_slideshow_dots_active_1, #bwg_container1_2 #bwg_container2_2 .bwg_slideshow_dots_active_2 { border: 6px solid #ba59e0 !important; }

I added this code to the Button.css in the main theme:
.btn-3d, .palette-primary .button-primary, .palette-primary .woocommerce .button, .palette-primary .button-secondary, .palette-primary .woocommerce .alt.button {
background-image: linear-gradient(180deg, #130b19 0%, #094275 50%, #0f95d8 100%)

#wpforms-submit-3570 {background-image: linear-gradient(180deg, #130b19 0%, #094275 50%, #0f95d8 100%); color: #fff; border: none}

I added this code to the rtl.css-Global in the main theme:
.pswp,.ttt-pnwc-close { display: none; }

Can you let me know why this wouldn’t work in the Style css ?

Thanks,
Heather

Hi Jesse,
I need to ask that Apple Pay question better.
If you are using Google Pay from a product page, you get that window and no way to add shipping or tax. If you use Google Pay from the checkout page, it picks up the shipping and tax from the page itself, but you still get that window that shows shipping not engaged, so you can’t pick what shipping you want from that window.

Is that how the Apple Pay is working ?

I really wish Apple would make this testable without having a touchless Apple device.

Thanks again,
Heather

Hi Jesse,
Hope all is well with you.
I’m still working on the Google Pay/ Apple Pay issue, and have gotten tired of getting nowhere with the developers, so I tried a new plugin today which seems to work on both the laptop and desktop. Miracle !
Can I trouble you to please check Apple Pay to see if it works properly for you both on the product page and checkout page ? Please don’t go through the checkout process, I just want to make sure that it’s picking up shipping and tax in both areas. I’m using a test site for this

Jigsaw Puzzle – An Autumn Day in an Aspen Forest

Now, related to that, when I tried to deactivate the original Stripe plugin, I got a fatal error. When I contacted my host techs they found this Error Message:

Fatal error: Uncaught Error: Class “WC_Stripe_Payment_Request” not found in /home/moment72/staging.momentofperception.com/wp-content/themes/boldgrid-cobalt/functions.php:53 Stack trace: #0 /home/moment72/staging.momentofperception.com/wp-settings.php(525): include() #1 /home/moment72/staging.momentofperception.com/wp-config.php(84): require_once(‘/home/moment72/…’) #2 /home/moment72/staging.momentofperception.com/wp-load.php(37): require_once(‘/home/moment72/…’) #3 /home/moment72/staging.momentofperception.com/wp-admin/admin.php(34): require_once(‘/home/moment72/…’) #4 /home/moment72/staging.momentofperception.com/wp-admin/index.php(10): require_once(‘/home/moment72/…’) #5 {main} thrown in /home/moment72/staging.momentofperception.com/wp-content/themes/boldgrid-cobalt/functions.php on line 53
There has been a critical error on this website. Please check your site admin email inbox for instructions.

Can you help me sort that out ? I’m sure I’ll have the same problem with the live site.

Thanks again,
Heather

Hi Jesse,
Thanks so much for checking, and yeah ! Nice to have that finally working.

I don’t have a line 53 either in the child theme, but there were some codes in the original theme. Did the Child Theme pick up those entries from the original theme, and how would I change it at this point ?

Hi Jesse,
Happy Friday !
I’m finally seeing the end of the tunnel on this project, yeah ! One small thing I’m hoping you can help me with is setting up two columns in the description on one page.
https: //momentofperception. com /product/phone-case/
You’ll see the supported devices run down in a single column. I’m hoping I can have the Apple Devices on the left and the Samsung Devices on the right in the desktop version. I don’t think that would work for the mobile version. Is that possible ?

As far as the Stripe issue, the Woocommerce folks are still working on trying to find their glitch. I’m going to stay with the new plugin, but I would like to help them solve it. They asked me to ask you
“What device, iOS and browser version is your theme developer using to look at this issue? ”
This is for the Apple Pay problem you saw.

Finally, I’m nearly done adding products, so just as soon as that last one goes in, I’ll let you know so you can pick out something as a thank you for all your amazing help.

Best,
Heather

Yeah !!!!!!!!!!!!!!!!!!!!!!
Thank you so much, and that video was GREAT ! It’s perfect.
By the way, that is definitely not a bribe, I’m deeply and sincerely grateful for all your help. I don’t know how I could have gotten through this without your support, you’ve been a life saver.
Have a fabulous weekend.

Oh Jesse, I know, it definitely didn’t come across that way. I just want to make sure you know how much you have helped and that it’s really, really appreciated !