[pdopchevParticipant]

Hi guys,

Been trying to customize the background color of the shopping cart table with listed products to black but with no luck so far (you have to add a product to see the table) http://www.dopchevproductions.com/test/cart/.

Also would like to make the Check Out tables half width and turn the text in the tables to black color. http://www.dopchevproductions.com/test/checkout/

Your help would be appreciated!

[John EzraMember]

Hi there,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

For #1:

.woocommerce-cart table th, table td {
    background-color: #000;
}

/* Optional Additions */

.woocommerce-cart .woocommerce .cart .actions .coupon input[type="text"] {
    background: transparent;
    border: 2px solid #dddddd;
}

.woocommerce-cart input.input-text.qty.text {
    background: transparent;
    border: 2px solid #dddddd;
}

For #2:

.checkout table th, table td {
    color: #000;
}

.checkout table.shop_table.woocommerce-checkout-review-order-table {
    width:50%
}

Hope this helps – thanks!

[pdopchevParticipant]

Thanks – it does!

A couple more things:

1. Cannot figure out the css for the Subtotal and Total table rows. Tried with th.cart-subtotal {
background-color:#000;} but it doesn’t seem to be working although th.product-name {
background-color:#000;} changed the background of the Product cell above… Any suggestions?

2. Just realized that when the Cart is empty the “Return to Shop” button links by default to the Store Front and in this case I am using a grid for the Store front page. How could I change the href attribute of the Button to links to http://www.dopchevproductions.com/test/store/

Thanks again!

[LelyModerator]

Hi There,

You’re welcome!

1.) Please use this custom CSS:

table.shop_table.woocommerce-checkout-review-order-table th {
    background: #000;
}

2.) Please check this link:https://support.woothemes.com/hc/en-us/articles/203560069-Change-the-URL-of-the-button-Return-to-shop-in-the-empty-cart. You may add the code on your child theme’s function.php file.

Hope this helps.

[pdopchevParticipant]

Thanks @lely, it works great!

Came across a couple more things, would be great, if you could help me out with them.

1. Link: http://www.dopchevproductions.com/test/checkout/

Still having troubles targeting the “SUBTOTAL” and “TOTAL” cells at the bottom of the form. I did change the text-transform value for the rows but would like to change the text color of the cells only (without the numeric values) Any ideas on that?

2. Link: http://www.dopchevproductions.com/test/product/the-80/

Also would like to change the width of the “Reviews” section only to 75% on the product page. Am I on the right track with the following id and class?

id=”tab-reviews” class=”panel x-tab-pane”

Thanks!

[ChristopherModerator]

Hi there,

Please add this :

tr.cart-subtotal th, tr.order-total th {
    color: red;
}
div#reviews {
    width: 75%;
    margin: 0 auto;
}

Hope it helps.

[pdopchevParticipant]

Thank you for your help, worked perfectly!

[JadeModerator]

You’re most welcome.

[Author]

Posts