Return to previous page

Checkout customization - by holachicas - on WordPress WooCommerce support

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

holachicas

Participant

July 19, 2017 at 23:35

Hi!

I need assistance with 2 topics:

1. on checkout page, I have “billing details” right next to “your order”. Is there a way of having “your order” below “billing details?” I’m using a checkout method that doesn’t look good on half screens…

2. I have a instagram widget on my footer, but it’s not looking quite right. all 9 pictures are one below the other, and they were supposed to be in 3 columns and 3 lines. Can you guys help me out?
(You’ll see that the Facebook app is offline, as I don’t have an online page yet, so it’s fine).

Please, contact administrator
for this information.

#168408 Copied Theme version: 3.0.0.1 WooCommerce version: 3.1.1

11 Answers
Rose Tyler

Support staff

July 20, 2017 at 08:13
Hello,

1. You can copy /woopress/woocommerce/checkout/form-checkout.php file into your child-theme/woocommerce/checkout/ folder and change this code http://prntscr.com/fxxzzx to https://prnt.sc/fxxzts.

2. Please add this code in Theme Options > Custom css:
```
.main-footer .widget-container.null-instagram-feed .instagram-size-small li {
    width: 33.33%;
    display: inline-block;
    padding: 5px;
}
```
Regards
#168425 Copied
holachicas

Participant

July 20, 2017 at 13:15

Hi!

Number 2 worked! About Number 1, on my directory, my child theme folder only has functions.php, style.css and screenshot.png.

Should I create this woocommerce folder and place a checkout folder on it or am I at the wrong place?

Thanks in advance.

#168446 Copied

Rose Tyler

Support staff

July 20, 2017 at 14:07

You need to create empty woocommerce and checkout folders in your child theme.
Read more about child theme https://www.8theme.com/demo/docs/woopress/#!/3_child_theme https://codex.wordpress.org/Child_Themes

Regards

#168449 Copied

holachicas

Participant

July 20, 2017 at 14:56

Awesome, thanks!

Do you know what I could to to keep the fields one right below the other? I use this plugin in multiple sites and they all have the fields aligned, I think that’s something concerning theme compatibility: https://ibb.co/gowZLQ

#168458 Copied
Rose Tyler

Support staff

July 20, 2017 at 15:11
You’re welcome!
Try to use this code in Custom css:
```
.woocommerce-checkout-payment .payment_methods p {
    margin-left: 0;
}
```
Regards
#168464 Copied
holachicas

Participant

July 20, 2017 at 15:25

It did align the payment options to the right, but it messed up the billing info layout… Any ideas on how we could have both working?

#168473 Copied
Rose Tyler

Support staff

July 20, 2017 at 15:30
Please change previous code to:
```
.pagseguro-method-form p {
    margin-left: 0; 
}
```
Regards
#168474 Copied
holachicas

Participant

July 20, 2017 at 16:59

I don’t know why, but it didn’t work… I mean, the pagseguro is totally fine now. But there are two fields on billing details that are not in the right place (CPF and Estado). I even put the checkout back to 2 columns as before to see if this would work, by deleting the new checkout.php on my child-theme folder, but it didn’t work.

I even contacted the plugin “Extra Checkout Fields for Brazil” to ask for help but he said it was Woopress and not his plugin.

#168487 Copied
Rose Tyler

Support staff

July 21, 2017 at 08:46
Hello,

Previous your changes in the child theme and last css code do not make any effect on billing details fields. You may try to deactivate “Extra Checkout Fields for Brazil” plugin and see billing details fields without problems. If you use this plugin and change fields on the checkout page, you need also write custom css code to display page content well. For example:
```
.woocommerce-checkout #billing_cpf_field, .woocommerce-billing-fields #billing_state_field {
    clear: both;
}
.woocommerce-billing-fields #billing_state, .woocommerce-billing-fields #billing_email {
    width: 47%;
}
.woocommerce-billing-fields billing_postcode_field, .woocommerce-billing-fields #billing_email {
    margin-right: 3%;
}
.woocommerce-billing-fields #billing_postcode_field {
    margin-right: 6%;
}
```
Regards
#168516 Copied
holachicas

Participant

July 21, 2017 at 12:17

Rose, thank you so much for your patience and support, I’m definitely recomending your theme to everyone.

The code you provided worked perfectly for State, but did not work for CPF. Any suggestions?

Thank you again for being so kind.

#168528 Copied

Rose Tyler

Support staff

July 21, 2017 at 13:29

You’re welcome! We can propose you also our new theme XStore https://themeforest.net/item/xstore-responsive-woocommerce-theme/15780546 🙂

Please provide screenshot of CPF field for betters understanding.

Regards

#168529 Copied
Viewing 12 results - 1 through 12 (of 12 total)