Skip to content

Instantly share code, notes, and snippets.

@AchalJ
Created December 23, 2021 09:57
Show Gist options
  • Save AchalJ/b3540bdc3c65b47214e259bae51eb888 to your computer and use it in GitHub Desktop.
Save AchalJ/b3540bdc3c65b47214e259bae51eb888 to your computer and use it in GitHub Desktop.
WooPack Products Grid - Custom Layout with Hover Style
.woopack-product-grid {
overflow: visible;
}
.woopack-product-image {
position: relative;
padding: 0;
border: 0;
}
.woopack-product-image a {
display: block;
}
.woopack-product-image a img {
border: 0 !important;
}
.woopack-product-content {
padding: 0;
}
.woopack-product-title {
margin: 0;
padding: 0 !important;
}
.woopack-product-rating .star-rating {
margin-left: auto;
margin-right: auto;
}
.woopack-product-meta {
padding: 0;
margin-top: 10px;
}
.woopack-product-meta a {
text-decoration: none;
}
.woopack-product-meta,
.woopack-product-meta a {
font-size: 12px;
}
.woopack-product-action {
margin-top: 0 !important;
padding-bottom: 20px;
position: absolute;
width: 100%;
background: #fff;
transform: translateY(-100%);
opacity: 0;
transition: all 0.3s ease;
}
.woopack-product-grid:hover .woopack-product-action {
transform: translateY(0%);
opacity: 1;
}
.woopack-product-action .woopack-qty-input,
.woopack-product-action .variations_form .quantity {
display: inline-block;
margin-right: 2px;
}
.woopack-product-action.woopack-qty-custom .quantity {
border: 1px solid #ddd;
}
.woopack-product-action.woopack-qty-custom .quantity input.qty {
border: 1px solid #ddd;
border-top: 0;
border-bottom: 0;
background: none;
border-radius: 0;
}
.woopack-product-action form > table {
margin-left: auto;
margin-right: auto;
text-align: left;
}
.woopack-product-action form > table td.value {
padding: 2px 0px;
}
.woopack-product-action form > table td.label {
color: inherit;
text-transform: capitalize;
}
.woopack-product-action form > table .reset_variations {
margin-left: 5px;
}
.woopack-product-action a.button {
background-color: #fb2b69;
border: none;
box-shadow: none;
}
.woopack-product-action a.button:hover {
background-color: #474747;
}
.woopack-product-quick-view {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
font-size: 13px;
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
opacity: 0;
transition: all 0.3s;
}
.woopack-product-grid:hover .woopack-product-quick-view,
.woopack-product-carousel:hover .woopack-product-quick-view {
opacity: 1;
}
.woopack-product-action .added_to_cart {
display: none !important;
}
.woopack-product-action a.button.loading span.fas,
.woopack-product-action a.button.added span.fas {
display: none;
}
.woopack-product-action a.button:after {
margin-left: 0;
right: 0;
left: 0;
}
.woopack-product-quick-icon + .woopack-quick-view-text {
margin-left: 10px;
}
[wpbb-if post:featured_image]
<div class="woopack-product-image">
[wpbb post:woocommerce_sale_flash]
[wpbb post:featured_image size="large" display="tag" linked="yes"]
[wpbb post:woopack_quick_view_button icon='fas fa-eye' text='Quick View']
</div>
[/wpbb-if]
<div class="woopack-product-content">
<h3 class="woopack-product-title">[wpbb post:link text="title"]</h3>
<div class="woopack-product-rating">
[wpbb post:woopack_product_rating show_count='yes' text_singular='customer review' text_plural='customer reviews']
</div>
<div class="woopack-product-price">
[wpbb post:woocommerce_product_price]
</div>
[wpbb post:woopack_add_to_cart_button text='<span class="fas fa-shopping-cart"></span>' qty_input='before_button' qty_style='custom' variation_fields='no']
</div>
@mkenzie87
Copy link

Seems like my code is having issues https://bloomingrace.flywheelsites.com/shop/ any insight?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment