I will keep both current code + new code, so it will run on current site + after update.
I also write comments before the code (the browser will ignore it when running the code), so you know what the code will do, and can easily adjust it in the future.
REMEMBE TO SAVE A COPY of all code somewhere, before doing anything, just for backup
#1. Current code
I also see font-color code doesn’t run, so I changed it to correct code in new code (correct code should be color, not font-color). Font-color will set breadcrumb to black (currently code doesn’t run so you will see it is gray color). You can check it here
https://www.ahoyvisualart.com/store/p/into-the-wide-new-world-7n25n-642tz
nav.ProductItem-nav * {
font-family: "Abel" !important;
font-size: 14px !important;
font-weight: 500 !important;
font-color: rgb(0, 0, 0) !important;
line-height: 1em !important;
letter-spacing: 1px;
text-transform: uppercase !important;
}
New code
/* change product detail breadcrumbs style */
nav.ProductItem-nav *, a.product-nav-breadcrumb-link {
font-family: "Abel" !important;
font-size: 14px !important;
font-weight: 500 !important;
color: rgb(0, 0, 0) !important;
line-height: 1em !important;
letter-spacing: 1px;
text-transform: uppercase !important;
}
#2. Current code
.product-quantity-input input {
font-size: 15px !important;
}
New code
/* change quantity input text size */
.product-quantity-input input, .product-quantity-input-wrapper input {
font-size: 15px !important;
}
#3. Current code
.ProductItem-details .product-quantity-input input {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
New code
/* reduce quantity input height */
.ProductItem-details .product-quantity-input input, .product-quantity-input-wrapper input {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#4. Current code
This code seems to also reduce Variant Dropdown height. But I don’t see you using Variant Product on the site. Do you still need update code?
.product-details .variant-select-wrapper[data-text] {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
This is new code
/* reduce variant dropdown height */
.product-details .variant-select-wrapper[data-text] {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.product-detail .product-meta .product-variants .variant-select-wrapper {
min-height: unset !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
#5. Current code
This code should work after update without update. This code will change Add to Cart button: width, height
.tweak-product-basic-item-add-to-cart-inline .ProductItem .ProductItem-quantity-add-to-cart, .sqs-add-to-cart-button-wrapper {
width: 100% !important;
.sqs-add-to-cart-button {
width: auto !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
height: auto !important;
}
}
#6. You have duplicate code in Custom CSS.
Anyway, it doesn’t affect the website, you can keep both, to avoid mistakes in the process of deleting code that can break other codes.
#7. Current code
h2.ProductItem-related-label {
font-size: 17px !important;
font-weight: 600 !important;
font-color: rgb(143, 143, 143) !important;
}
New code
Similar #1, font-color is incorrect, it should be color – Currently font-color doesn’t run so related label is Black color, with new code, it will change to rgb(143,143,143) color.
/* Related Products Heading */
h2.ProductItem-related-label, h2.product-related-products-title {
font-size: 17px !important;
font-weight: 600 !important;
color: rgb(143, 143, 143) !important;
}
#8. Current code
h2.ProductItem-related-label {
visibility: hidden;
}
h2.ProductItem-related-label:before {
content: "𖤣.𖥧.𖡼.⚘ Related items ...";
visibility: visible;
}
New code
/* Rename Related Products Heading */
h2.ProductItem-related-label, h2.product-related-products-title {
visibility: hidden;
}
h2.ProductItem-related-label:before, h2.product-related-products-title:before {
content: "𖤣.𖥧.𖡼.⚘ Related items ...";
visibility: visible;
}
#9. Current Code
h2.ProductItem-related-label {
padding-top: 5px;
padding-bottom: 1px;
}
New code
/* Space on top bottom of Related Products Heading */
h2.ProductItem-related-label, h2.product-related-products-title {
padding-top: 5px;
padding-bottom: 1px;
}
#10. Current code
@media screen and (min-width:768px) {
.ProductItem-relatedProducts.ProductList.clear .list-grid {
grid-template-columns: repeat(5,1fr);
}
}
New code
/* Related Products: set 5 items 1 row on Desktop */
@media screen and (min-width:768px) {
.ProductItem-relatedProducts.ProductList.clear .list-grid, div.product-related-products .product-list-container {
grid-template-columns: repeat(5,1fr);
}
}
#11. Duplicate code
#12. Current code
I see this code is the same as the code for version 7.0. I think this code does nothing on your site now. So no need update code
#section[data-section-id="67b034a951aadd0d2f40b123"]
.ProductList-filter-list-item {
display: none !important;
}
#13. Current code
.products.collection-content-wrapper .grid-item.tag-hide {
display : none;
}
New code
/* Hide products with tag: hide */
.products.collection-content-wrapper .grid-item.tag-hide, .product-list .product-list-item.tag-hide {
display : none;
}
#14. Current code
.product-details .pdp-product-add-ons .add-on-card {background:#ffffff;
border:none; padding-bottom: 0.02%; padding-top: 2%}
New code
/* Add ons products: remove lines around product item, set white background, set top bottom space */
.product-details .pdp-product-add-ons .add-on-card, .product-detail .product-meta .product-add-ons .add-on-card {
background:#ffffff;
border:none;
padding-bottom: 0.02%;
padding-top: 2%
}
#15. Current code
.product-details .pdp-product-add-ons .add-on-card:hover {background:#ffffff}
.product-details .pdp-product-add-ons .add-on-card .add-on-thumbnail{border-radius:50%; transform:Scale(1.0)}
New code
/* set white background on hover add ons */
.product-details .pdp-product-add-ons .add-on-card:hover, .product-detail .product-meta .product-add-ons .add-on-card:hover {
background:#ffffff;
}
/* make add ons product thumbnail circle */
.product-details .pdp-product-add-ons .add-on-card .add-on-thumbnail, .product-detail .product-meta .product-add-ons .add-on-thumbnail {
border-radius:50%; transform:Scale(1.0);
}
#16. Current code
.product-details .pdp-product-add-ons .add-on-details .add-on-title{
font-size: 15px !important;
font-weight: 550 !important;
font-color: rgb(143, 143, 143) !important; hover{
background-color: blue;
color: white;
}text-transform: uppercase; letter-spacing: 0.03rem;
;margin-bottom:-5px!important;
}
New code
/* Add ons product title style */
.product-details .pdp-product-add-ons .add-on-details .add-on-title, .product-detail .product-meta .product-add-ons .add-on-details .add-on-title {
font-size: 15px !important;
font-weight: 550 !important;
color: #8f8f8f !important;
text-transform: uppercase;
letter-spacing: .03rem;
margin-bottom: -5px !important
}
/* Add ons product title on hover */
.product-details .pdp-product-add-ons .add-on-details .add-on-title:hover, .product-detail .product-meta .product-add-ons .add-on-details .add-on-title:hover {
background-color: blue;
color: #fff !important;
}
With #16, I see your code is incorrect (hover code) so it doesn’t work now. With new code, it will be like this.
If it is not what you want, you can describe desired style, I will give new code
