QUICK SHOP and Opacity

[bestfitbybrazil]

Is there a way to lighten the quick shop opacity?  Its blocking the products when we hover them.  Or if there’s a way to size it down? to look like an eye like on this website:

https://www.carbon38.com/shop-all-activewear/accessories/water-bottles

Also, I think you showed me this before, but when you hover the products, the second flip photo gets shaded slightly. How do you remove the shading affect so that the second photo is just as bright as the first

[Harry]

Hi,

Please add below custom CSS code

.product-btn {
	background: rgba(255,255,255,.15);
}
.product-image a.db::before {
	display: none;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Somehow it just disappeared.  I’m not sure why.  I really don’t need it showing, however, i do want to know why it stopped showing in cased its being caused by something else.  as far as i know it should be still on and operating.  can you see why its not showing on product list at bottom of image. Last time you worked on it you lightened the opacity. but now its completely gone.  again, i don’t need it turned back on.  just want to make sure it its turned off or broken.

[Harry]

Hi,

This issue because z-index of product image is higher than z-index of quick-view button.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I CHANGED Z-INDEX HERE

.product-image .product-image-flip a { position: relative; z-index: 9999;}

.product-quickview .yith-wcbm-badge { display: none; }
.mfp-bg { z-index: 9000;}

TO THIS

.product-image .product-image-flip a { position: relative; z-index: 10000;}

.product-quickview .yith-wcbm-badge { display: none; }
.mfp-bg { z-index: 9999;}

AND IT STILL DOES NOT WORK.  it flickers when i hovered the bottom.  I changed z-index number back and turned it off, but wanted to know what is wrong here

[Harry]

Hi,

If you change the code. Your products’ images will over mobile menu.

Please change code to

.product-image .product-image-flip a {z-index: 1;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Ok i made the change:  Problem i’m having is that the wishlist hearts and percent discount don’t show on images. image is taking top layer.  here’s what i have.  The mobile still works good, but wishlist hearts and percent off badges aren’t showing. am i in the right area of code?

@media only screen and (max-width: 1024px) {
.btn-quickview, .product-image a.db::before { display: none;}
.product-btn {background: none !important;}
.yith-wcwl-add-to-wishlist ~ .product-btn { display: none;}
.product-image .product-image-flip a {z-index: 1;}
}

.product-image-flip .back {
position: absolute !important;
}

***Am i in the right area of code?  here is my entire CSS code:

@media only screen and (min-width: 75em) {
body.page:not(.home) .jas-container {
width: calc(100% – 30px);
}
}
.sidebar .widget.yith-woocommerce-ajax-product-filter ul li:before {
content: none;
}
.sidebar .widget.yith-woocommerce-ajax-product-filter ul li {
padding-left: 0;
}
.product-image-flip img {
width: 100%;
}
.countdown-time {
bottom: 105px;
}
.jas-my-account {
color: #fff;
}
.jas-icon-cart {
color: #fff;
}
.product-countdown .product-info {
white-space: normal;
width: calc(100% – 40px);
}
.jas-sc-instagram .item img {
object-fit: cover;
height: 210px;
width: 300px;
}
.header__search {
color: #fff;
}

.term-description p {
margin: 15px auto;
max-width: 1024px;
text-align: center;
width: 100%;
}

.jas-currency {
color: #6DFE0C;
}
.jas-my-account ul {
z-index: 1000;
background: rgba(0, 0, 0, 0.95);
}
.jas-currency ul {
z-index: 1000;
display: none;
}
.jas-currency:hover ul {
display: block;
}
.ubermenu .ubermenu-item.ubermenu-item-12999>.ubermenu-target:hover {
background: #fff;
}
.header-sticky .header__mid {
box-shadow: none;
background: none;
}
.jas-wc-single > .bgbl, .product_meta .posted_in, .product_meta .tagged_as{ display: none;}

.product-inner .product-image {
border: 1px solid #dedede;
}

@media only screen and (max-width: 736px) {
.jas-action .sf-open { display: block;}
}
.woocommerce-checkout .slick-dots {display: none;}

.archive #wowslider-container12 {max-width: 1280px;}
.archive #wowslider-container63 {max-width: 1024px;}
.archive #wowslider-container24 {max-width: 1024px;}
.archive #wowslider-container25 {max-width: 1024px;}
.archive #wowslider-container26 {max-width: 1024px;}
.archive #wowslider-container28 {max-width: 1024px;}
.archive #wowslider-container29 {max-width: 1024px;}
.archive #wowslider-container91 {max-width: 1024px;}
.archive #wowslider-container114 {max-width: 1024px;}
.archive #wowslider-container41 {max-width: 1024px;}
.archive #wowslider-container49 {max-width: 1024px;}
.archive #wowslider-container77 {max-width: 1024px;}
.archive #wowslider-container67 {max-width: 1110px;}
.archive #wowslider-container74 {max-width: 1024px;}
.archive #wowslider-container125 {max-width: 1024px;}
.archive #wowslider-container128 {max-width: 1024px;}
.archive #wowslider-container98 {max-width: 1024px;}
.archive #wowslider-container100 {max-width: 1024px;}
.archive #wowslider-container116 {max-width: 1024px;}
.archive #wowslider-container121 {max-width: 1024px;}
.product-image:hover a .container-image-and-badge {opacity: 0; visibility: hidden;}
.product-image:hover .product-image-flip .container-image-and-badge a.back {opacity: 1; visibility: visible;}
.product-image .product-image-flip > .container-image-and-badge {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.product-btn {
top: auto;
bottom: -50px;
left: 0;
-webkit-transform: translate(0,0);
transform: translate(0, 0);
width: 100%;
background: rgba(255,255,255,.85);
}
.product-image:hover .product-btn {
top: auto;
bottom: 25px;
}
.btn-quickview.cd.br__40.pl__25.pr__25.bgw.tc.dib {
background: none;
text-transform: uppercase;
color: #222;
}

@media screen and (max-width: 800px) {
.product-btn {background: none;}
}

.product-image .yith-wcwl-add-button a {
opacity: 1;
visibility: visible;
background: #ffccff;
padding: 4px 2px 3px;
}

.product-quickview .yith-wcbm-badge { display: none; }
.mfp-bg { z-index: 9999;}

.wc-col-switch.flex::before {
content: “VIEW”;
margin-right: 10px;
}

.page-numbers {
margin: 6px 0;
}

.page-numbers li {
float: left;
margin: 0 1px 0 0;
color: #fff;
border: none;
padding: 0;
border-radius: 0;
}
.page-numbers li a,
.page-numbers li span {
color: #fff !important;
background: #222;
padding: 5px 12px;
}
.page-numbers li a:hover,
.page-numbers li span.current {
background: #e640e6;
}

.yith-woocommerce-ajax-product-filter.with-checkbox ul {
list-style-type: none;
padding: 10px !important;
border: 1px solid #ddd;
box-shadow: 5px 10px #888888;
}

.woocommerce ul.products li.product .price {
font-size: 14px;
}

@media only screen and (min-width: 736px) { .filter-trigger {display: none;}}

.filter-trigger .fa-sliders::before {
content: “\f002”;
}

@media only screen and (min-width: 75em) {
body.woocommerce-checkout .jas-container, body.woocommerce-cart .jas-container {
width: 73.125rem !important;
}
}
.term-description {display: block;}

@media only screen and (max-width: 1024px) {
.btn-quickview, .product-image a.db::before { display: none;}
.product-btn {background: none !important;}
.yith-wcwl-add-to-wishlist ~ .product-btn { display: none;}
.product-image .product-image-flip a {z-index: 1;}
}

.product-image-flip .back {
position: absolute !important;
}

@media only screen and (max-width: 736px) { .jas-my-account {
display: block;
}
.jas-action > * {
padding: 0 2px;
}
}
.is-color .swatch__value {
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 0;
}
.is-color .swatch__list–item {
border-radius: 0;
}

.product-btn {
background: rgba(255,255,255,.15);
}
.product-image a.db::before {
display: none;
}

.swatch .swatch__list–item.is-selected .swatch__tooltip {
top: -33px;
opacity: 0;
visibility: hidden;
}

.menu-opened .jas-canvas-menu {
background: #bb1e39;
}

.ubermenu-responsive-toggle .fa{
float:right;
margin:0;
font-size:20px;
padding:5px 0;
}

.product-image .product-image-flip a {
position: relative;
z-index: 99;
}

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.product-image .yith-wcwl-add-to-wishlist {
	z-index: 100;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Ok thanks that worked.  but the sale discount badge isn’t showing either.

[Harry]

Hi,

Please add below code

.product-image .product-image-flip a {
	z-index: 1;
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts