Okay
  Public Ticket #335442
Woocommerce Cart Width
Closed

Comments

  • James started the conversation

    Hi Guys,

    How do I increase the width of the "Cart Totals" section? 

    Particularly the "Shipping and Handling" section as you will notice for instance the shipping labels are broken lines:

    Next Day:

    £26.00 

    Priority Mail:

    £32.95

    I would prefer them to be in one line, so perhaps if I could widen this section overall, it would look nicer

  •  410
    Qode replied

    Hi,

    Paste this Custom CSS in Qode Options -> General -> Custom CSS field: 

    #shipping_method {
        list-style:none;
        }
    
    @media only screen and (min-width:1000px) {
    #shipping_method  li{
        display:inline-block;
     }
    }
    
     @media only screen and (max-width:1000px){
    #shipping_method {
        text-align:left;
        }
    }

    Hope this is what you're looking for. If not, please send us a couple of screenshots and a more detailed explanation of what you're trying to achieve.

    Best Regards,

    Qode


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  • James replied

    Ah that's pretty much perfect now. I just need to widen the column with:

    Cart

    Subtotal

    Shipping

    and

    Handling

    I have added a rough photoshop edit to help show you.

  •  410
    Qode replied

    Hi James,

    Please use this code snippet and paste it into Qode Options -> General -> Custom Code -> Custom CSS field:

    @media only screen and (min-width: 1000px) {
      .woocommerce div.cart-collaterals div.cart_totals table strong, .woocommerce-page .div.cart-collaterals div.cart_totals table strong, .woocommerce div.cart-collaterals div.cart_totals table th, .woocommerce-page .div.cart-collaterals div.cart_totals table th {    
        width: 100px !important;
      }
    }

    Also, alter width attribute to fit your needs.

    Best regards

    Qode


    Explore our collection of 300+ premium WordPress themes on the Qode Interactive website.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.