hello elementor product page: button layout issue

remakewarsaw
(@remakewarsaw)

1 year, 6 months ago
Hello Team!
Fantastic plugin you made there!
I’ve been using it on my elementor site with hello elementor theme.
The ‘Apple Pay” button shows well on the cart and checkout page.
However on the product page it looks squeezed next to my ‘add to cart’ button.
Is there a way to fix this so the apple pay button (and google pay that will come soon) shows right under the ‘add to cart’ button? and possibly have the same height as my add to cart button as well?
I’ve tried to tweak through CSS but couldn’t figure it out.

here is screen capture: https://snipboard.io/XSNZ2e.jpg it looks like its compressing my add to cart button to find it’s own place next to it.

Looking forward to your much appreciated help.
Best wishes.
Ludo
- This topic was modified 1 year, 6 months ago by remakewarsaw. Reason: added screencapture
The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Clayton R
(@mrclayton)

1 year, 6 months ago

Hi @remakewarsaw

Glad to hear you like the plugin. What you’re observing with Apple Pay on your product page is due to how elementor uses flex box styling on the parent container. You just need to make sure the parent container allows for flex-wrap: wrap';

I tried to review your product page but couldn’t get Apple Pay to render on your staging site. Make sure you have registered your domain via the Apple Pay Settings page for staging.

Kind Regards

Thread Starter remakewarsaw
(@remakewarsaw)

1 year, 6 months ago

Hello Team!
Thanks for your super fast answer.
I’ve fixed the apple pay and it now shows up on the staging site.
I’ve added GPay as well and it’s showing up below the apple pay – this time my ‘add to cart’ button is even bigger in height.

I tried setting the container and parent container > layout > wrap > wrap > start. within the editor but nothing changed for me.

Could you please take a look now that the 2 payment options are enabled?
Happy share access if need.

Best wishes.
Ludo
Plugin Author Clayton R
(@mrclayton)

1 year, 6 months ago
This CSS will force the payment buttons onto their own line:
```
.tp-woo-add-to-cart.variable .variations_form.swatches-support .single_variation_wrap .woocommerce-variation-add-to-cart {
    flex-wrap: wrap;
}

button.single_add_to_cart_button{
    flex-basis: 75%;
}
```
Thread Starter remakewarsaw
(@remakewarsaw)

1 year, 6 months ago

Oh Yeah! that looks much better already! Thanks loads!
I’ve applied the CSS and now see the buttons under each other!
Any chances we could have them then same height as the ‘add to cart’ button above?
and center the GPay logo somehow…
I totally understand if it’s out of scope and I’m happy already with how it looks.

Cheers!
Ludo
Plugin Author Clayton R
(@mrclayton)

1 year, 6 months ago
Hi @remakewarsaw

CSS to center GPay and increase height:
```
button.gpay-card-info-container{
    padding: 0;
    height: 52px;
}
```
Kind Regards

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘hello elementor product page: button layout issue’ is closed to new replies.

Tags