Cart: Modify checkout, update cart and additional payment buttons
The theme has two main cart types, a modal version which is a pop-up window and the standard page type. This article shows you how to change some of the cart elements for both cart types.
Modal Cart
If you're using the Modal cart type, the color of the Checkout button uses the Accent color from your theme's color settings:
The color of this button is adjusted in the Theme settings -> Color under General. It's using the Accent color:
This color setting also affects the additional payments button background color which is below. That color is based off your setting for the Accent color. In this case, it's made it darker.
- 1
-
Optional code: Override the checkout color setting in code (use a different color than your chosen accent color), you can use this code:
/* -- code to change modal cart checkout button color -- */
.ajaxcart--modal .checkout__button, .ajaxcart--modal .btn--splash { background-color: #828383 !important; }
/* - end - */
The hex color code #828383 can be replaced by any other valid hex color code:
http://www.colorhexa.com/web-safe-colors
- 2
-
Override code: Background color of the PayPal or payments method section:
Example, change to change the background to white:
/* -- code to change the additional payments background color -- */
.ajaxcart .additional-checkout-buttons, .additional-checkout-buttons { background-color: #ffffff;}
/* - end - */
Example result:
Page Cart
If you're using the Page cart type, then the color is set from the Link color:
(3) The Page checkout button uses the Link color:
- 3
-
Optional code: To override the Page cart checkout button background color:
/* -- code to modify checkout button on page cart -- */
.btn.checkout__button { background-color: #cc0000; border:1px solid #cc0000; width:200px; }
.btn.checkout__button:hover {background-color: #2196f3; }
/* -- end -- */
- The first line changes the background color of the button, border of the button and the button width. You can modify the values to match the needs for your shop.
- The second line modifies the hover color.
- 4
-
Override code: "Update Cart" button background color:
/* -- code to modify the update button on page cart -- */
input.update-cart {background-color: #2196f3; border:1px solid #2196f3; color: #ffffff; width:200px; }
input.update-cart:focus {background-color: #00BCD4; color: #ffffff;}
input.update-cart:hover {background-color: #00BCD4; color: #ffffff;}
/* - end - */
- The first line of code changes the update button background color, button border, text color and the width of the button.
- The second line of code is used for changing button background color when the cart has been modified. Example, if the customer changes the quantity or removes a product.
- The third line of code is the hover background color.
- 5
-
Override code: Background color of the PayPal or payments method section:
/* -- code to change the additional payments background color -- */
.ajaxcart .additional-checkout-buttons, .additional-checkout-buttons { background-color: #ffffff;}
/* - end - */
Example result:
To remove the border, use this additional override code:
/* -- code to remove border for additional payments -- */
.additional-checkout-buttons { border: none;}
/* - end - */
Mobile Page Cart
To increase the button size of the page cart on mobile devices, you can make this code modification:
Example result:
- 6
-
Override code: Increase mobile button size when using page cart:
/* -- code to make page cart buttons larger on mobile -- */
@include at-query($max, $small) {
input.update-cart {width: 99%;margin-top: 10px;}
.btn.checkout__button { width:99%;margin-top: 20px;}
}
/* - end - */
Hide additional payment buttons in code
This should only be used if you're trying to hide the PayPal buttons on both the Cart and Checkout. In order for that to work, you'll need to make sure in the Cart settings, the Show additional checkout options is turned on.
- 7
-
Override code: This will hide the checkout buttons like PayPal on the cart while keeping the setting on:
.additional-checkout-buttons { display:none !important}
Where do I add the code?
Use this link to learn where exactly to add this code snippet: