Checkout customization - by holachicas - on WordPress WooCommerce support

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

  • Avatar: holachicas
    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.
    11 Answers
    Avatar: Rose Tyler
    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

    Avatar: holachicas
    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.

    Avatar: Rose Tyler
    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

    Avatar: holachicas
    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

    Avatar: Rose Tyler
    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

    Avatar: holachicas
    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?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 20, 2017 at 15:30

    Please change previous code to:

    .pagseguro-method-form p {
        margin-left: 0; 
    }

    Regards

    Avatar: holachicas
    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.

    Avatar: Rose Tyler
    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

    Avatar: holachicas
    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.

    Avatar: Rose Tyler
    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

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.