Archived topic
Change Colors
11 replies · Started by Forum User on September 20, 2021
https://www.tryhypnosisnow.com/hypnosis-downloads/product/fear-of-death/
How do I change the font color for “Description”, “Categories”, and “Tags” which are all currently red in the page above?
Please add a download to the cart and then visit https://www.tryhypnosisnow.com/hypnosis-downloads/cart/
How do I change the color of the “Update Cart" BOX from purple to something else?
How do I change the color of the “Update Cart” FONT?
Hi there,
Can you temporarily disable the site's caching plugin and let us check? So we can trace back the origin of how is color was assigned and point where to change it.
Let us know. :)
I disabled the caching plugin.
I've tried checking the page and Autoptimize looks like its still enabled - https://share.getcloudapp.com/NQuYn9AO
Can you confirm if its finally disabled?
While waiting: By default, the color of links are normally set on Appearance > Customize > Colors. You can try setting it up here.
But it won't work if you already have a custom CSS that styles the links. In this case, you'll have to find the custom CSS responsible for its color and modify it from there. :)
Autoptimize is disabled
I already tried setting it up here Appearance > Customize > Colors
This is the Additional CSS on the site:
/* GeneratePress Site CSS */ /*-- Navigation --*/
.main-navigation {
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .2);
}
.navigation-search {
background-color: #fff;
}
/*--- Off Canvas Panel ---*/
/* Off Canvas Panel Widget styling */
.slideout-widget.woocommerce ul li {
line-height: 2em;
display: grid;
grid-template-columns: 0 90% 10%;
}
.slideout-navigation .slideout-widget ul.product-categories li {
grid-template-columns: 90% 10%;
}
.slideout-widget:not(:first-of-type) {
border-top: 1px solid #ccc;
padding-top: 2em;
}
/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/
/* Stacked Gallery for desktop and sticky summary */
@media (min-width: 768px) {
.woocommerce-product-gallery {
display: none;
}
.woo-sumamry-wrap {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: auto;
margin-bottom: 80px;
}
.woo-gallery-stack {
grid-column: 1;
grid-row: 1 / 3;
}
.woo-gallery-stack img {
margin-bottom: 20px;
}
.woocommerce-tabs {
grid-column: 1;
}
.woocommerce div.product div.summary {
grid-column: 2;
grid-row: 1;
margin-left: 80px;
position: -webkit-sticky;
position: sticky;
top: 105px;
bottom: 100px;
padding-right: 80px;
}
.single-product span.onsale {
position: absolute;
top: 0;
}
}
/* Add some space above price tag */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product p.price ins {
margin-top: 10px;
}
/* Breadcrumn and post meta styling */
.product_meta>span,
.woocommerce-breadcrumb {
text-transform: uppercase;
font-size: 12px !important;
font-weight: 500;
}
.woocommerce div.product div.summary .woocommerce-breadcrumb {
margin-bottom: 40px;
}
/*--- SHOP AND ARCHIVE ---*/
.woocommerce ul.products li.product.sales-flash-overlay .onsale {
left: 0;
right: auto;
}
.woocommerce-ordering:after {
right: 25px;
top: 8px;
}
/* Position Filter breadcrumb results and ordering */
.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
padding: 10px 0;
margin-right: 20px;
float: left;
font-size: 14px !important;
font-weight: 500;
line-height: 20px;
}
.woo-filter-toggle a {
color: #000;
}
.main-navigation ul li.slideout-toggle {
display: none !important;
}
.woocommerce .woocommerce-result-count {
float: right;
margin-right: 20px;
}
.woocommerce-ordering select {
text-transform: uppercase;
max-width: 200px;
border: 0;
}
.woo-filter-toggle a:before {
padding-right: 2px;
position: relative;
top: 1px;
}
/* Woo category nav */
.woo-cat-nav {
list-style-type: none;
margin-left: 0;
display: flex;
flex-wrap: wrap;
margin-bottom: 80px;
}
.woo-cat-nav li {
padding: 5px 0;
margin: 0 10px;
border-bottom: 1px solid #ccc;
font-size: 0.95em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.woocommerce .woocommerce-result-count {
display: none;
}
#wc-column-container .product {
margin-bottom: 2em;
}
.woo-cat-nav {
margin-bottom: 40px;
}
h1.woocommerce-products-header__title,
.term-description {
text-align: center;
}
.woo-cat-nav {
justify-content: center;
}
}
/* Shop Product Styling */
/* Reduce Grid Gap */
.wc-columns-container .products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
grid-gap: 20px;
}
/* Remove add to cart styling */
.woocommerce ul.products li.product a.button {
padding: 5px 0;
color: inherit;
background-color: #ffffff;
text-transform: uppercase;
}
/* Transform add to cart and pricing on hover */
@media (min-width: 768px) {
.woocommerce ul.products li.product a.button {
transform: translateY(0);
width: 100%;
opacity: 0;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover a.button,
.woocommerce ul.products li.product:hover .price {
transform: translateY(calc(-100% - 10px));
opacity: 1;
}
.woocommerce ul.products li.product .price {
opacity: 1;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover .price {
opacity: 0;
transform: translateY(calc(-100% - 10px));
}
}
/* Woocommerce Tabs */
.woocommerce-tabs h2 {
display: none;
}
@media (min-width: 768px) {
.slideout-navigation .main-nav {
display: none;
}
}
/* Category Shortcode Hover effect */
.product-category .wc-product-image .inside-wc-product-image {
overflow: hidden;
}
.product-category .wc-product-image img {
transition: all 0.3s;
}
.product-category .wc-product-image:hover img {
transform: scale(1.1);
transition: all 0.3s;
}
.site-logo, img.header-image {
width: 90%; height: 50%;
}
#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}
.mobile-site-logo img.header-image {
width: 100%;
}
/* End GeneratePress Site CSS */
Hi there,
if you want to just change the term links of the product meta you would add this CSS:
.product_meta a {
color: #000;
}
The Tab Description colors can be changed in Customizer > Colors > Woocommerce.
The Update Cart button color colors you see are the disabled Colors. Ie. its greyed out until you change the cart values.
Do you want a solid color even when the Cart Update is disabled ? And what change do you want to make to the font ?
I made some of the changes you suggested. Thank you.
Is there a way to disable the quantity option in the cart? as nobody orders more than 1 of the same download anyway. If that's possible, I will not need the update cart box and would want to disable that as well, if possible?
If you edit the Product and under Inventory there is an option: Sold Individually - enable that and it will remove the qty buttons in the single product and for that product in the cart.
If you want to apply that to ALL your products then Select All the products in the Product list, and select: Bulk Actions > Edit > Apply where you have the option to set Sold Individually
I made those changes as well. Thank you.
Is there a way to disable the update cart box? If not, can I make the box white so it is not visible?
Try adding this CSS to remove the update cart button:
.woocommerce .cart button[name="update_cart"] {
display: none;
}
That worked. Thank you for all your help!
You're welcome