Woocommerce cart and checkout

Support
#1

hi there,

i tried to make the last changes on the cart and checkout page. i have some erros and some problems to find the right selectors.
perhaps anyone can help me a little bit? :slight_smile:

cart page:
if you look on desktop all looks fine. but on mobile the product title dissapears…

i cant change the border-color to rgb(42,42,42) on the table and all other things like voucher code border…,

if hover on proceed to checkout there are two colors, border gold, text pink. it should in color gold.

the button apply code is TOO big

is it possible to change the size of the remove product icon? or replace the icon?

checkout-page:
on the checkout page on top is the do you have a voucher link. i tried to remove the text-decoration but it does not work

again all borders are too light in color i need to change them to rgb(42,42,42)

ah and one more problem if you add a product the link to the cart is not centered. is that possible?

thanks in advance for your help

cheers

#2

Hi Harald,

Thanks for writing in!

For the Cart page:

  1. Add the following CSS rule into your Pro -> Theme Options -> CSS area to get the title on mobile.
@media (max-width:767px) {
  .woocommerce .cart.shop_table .product-name {
    display: block !important;
  }
}

2.To target the table, voucher input, change the pink color and to resize apply coupons buttons, use the following CSS rules.

table.shop_table th, table.shop_table td {
    border-top: 1px solid rgb(42,42,42);
}
#coupon_code {
    border: 1px solid rgb(42,42,42);
}
.woocommerce a:hover {
    color: rgb(212,146,85);
}
.woocommerce .cart .actions > input, .woocommerce .cart .actions > button {
    font-size: 80%;
}

3.To change the size of product remove icon, use the following CSS rule.

.product-remove .remove {
    font-size: 1.4em;
}

For the Checkout page:

1.To remove the link on top, add the following CSS rule.

.woocommerce-form-coupon-toggle {
    display: none;
}

2.To set border colors, use the following CSS rule.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: 1px solid rgb(42,42,42);
}

3.To center the product link, use the following CSS rule.

.woocommerce-notices-wrapper .button.wc-forward {
    padding: 0 !important;
}

Hope that helps.

#3

hi,

many many thanks all worked fine!

one question, i use chrome dev tools and css hero to find the right selectors, but sometimes i did not find the right one.
how do you target the right selectors? sometimes it´s really strange…

thanks again for your awesome help and support!

cheers

#4

Hello @deranaloge,

It would be ideal to familiarize yourself first on how to write a CSS Selectors. Please check these links:

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.