WooCommerce CheckOut Customization

Support
#1

Does anyone know how I can make it so it has a max width of 600 px on desktop and 300 on mobile?
And does anyone know of any apps or extentions i can use to custom design the layout within X Theme?
Ideally, i’d like to use store front’s default layout for the checkout, but i don’t know how to do that without messing up X Theme everywhere else on my site.

Jesse

#2

Hello Jesse,

Thanks for asking. :slight_smile:

  1. You can use CSS media queries to have a max width of 600px on desktop ad 300px on mobile devices. Here’s a example CSS code that you can take a look.
@media only screen and (max-width: 600px) {
  .class-name {
    width: 300px !important; /* for mobile devices */
  }
}

@media only screen and (min-width: 600px) {
  .class-name {
    width: 600px !important; /* for mobile devices */
  }
}

You can find the class name using Google Chrome dev tools. Here’s a tutorial that you can take a look. https://www.youtube.com/watch?v=wcFnnxfA70g

  1. Can you please elaborate on having custom design layout? Is for the checkout page? Though not a page builder but you can take a look at Woo Checkout Editor that comes with X Theme. Woo Checkout Editor can be installed from X > Validation > Extensions. Here’s a getting started tutorial.

Let us know how it goes.

Thanks.

#3

Is there anyway to use the WooCommerce Storefront theme for Checkout Only? The Editor that comes with X Theme only appears to allow for adding and removing fields, i Don’t see anything that would let me change the layout or add graphics or do any of the stuff that i can do in Cornerstone.

#4

Hi,

Regretfully that is not possible.

There are a lot of ways to customize the checkout page, by using filters and hooks or using a customize template but these are outside the scope of support that we offer.

You might want to check the link below to help you get started.

Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.