Change Font Size/Color of Shopping-Cart Variables - 7.0

How can I change the font size of my shopping cart variables? The font size for price is too small, and for Quantity and Variable are too big.

I'd also like to change the typeface for Quantity and Variable to match the rest of the fonts across the site. 

My site: https://www.elizabethhayt.net

Find my current shopping cart CSS below, and a photo attached. 

/* cart buttons order */
#productDetails {
    display: flex;
    flex-direction: column;
}

h1.product-title {
    order: 1;
    margin-top: 0; /* Adjust as needed */
}

.product-price {
    order: 2;
    margin-top: -5px !important;
  
}

.sqs-add-to-cart-button-wrapper {
    order: 3;
    margin-top: -20px !important;
}

.product-quantity-input {
    order: 4;
   margin-top: -20px !important;
    /* Adjust as needed */
}

.product-variants {
    order: 5;
  padding-bottom: 10px;
}

.product-sharing {
    order: 6;
  padding-top: 20px;
  
}
.product-excerpt {
    order: 7;
  margin-top: 30px;
    /* Adjust as needed */
}
 

Hey @2Eyeballs

Try this code and see if that works (assuming this is on the cart page?) 

body#cart .cart-row-variants > .cart-row-variant {
font-size: 18px !important;
font-family: your-font-here;
color: #000 !important; /* change this hex code to your colour */
}
body#cart .cart-row-price {
font-size: 18px !important; /* change as required */
font-family: your-font-here;
color: #000 !important; /* change this hex code to your colour */
}

If you mean on the individual product pages (e.g. https://www.elizabethhayt.net/table-accents-1/green-botanical-placemats-pair )

div#productDetails .product-price {
font-size: 18px !important; /* change as needed */
color: #000 !important;  /* change as needed */
}

div#productDetails .product-quantity-input input {
font-size: 18px !important; /* change as needed */
color: #000 !important;  /* change as needed */
}

div#productDetails .variant-select-wrapper select {
font-size: 18px !important; /* change as needed */
color: #000 !important;  /* change as needed */
}

I can't see the screenshot so if it's another part of the, could you re-upload?

@dwinnbrown That worked like a dream. Thank you!

Can you also advise:

1. How to change the font size of the 'ADD TO CART' button?

2. How to increase the margin between the word 'quantity' and the item number field?

3. I'd also like to change the look of the item number input field itself, from the current white field to the input option that you see in the cart page itself. 

See the screenshots attached. 

On 10/30/2023 at 11:58 PM, 2Eyeballs said:

That worked like a dream. Thank you!

Can you also advise:

1. How to change the font size of the 'ADD TO CART' button?

2. How to increase the margin between the word 'quantity' and the item number field?

3. I'd also like to change the look of the item number input field itself, from the current white field to the input option that you see in the cart page itself. 

See the screenshots attached. 

Can you share link to this product?

Hello @tuanphan , I've fixed everything except for making the toggle to increase or decrease the quantity of the product on the individual product page match the design of the quantity field on the cart page. Find pictures attached. You can see that on the product page there is just a arrow to increase or decrease. I want a plus sign and minus sign to be on either side of the number, like it is on the cart page.

You can see this on any product page, but here is a link for your ease: https://www.elizabethhayt.net/table-accents-1/cocktail-napkin-with-violet-colored-edge