1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Problem with Woocommerce checkout page layout

Discussion in 'Get Help On Divi Wordpress' started by Hermione, May 23, 2020 at 11:48 AM.

  1. Hermione

    Hermione New Member

    Hi there, the layout of my "Your order" displays the "direct bank transfer" option next to the totals table, which squishes the table content. Is there code that can fix this?

    and

    The "Additional information" heading doesn't have any top padding. It is squished up against the email address text box.

    Can you please help? Thank you very much.

    https://oceanstechnology.co.uk/checkout/
     

    Attached Files:

    1. AD Free download for Divi Mobile Bar Plugin: https://divi.help/threads/divi-mobile-bar-plugin-free.1579/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Can't find anything to add to cart, and so not able to see your checkout page.
     
  3. Hermione

    Hermione New Member

    1. AD Recommended Web Hosting for Divi sites: https://divi.help/link-forums/siteground.140/
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    #page-container .woocommerce table.shop_table {
        width: 100%!important;
        float: none!important;
    }
    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .woocommerce-additional-fields {
        margin-top: 35px;
    }
     
  5. Hermione

    Hermione New Member

    Thanks a lot, that solved the main issues, but now it's reporting a bug. It might have something to do with some of the other custom CSS I found online and added to my site. I have copied all the code in my custom CSS below. I really appreciate you helping me with this. I have no coding experience...

    @media screen and (min-width: 980px) {
    .checkout-button {
    width: 100% !important;
    float: right !important;
    /***** Checkout Button, style how you would like *****/
    color:#384f60!important;
    font-weight:bolder!important
    }
    .woocommerce-page.et_pb_button_helper_class button.button {
    /***** Checkout Button, style how you would like *****/
    color:#384f60 !important;
    font-weight:bolder!important
    }
    .cart_totals {
    float: right !important;
    width: 32% !important;
    border: solid 2px #f2f2f2;
    border-radius: 3px !important
    margin-bottom: 0px;
    padding-bottom: 0px;
    }
    .woocommerce-cart .wc-proceed-to-checkout {
    padding: 1em 0 0 0;
    }
    .woocommerce-page.et_pb_button_helper_class a.button {
    margin-bottom: 0px !important;
    }
    .woocommerce table.shop_table {
    float: left !important;
    width: 63% !important;
    }
    .woocommerce-page table.cart td.actions .coupon {
    float: left;
    width: 100%;
    }
    .woocommerce-page.et_pb_button_helper_class button.button, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
    width: 60%;
    margin-bottom: 10px;
    }
    /***** Heading, change according to taste ***/
    .cart_totals h2, .shipping_calculator h2 {
    background-color: #384f60 !important;
    color: #FFF !important;
    padding: 20px !important;
    text-align: center !important;
    font-size: 25px !important;
    font-weight: lighter !important
    border-radius: 3px !important;
    margin-bottom: 30px !important;
    }
    }
    @media (min-width: 768px){
    #customer_details{
    width: 60%;
    float: left;
    }
    #order_review_heading{
    width: 30%;
    float: left;
    padding-left: 50px;
    }
    #order_review{
    width: 40%;
    float: left;
    padding-left: 50px;
    padding-top: 15px
    }
    .woocommerce table.shop_table td{
    width: 50%;
    }
    .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
    .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
    width: 100%;
    }
    }
    #page-container .woocommerce table.shop_table {
    width: 100%!important;
    float: none!important;
    }
    .woocommerce-additional-fields {
    margin-top: 35px;
    }
     
    1. AD Create stunning carousel for Divi sites: https://divi.help/link-forums/divi-carousel.153/
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly elaborate more on the issue you're having.
     
  7. Hermione

    Hermione New Member

    Thank you for your kind assistance. Your code solved my first two formatting issues. But I now have additional issues:

    1. On the cart page (https://oceanstechnology.co.uk/confirm-selection/) the column distribution allows a lot of space for the image which is very small, and very little space for product, price, quantity and subtotal. I would prefer a more sensible column distribution, allowing the most space for the product name.

    2. Still on the cart page (https://oceanstechnology.co.uk/confirm-selection/) in the cart totals table, the amounts are aligned in the middle of the table. I would prefer to have them right aligned.

    3. On the checkout page (https://oceanstechnology.co.uk/checkout/) I have the same issue as above - in the order review table the amounts are aligned in the middle of the table. I would prefer to have them right aligned.

    Thank you SO much for your willingness to help me!
     
    1. AD Create gorgeous Divi slide-in promo bars, notification bars, etc: https://divi.help/link-forums/divi-bars.150/

Recommended Divi Hosting