Checkout Totals Don't Lineup

  • Resolved klipklopp

    (@klipklopp)


    8 years, 1 month ago

    Hi,

    The totals on my checkout page are not all lining up. Everything is fine except for the Shipping charge which appears floating to the right, while all other charges for products, subtotals and taxes appear floating to the left. I am using the Table Rate Shipping plugin which may be part of the problem.

    Any suggestions would be greatly appreciated… Is there a quick bit of CSS code I can put in to take care of this?

    Thanks!

    Ted
    http://www.westminstertech.com

    ### WordPress Environment ###

Home URL: http://www.westminstertech.com
Site URL: http://www.westminstertech.com
WC Version: 2.5.5
Log Directory Writable: ✔
WP Version: 4.4.2
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
Language: en_US

### Server Environment ###

Server Info: Apache
PHP Version: 5.2.17 - We recommend a minimum PHP version of 5.4. See: How to update your PHP version
PHP Post Max Size: 50 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
SUHOSIN Installed: –
MySQL Version: 5.5.42
Max Upload Size: 50 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 2.5.5
:
woocommerce_sessions: ✔
woocommerce_api_keys: ✔
woocommerce_attribute_taxonomies: ✔
woocommerce_termmeta: ✔
woocommerce_downloadable_product_permissions: ✔
woocommerce_order_items: ✔
woocommerce_order_itemmeta: ✔
woocommerce_tax_rates: ✔
woocommerce_tax_rate_locations: ✔

### Active Plugins (22) ###

BYOB Genesis Child Theme Editor: by Rick Anderson – 1.0.1
Display Widgets: by Strategy11 – 2.05
Image Rotator Widget: by Douglas Karr
Stephen Coley – 1.1.1

DT hAtom WordPress Error Plugin: by David Tiong – 1.1.5
Genesis Connect for WooCommerce: by StudioPress – 0.9.8
Genesis Simple Edits: by Nathan Rice – 2.1.4
Shortcodes Ultimate: by Vladimir Anokhin – 4.9.9
Tab Me: by Micah Blu – 1.0.2
Tabbed Sidebar Widgets: by Nevma – 1.1.2
Websimon Tables: by Simon Rybrand – 1.3.4
WooCommerce Menu Cart: by Jeremiah Prummer
Ewout Fernhout – 2.5.7

Woocommerce Super Simple Tax Exemption: by Bobbie Wilson – 1.3
WooCommerce Table Rate Shipping: by Mike Jolley – 2.9.2
WooCommerce: by WooThemes – 2.5.5
WooThemes Helper: by WooThemes – 1.6.0
Yoast SEO Premium: by Team Yoast – 3.1.2
WP Lightbox Ultimate: by Tips & Tricks HQ – 2.0.8
WP Smush: by WPMU DEV – 2.1.5
Local SEO for Yoast SEO: by Team Yoast and Arjan Snaterse – 3.1
WordPress SEO News: by Team Yoast – 3.1
Video SEO for WordPress SEO by Yoast: by Team Yoast – 3.1
Yoast WooCommerce SEO: by Team Yoast – 3.1.1

### Settings ###

Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2

### API ###

API Enabled: ✔
API Version: 3.1.0

### WC Pages ###

Shop Base: #3054 - /shop/
Cart: #3055 - /cart/
Checkout: #3056 - /checkout/
My Account: #3057 - /my-account/

### Taxonomies ###

Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

### Theme ###

Name: News Child Theme
Version: 2.1
Author URL: http://www.studiopress.com/
Child Theme: ✔
Parent Theme Name: Genesis
Parent Theme Version: 2.2.7
Parent Theme Author URL: http://www.studiopress.com/
WooCommerce Support: ✔

### Templates ###

Overrides: –

    https://wordpress.org/plugins/woocommerce/

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • danbzly

    (@danbzly)

    8 years, 1 month ago

    Hey Ted,

    Try adding this 

    #order_review tr.shipping td span.amount {
    position: relative;
    left: -67px;

    Looks like this is on line 233 in your byob-custom.css

    You may need to fix this in responsive.

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    Hi,

    Thanks for the code… Unfortunately – when I put this in, while it fixes the columns in the checkout – the columns on the cart page no longer line up.

    Any suggestions for a fix to take care of both?

    Thanks!

    Ted

    danbzly

    (@danbzly)

    8 years, 1 month ago

    Hey Ted,

    Sorry about that, that slipped my mind that it would change it in both places..

    You can call in the page number to make sure this only happens on that page..

    So add this on its own line and delete the position and left css from line 233…

    .page-id-3056 #order_review tr.shipping td span.amount {
    position: relative;
    left: -67px;}

    I hope that helps..

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    Ok… That works… But two quick follow ups…

    I see that in IE – on the checkout page the column is not falling under the word TOTAL – like it does in Firefox and Chrome… Any idea why? Is there a fix? If not, no biggie.

    Also, I notice that the horizontal line going across separating the subtotal and the shipping cuts off at the total in the checkout – but all other lines go all the way over. Again, any idea why? Is there a fix – if not again – no big deal.

    I’m just glad the columns are lining up now!

    Thanks for all your help!

    Ted

    danbzly

    (@danbzly)

    8 years, 1 month ago

    Lets see if this works..

    For IE fix try this first:

    .page-id-3056 #order_review tr.shipping td span.amount {
    position: relative;
    right: 67px;
    zoom: 1;
    color: #000;
}

    If that does not work try delete the other code and try this:

    .page-id-3056 #order_review tr.shipping td span.amount {
     display: table;
    color: #000;
}

    For the horizontal line we need to do two things.. One is make sure the color:#000 is added to the code above. And two on line 229 of our style sheet try this.. 

    .cart_totals tr.shipping td, #order_review tr.shipping td {
    /* visibility: hidden; */
    color: #fff;
}

    I hope that works for you..

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    Well… Neither of the first two codes fixed the problem in IE…

    And the third piece of code made the shipping amount disappear (turning the font color white) on the Cart page, even though the line still doesn’t go across…

    🙁 Any other ideas would be great!

    Thanks!

    Ted

    danbzly

    (@danbzly)

    8 years, 1 month ago

    Try being page specific again.

    So for the checkout page:

    Screen shots that may help for checkout page:
    http://screencast.com/t/onSHdK0A
    http://screencast.com/t/nSoPS5YRlkpQ

    .page-id-3056 #order_review tr.shipping td {
    /* visibility: hidden; */
    color: #fff;
    }

    For the Cart page use the class .page-id-3055 to be specific

    Screen shots that may help for checkout page:
    http://screencast.com/t/1R2vicdJ
    http://screencast.com/t/yuEAvZge2

    I hope that helps

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    Checkout page:

    I tried the updated code and got this:

    http://tinyurl.com/z3rrhnq

    Maybe it’s the way I am putting in the code – forgive my lack of knowledge here…

    http://tinyurl.com/zg23h4h

    What should I try next?

    Thanks!

    Ted

    danbzly

    (@danbzly)

    8 years, 1 month ago

    On line 240 or the last line of your style sheet add this and see if it works..

    .page-id-3056 #order_review tr.shipping td {
     visibility:visible!important;
     color: #fff;
}
    danbzly

    (@danbzly)

    8 years, 1 month ago

    And on your cart page this is what you could add.. 

    .page-id-3055 .cart_totals tr.shipping td {
visibility: visible;
color:#fff
}
.page-id-3055 .cart_totals tr.shipping td span.amount {
	visibility: visible;
	color:#000
}

    You may need to add !important to make it work.. Let me know if that works..

    We will get it eventually! 🙂

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    That works for the line across! 🙂

    Two questions – (one we are already working on)…

    IE still has the word TOTAL shifted over to the right on the Checkout page.

    Also on the checkout page in all browsers, the shipping amount is one line down from the word Shipping. Any idea why – or a fix on that?

    Thanks for all your help!

    Ted

    danbzly

    (@danbzly)

    8 years, 1 month ago

    The reason the shipping amount is one line down is actually the cause of this whole issue.. Because the word “Table Rate:” was removed.. The issue is if you do visibility hidden to remove those words then the border above it does not show.. So instead we just made those words white so that they are hidden but you also get the border above..

    Lets try this…

    On line 245 add this:

    .page-id-3056 #order_review tr.shipping td {
    position: relative;
    }

    You can go back to this code on line 238 and change it to this:

    .page-id-3056 #order_review tr.shipping td span.amount {
    color: #000;
    position: absolute;
    left: 12px;
}

    That will fix your line issue and maybe your IE issue… Sorry I do not have IE so it is hard for me to trouble shoot it..

    Thread Starter klipklopp

    (@klipklopp)

    8 years, 1 month ago

    Hmmm…

    Am I putting the code in wrong?

    Current results:

    http://www.screencast.com/t/NiYd44vqVLm
    http://www.screencast.com/t/lDkKr2Zmuw

    Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    8 years, 1 month ago

    You may want to learn your way around the inspector. Right click the page, click ‘inspect element’. All HTML and CSS will be shown to you.

    In your case, there just seems to be some different padding:

    https://dl.dropboxusercontent.com/s/eiuh5au9hvkhkdb/2016-03-19%20at%2011.09.png?dl=0

    .woocommerce table.shop_table td {
padding: 9px 12px !important;
}

    Should clear that up.

    danbzly

    (@danbzly)

    8 years, 1 month ago

    You had it correct here http://www.screencast.com/t/NiYd44vqVLm

    You just needed to remove display:table;

    So add your code back like you had it in that screen shot and only remove display:table; and that should fix it.

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • The topic ‘Checkout Totals Don't Lineup’ is closed to new replies.