...
Custom styles can be applied by directly adjusting CSS on the vendor's side. For example, here are some CSS selectors and their corresponding elements:
Element | Selector |
|---|---|
| Cart container (wrapper) | cart-container .cd-cart-container |
| Cart container heading | cart-container .cd-cart-container .cart-heading |
| Purchase button (Buy now) | cart-container .cd-cart .purchase-button |
| Product name in the cart | cart-container .product-name |
| Product price in the cart | cart-container .product-price |
| Add to cart button | add-to-cart-button .cart-button |
...
| Code Block | ||
|---|---|---|
| ||
<!-- Custom style of the cart widget elements (optional) -->
<style>
cart-container .cd-cart-container {
z-index: 10;
}
cart-container .cd-cart-container .cart-heading {
color: red;
}
cart-container .cd-cart .purchase-button {
background-color: red;
}
cart-container .product-name {
color: red;
}
cart-container .product-price {
color: red;
}
add-to-cart-button .cart-button.btn-default {
color: red;
}
</style> |
...