How to add border on checkout table format?

  • Resolved stonez

    (@stonez)


    6 years, 8 months ago

    Hi,
    I was reading the following post on how to change width of checkout table left column width and it worked.
    change checkout-table

    However, I would like to further change the table by adding border or underline on each TD tag, but it never worked. How should I do this?

    In the custom CSS, I have added:

    table.woocommerce-checkout-review-order-table: { border:1px; border-color:black;}

    What’s the proper syntax to do this in custom CSS? For instance, I would like to add border, change height, width, background color of each td cell.

    Thank you!

    • This topic was modified 6 years, 8 months ago by stonez.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Ryan Ray, a11n

    (@ryanr14)

    Hi there,

    You may have had issues at first because you can’t put borders on the tr element. You can on a td or th though, so I’d got this far on your site just to show you. It’s not clear where you want a border, but it sounded like just a bottom border on specific elements.


    Link to image: https://cld.wthms.co/Z4Npvc

    Thread Starter stonez

    (@stonez)

    Thanks for looking into this! ??

    For the border, I mean the entire table to have a thin line border.
    Also, How did you add the bottom border? In custom CSS settings?

    Thanks!

    Thomas Shellberg

    (@shellbeezy)

    Automattic Happiness Engineer

    
.woocommerce-checkout-review-order-table {
border: 1px solid black;
}

    Result:

    https://cld.wthms.co/KkSRdy

    This goes over how to use the border: shorthand:

    https://developer.mozilla.org/en-US/docs/Web/CSS/border

    You can add the CSS by going to Appearance->Customize->Additional CSS.

    Thread Starter stonez

    (@stonez)

    Hi Thomas,
    Thanks! I was able to have borders on the entire table including TH, TD, and all around; exactly what I wanted with the code below!

    
.woocommerce #order_review table.shop_table {
    border: 1px solid;
    border-color: grey;
    text-align: right;
}

.woocommerce #order_review table.shop_table th{
    border: 1px solid;
    border-color: grey;
    text-align: left;
}

.woocommerce #order_review table.shop_table td{
    border: 1px solid;
    border-color: grey;
    text-align: right;
}

    My another questions is product name font color is in grey and product name attributes are in black. i would like to revser the colors. I tried the code below, but the product-name color stays in grey:

    .woocommerce #order_review table.shop_table product name{
    color: black;
}

    What’s the correct syntax to do that?

    Thanks!

    Stonez

    Howdy Stonez,

    the product name part of that is what is preventing it from working. The class name is product-name so that would be denoted as .product-name

    You can use your browser inspector to find the correct elements to target with CSS and it can also be used to test/preview any CSS changes. Here is an example:

    Kind regards,

    Thread Starter stonez

    (@stonez)

    Hi Wbrubaker,

    Thanks for your kind help! I have updated the table and boarder size and the example you’ve given above help me greatly in customize other parts of this website.

    border size and font color reassigned

    Best regards!
    Stonez

    Plugin Support Ryan Ray, a11n

    (@ryanr14)

    Howdy Stonez,

    Glad to hear everything is looking good! I’m going to mark this as resolved for the time being – if you have any further questions, you can start a new thread.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to add border on checkout table format?’ is closed to new replies.