Make elements centered and full width

Hi @zokkoz

Your theme controls the styling of the Add to Cart section and whether it is full width or not. You would need to provide a link to your site in order for us to give you the specific CSS.

Kind Regards,

• This reply was modified 2 years, 1 month ago by Payment Plugins.
• This reply was modified 2 years, 1 month ago by Payment Plugins.

Hi!

Thanks for your reply. Please find here the URL to a product page so you can help me make the “add to cart” section (including the Google/Apple Pay button) full-width: https://url.dev/m/Ni4ZAe6/.

BTW, If you’re ok with that I would be grateful if you could help me group all the payment option buttons together and force the “wishlist” and “comparison” button to go below the grouped payment options.

Thanks in advance,

• This reply was modified 2 years, 1 month ago by zokkoz.

Hi @zokkoz

I see you’re using PayPal. I’d recommend you try our PayPal plugin as it will allow you to group the Stripe and PayPal payment buttons together. That’s a much better UX and should give you what you want.

Regarding your styling request, it’s a good idea to learn about how CSS works because then you will be able to make any styling changes you need on your site.

Here is how to make your Add to cart button full width:

.woocommerce div.product .summary form.cart{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;  
}
.woocommerce div.product .summary form.cart .button{
    max-width: 100% !important;
    flex: 1;
}
.wc-stripe-product-checkout-container ul.wc_stripe_product_payment_methods li[class*=payment_method_stripe_]{
    max-width: 100% !important;
}

Kind Regards,