Scribd
Upload
4 views2 pages

Custom CSS for WooCommerce Design

This document contains CSS code for customizing the appearance of a WooCommerce website. It sets the primary color to black, styles buttons with a black background and white text, and modifies hover effects and cart item colors. Additionally, it removes certain elements like the 'View Cart' button and adjusts focus outlines for input fields.

Uploaded by

panamamary965
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

Custom CSS for WooCommerce Design

This document contains CSS code for customizing the appearance of a WooCommerce website. It sets the primary color to black, styles buttons with a black background and white text, and modifies hover effects and cart item colors. Additionally, it removes certain elements like the 'View Cart' button and adjusts focus outlines for input fields.

Uploaded by

panamamary965
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

ADDITIONAL CSS

🧑‍💻
The Complete Digital Marketing Guide

/* Set primary color to black */


:root {
--primary-color: #000000 !important;
}

/* Make all buttons black with white text */


.woocommerce button,
.woocommerce [Link],
.woocommerce [Link],
.woocommerce .add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #review_form #submit {
background-color: var(--primary-color) !important;
color: #ffffff !important;
}

/* Light gray hover effect */


.woocommerce button:hover,
.woocommerce [Link]:hover,
.woocommerce [Link]:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #review_form #submit:hover {
background-color: #333333 !important;
}

/* Make cart product names black */


.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons .button,
.woocommerce-mini-cart__content .product-name a,
.woocommerce-mini-cart__content .cart_item a,
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
color: var(--primary-color) !important;
}
/* Remove "View Cart" button */
.woocommerce-mini-cart__buttons a:not(.checkout) {
display: none !important;
}

/* Remove red focus border */


input:focus,
textarea:focus,
select:focus {
outline: none !important;
border-color: #000000 !important;
}
/* Make the "X" in cart white */
.woocommerce-mini-cart__content .remove,
.woocommerce-cart-form .remove,
.woocommerce [Link] {
color: #ffffff !important;
background: none !important;
border: none !important;
font-size: 18px !important;
text-align: center !important;
}

/* Make WPForms submit button black */


.wpforms-submit {
background-color: #000000 !important;
color: #ffffff !important;
border: none !important;
}

/* Add hover effect */


.wpforms-submit:hover {
background-color: #333333 !important;
}

You might also like