Skip to content

Instantly share code, notes, and snippets.

@thetwopct
Created April 21, 2019 06:17
Show Gist options
  • Save thetwopct/545c08a1b842f47e4a2f34b0949e9605 to your computer and use it in GitHub Desktop.
Save thetwopct/545c08a1b842f47e4a2f34b0949e9605 to your computer and use it in GitHub Desktop.
Custom woocommerce-product-gallery__trigger (zoom lightbox icon)
// add text before
.woocommerce-product-gallery__trigger:before {
content: "Click to zoom ";
// set both font sizes
font-size: 13px;
font-size: 0.815rem;
letter-spacing: normal;
color: red;
font-weight: 500;
}
// add image after
.woocommerce-product-gallery__trigger:after {
background: url('https://via.placeholder.com/20x20/d9d9d9/000000') no-repeat;
z-index: 99;
width: 15px;
height: 15px;
content: "";
display: block;
float: right;
margin: 0 6px 0 6px;
}
// hide the dumb as fuck zoom emoji and position
.woocommerce-product-gallery__trigger {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
position: absolute;
z-index: 99;
// position the whole thing
top: 6px;
right: 0px;
@media (min-width: 768px) {
top: 20px;
right: calc(60px + 20px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment