Return to previous page

Checkout - by Christina - on WordPress WooCommerce support

This topic has 8 replies, 2 voices, and was last updated 7 years, 7 months ago ago by Rose Tyler

Christina

Participant

April 10, 2017 at 18:43

Hello,

We are using QuickBooks for our merchant account for purchases.

Can you give me a code that will allow me to customize the checkout area. As of right now, it is all over the place….some areas are center aligned, some toward the left….I would like it all aligned to the left-hand side.

Please, contact administrator
for this information.

#159422 Copied Theme version: 2.8 WooCommerce version: 2.6.14

7 Answers
Rose Tyler

Support staff

April 11, 2017 at 07:29
Hello,

You can add some custom css code to display it as you want, for example:
```
.payment_methods p {
    margin: 0;
}
.payment_methods select {
    width: 100% !important;
}
.payment_methods #wc-intuit-qbms-csc {
    width: 100% !important;
}
```
Regards,
Rose Tyler.
#159461 Copied
Christina

Participant

April 11, 2017 at 14:32

ok that works. Kind of weird, the card # space is the small space and the CSC that is typically a 3 or 4 digit $ is very long…any way we can change that? Not a huge deal, more of a personal preference.

Also, may I have the code to hide the product categories and filter options on mobile site? I still want the search button and the “show filter” button option, but just the two sections that show up automatically, I would like to hide.

#159591 Copied Theme version: 2.8 WooCommerce version: 2.6.14
Rose Tyler

Support staff

April 12, 2017 at 12:44
Hello,

Also, you can use this code:
```
.payment_box p label {
    padding-left: 0;
    margin-top:10px;
}
```
To this http://prntscr.com/evibq8 add
width: 100%;
http://prntscr.com/eviby3 +
margin-bottom: 15px;
and
```
#payment label {
    padding-left: 0;
}
```
This one you can add in Custom css for mobile, to hide sidebar on this page:
```
.woocommerce-checkout .sidebar {
    display: none;
}
```
Regards,
Rose Tyler.
#159754 Copied
Christina

Participant

April 12, 2017 at 13:14

Hey thanks, I will try this. Just to confirm, the last code you gave me, for the sidebar menu to be hidden. This affect will take place on the entire mobile site? I see it says checkout, but I do not want it to be limited to the checkout page…really particular to the product category pages when searching through products. Sorry, I know I am combining two topics and might have caused some confusion!

#159762 Copied Theme version: 2.8 WooCommerce version: 2.6.14
Rose Tyler

Support staff

April 12, 2017 at 13:25
Hello,

To hide it on all pages you can use this code in Custom css for mobile:
```
.sidebar {
    display: none !important;
}
```
if only for checkout and categories pages:
```
.woocommerce-checkout .sidebar, .tax-product_cat .sidebar{
     display: none;
}
```
Regards,
Rose Tyler.
#159764 Copied
Christina

Participant

April 12, 2017 at 13:27

Great! Thank you!! And I just put the other codes in and worked perfectly!! Thanks so much for your help!

#159766 Copied

Rose Tyler

Support staff

April 12, 2017 at 14:39

Hello,

You’re welcome!

Regards,
Rose Tyler.

#159796 Copied
Tagged: checkout, shopping, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)