checkout and cart page width

joannazaniewicz · July 2021

Hi,

I'm using WooCommerce blocks for my cart and checkout pages as they are more user-friendly than my default Betheme cart and checkout. However, when I use Theme template in the Page settings both cart and checkout go full screen on desktop (they look ok on mobile). Is there a way I can add boxed layout to cart and checkout page only? (My global layout in Theme settings is full-width)

https://puzzlestory.com/checkout/

Phil · July 2021

Hello,

You can create a custom layout with a boxed style and choose it for both cart and checkout pages.

Please, check the following video tutorial showing how to make such a layout.

https://support.muffingroup.com/video-tutorials/how-to-use-layouts-2/

Thanks

joannazaniewicz · July 2021

Hi,

I did try this solution, but it seems to work only on mobile (which looks better without it btw) not on desktop. Am I missing some settings option that should be enabled on desktop? or maybe it's a matter of adjusting site width when boxed layout is chosen for a particular page? But where can I do it without messing up the rest of the pages?

Also, do you have any tips how I can make a Paypal logo smaller on the checkout page? it looks really gigantic now.

thanks!

Phil · July 2021

Yes, it is a matter of your site width adjustment.

Instead of using layout, you can use write a custom CSS to narrow these pages. Also, you will need CSS to reduce the PayPal logo.

Do you need help with writing it?

Thanks

joannazaniewicz · July 2021

yes, please, your help with the code is greatly appreciated!

I want content of the cart and checkout to be boxed but not the header which should be full size. If you could also make action bar disappear from the top of both pages it would be great.

Phil · July 2021

Please, use the following codes:

@media only screen and (min-width: 767px) {
   .woocommerce-checkout .the_content_wrapper,
 .woocommerce-cart .the_content_wrapper{
   margin: 0 20%!important;
 }
}
.woocommerce-page .wc-block-components-radio-control-accordion-option #radio-control-wc-payment-method-options-paypal__label img{
   max-width: 25%!important;
}

Thanks

checkout and cart page width

Comments