How to change the actual size of the Checkout button?

Site URL: https://alligator-dahlia-9b2w.squarespace.com/

Hi! 

I would like to change the size of the Checkout button (way too large at the moment) and same thing for the button that is shown when the cart is empty.

Can I edit the text that is automatically written on the button? Instead of 'page de paiement' I would like it to be 'procédez au paiement'.

If possible I would also like to decrease the text size of the subtotal amount. See attached images.

Thanks in advance 🙂

Hi,

What is access password?

Use this code

/* checkout button */
button.cart-checkout-button {
    font-size: 10px !important;
}
/* Cart subtotal price */
p.cart-subtotal-price {
    font-size: 20px;
}

Thanks a lot, it worked! 🙂

What about the button when the card is empty (second image), can I do the same with this one? I can't find the css code to target this one in particular...

Also, how can I update the text of the button?

Much appreciated 🙂

(if needed PW: rose)

On 5/27/2022 at 9:54 PM, ChristineLYLA said:

Thanks a lot, it worked! 🙂

What about the button when the card is empty (second image), can I do the same with this one? I can't find the css code to target this one in particular...

 

Also, how can I update the text of the button?

 

Much appreciated 🙂

(if needed PW: rose)

#1. Use this code

a.cart-continue-button {
    font-size: 10px !Important;
}

#2. You mean rename text?

Yes exactly! I'd love to rename the text of that button to something else.

I'm also looking to resize the button shown when the cart is empty (see attached image).

Thanks a lot for your help 🙂

On 5/29/2022 at 9:58 PM, ChristineLYLA said:

Yes exactly! I'd love to rename the text of that button to something else.

I'm also looking to resize the button shown when the cart is empty (see attached image).

 

Thanks a lot for your help 🙂

 

Above code doesn't work?

With rename, you want to rename empty page button or checkout button?

Sorry I totally missed the previous code, it worked perfectly, thanks a lot! 🙂

I want to rename the check out button. Instead of 'page de paiement' I would like to replace it with 'procédez au paiement'.

Add to Last Line in Settings > Advanced > Code Injection > Footer

<script>
  $(document).ready(function() {  
		$("button.cart-checkout-button").html(function() { 
          return $(this).html().replace("Page de paiement", "procédez au paiement");  
    });
	});
</script>

Hey @tuanphan! 🙃 Taking advantage of the topic, could you help me to resize the checkout button? Follow the link:
https://www.dextersupplier.com/cart

I would like to make it identical to the "add to cart" button and I haven't been able to... Thanks in advance... 🙏

On 8/3/2022 at 6:08 AM, tilegore said:

Hey @tuanphan! 🙃 Taking advantage of the topic, could you help me to resize the checkout button? Follow the link:
https://www.dextersupplier.com/cart

I would like to make it identical to the "add to cart" button and I haven't been able to... Thanks in advance... 🙏

Can you share link to a product? We can add it to cart to able to see checkout button

On 8/5/2022 at 4:28 AM, tuanphan said:

Can you share link to a product? We can add it to cart to able to see checkout button

Hey @tuanphan, follow link:

https://www.dextersupplier.com/barbershop-and-salon/loreal/pack-metal-detox-loreal

Thank you...

On 8/7/2022 at 1:23 AM, tilegore said:

Hey @tuanphan, follow link:

https://www.dextersupplier.com/barbershop-and-salon/loreal/pack-metal-detox-loreal

Thank you...

Add to Design > Custom CSS

/* checkout button */
button.cart-checkout-button {
    font-size: 17px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}