[zencrackerParticipant]

Hello! I’m trying to align side-by-side the woocommerce add-to-cart and paypal express checkout buttons on the product pages, but the paypal button is slightly higher for some reason.

Here’s the web.product page:
http://liquescencemedia.com/store/quizzes/sexy-sense-sensibility-funny-personality-quiz/

Can I change this in custom css? Could someone help me with this? It’s really unsightly. Many thanks!!

[zencrackerParticipant]

Any help at all is appreciated. 🙂

[Rue NelModerator]

Hello There,

Thanks for writing in! To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site #express_checkout_button_product_page {
    margin-top: 0;
    margin-right: 10px;
}

Hope this helps.

[zencrackerParticipant]

Hey thank you! Yes, this worked like a charm. If anyone else has an alignment issue with the paypal and woocommerce add to cart buttons on the product page, try this!

[zencrackerParticipant]

Oh wait! Sorry. But it only worked on one page (a book offer) and didn’t work on the other product pages. Here’s two screen captures:

What could be causing this? Is there some other css we need to implement?

[zencrackerParticipant]

Here’s the two different urls:

1 – not aligned:
http://liquescencemedia.com/store/great-movie-kisses/best-movie-kisses-street-car-named-desire-stella-kiss-womens-tee/

2 – aligned:
http://liquescencemedia.com/store/quizzes/sexy-sense-sensibility-funny-personality-quiz/

Thank you for all your help. I’m sure there’s a simple solution. 😉

[zencrackerParticipant]

Sorry to pester, but any help would be great. The first code only worked on one page and I can’t figure out why…

🙂

[Rue NelModerator]

Hello There,

Thanks for writing in! They are different products. The first one is a simple product and the other is a variable product. This is why the code did not work for the variable product. To resolve this issue, please update the given code and make use of this code instead:

.woocommerce.single-product .quantity {
    display: inline-block;
}

.woocommerce.single-product .single_variation_wrap,
.site #express_checkout_button_product_page {
    float: left;
    display: inline-block !important;
    clear: none;
    margin-top: 0;
    margin-left: 10px;
}

.woocommerce.single-product .product_meta{
    clear: both;
}

Please let us know if this works out for you.

[zencrackerParticipant]

Hello again. I apologize that this problem doesn’t appear to be completely resolved. You guys are great and I appreciate all the help. But it looks like the revised code solved the problem on a few of the product pages, but for SOME reason, it doesn’t work on the product attached. There’s also a price on the bottom of #2 and that’s not there on the other products, so it looks like it’s killing the alignment.

Here’s links to both:
1) – aligned t-shirt
http://liquescencemedia.com/store/great-movie-kisses/best-movie-kisses-street-car-named-desire-stella-kiss-womens-tee/

2) – not aligned t-shirt
http://liquescencemedia.com/store/axiomomatiqks/dont-let-stupid-people-rent-space-in-your-head/

For the life of me I can’t seem to figure this out! Please do help as it’s hurting our presentation (as you know). Many thanks!

[zencrackerParticipant]

Hi – I’m not sure if this makes any difference, but after checking it appears that the products with the mis-alignment are ones with a variable in price. For instance, most of the products have a single price for all sizes. The t-shirts with prices between 27-28, for instance, show the price next to the checkout button. And it’s only on these products. I’ve doubled checked them and they are the only ones. How can I fix this so that the price doesn’t show next to the button (I didn’t enable anything to have this appear) and have these products look like the others with only a quantity box?

Here’s links so you know what I mean:
http://liquescencemedia.com/store/axiomomatiqks/what-happens-when-time-travel-goes-wrong/
http://liquescencemedia.com/store/axiomomatiqks/dont-let-stupid-people-rent-space-in-your-head/
http://liquescencemedia.com/store/melismatiqks/music-scores-t-shirts-crumbs-agnus-dei/

etc…

Isn’t that peculiar?

[RadModerator]

Hi there,

It’s because the two button has the different container. And the price belongs to the sam container where add cart is (eg. similar table’s single cell). My Question is how did you add the PayPal button? Maybe we can move it within the container where the add cart is.

Thanks!

[zencrackerParticipant]

I added the PayPal button in the Woocommerce backend. Didn’t upload anything – it’s just the same plugin for PayPal Express.

[zencrackerParticipant]

To reiterate: didn’t do anything different to the code or css. It’s a simple express button. All the other products are fine except the ones with variable pricing.

[RadModerator]

Hi there,

I see, then it’s not possible to directly edit it. Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.paypal-express-checkout-button').insertAfter('.woocommerce-variation-add-to-cart button');

Thanks!

[zencrackerParticipant]

Hey there. That worked. Not optimal, but it solved the alignment problem. You guys rock! Thank you so very much!

[Author]

Posts