Skip to content

Instantly share code, notes, and snippets.

@paaljoachim

paaljoachim/Gullhuset WooCommerce Custom Styles.css

Created September 10, 2025 10:20
Show Gist options
  • Save paaljoachim/fd936c42b0d4b4f7332acea7a249ac4a to your computer and use it in GitHub Desktop.
Save paaljoachim/fd936c42b0d4b4f7332acea7a249ac4a to your computer and use it in GitHub Desktop.
Download ZIP
Gullhuset code from Lovable - CSS styles to improve the products cards
Raw
Gullhuset WooCommerce Custom Styles.css
/**
* Gullhuset WooCommerce Custom Styles
* Applies beautiful styling to default WooCommerce elements
* Add this CSS to Appearance > Customize > Additional CSS or your theme's style.css
*/
/* Apply styles when our custom class is present or on WooCommerce pages */
.gullhuset-styling-active .woocommerce ul.products,
.woocommerce.gullhuset-wc-products-wrapper ul.products,
.woocommerce ul.products.gullhuset-products {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding: 2rem;
margin: 0 auto;
max-width: 1200px;
}
/* Product items */
.gullhuset-styling-active .woocommerce ul.products li.product,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product,
.woocommerce ul.products.gullhuset-products li.product {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #f3f4f6;
width: 300px;
flex: 0 0 300px;
text-align: center;
}
.gullhuset-styling-active .woocommerce ul.products li.product:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover,
.woocommerce ul.products.gullhuset-products li.product:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: #e5e7eb;
}
/* Product image wrapper */
.gullhuset-styling-active .woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products.gullhuset-products li.product .woocommerce-loop-product__link {
display: block;
text-decoration: none;
}
/* Product images */
.gullhuset-styling-active .woocommerce ul.products li.product img,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product img,
.woocommerce ul.products.gullhuset-products li.product img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
border-radius: 0;
}
.gullhuset-styling-active .woocommerce ul.products li.product:hover img,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover img,
.woocommerce ul.products.gullhuset-products li.product:hover img {
transform: scale(1.05);
}
/* Sale badges */
.gullhuset-styling-active .woocommerce span.onsale,
.woocommerce.gullhuset-wc-products-wrapper span.onsale,
.woocommerce ul.products.gullhuset-products span.onsale {
background: #ef4444;
color: #ffffff;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
min-width: auto;
min-height: auto;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.025em;
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
}
/* Product titles */
.gullhuset-styling-active .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products.gullhuset-products li.product .woocommerce-loop-product__title {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin: 1rem 1.25rem 0.5rem;
line-height: 1.4;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8rem;
transition: color 0.3s ease;
}
.gullhuset-styling-active .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products.gullhuset-products li.product:hover .woocommerce-loop-product__title {
color: #d4af37;
}
/* Product prices */
.gullhuset-styling-active .woocommerce ul.products li.product .price,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price,
.woocommerce ul.products.gullhuset-products li.product .price {
margin: 0 1.25rem 1.25rem;
font-size: 1.25rem;
font-weight: 700;
color: #d4af37;
}
.gullhuset-styling-active .woocommerce ul.products li.product .price del,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price del,
.woocommerce ul.products.gullhuset-products li.product .price del {
color: #9ca3af;
font-weight: 500;
font-size: 0.9em;
}
.gullhuset-styling-active .woocommerce ul.products li.product .price ins,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price ins,
.woocommerce ul.products.gullhuset-products li.product .price ins {
text-decoration: none;
font-weight: 700;
}
/* Add to cart buttons */
.gullhuset-styling-active .woocommerce ul.products li.product .add_to_cart_button,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_simple,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_variable,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .add_to_cart_button,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_simple,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_variable,
.woocommerce ul.products.gullhuset-products li.product .add_to_cart_button,
.woocommerce ul.products.gullhuset-products li.product .product_type_simple,
.woocommerce ul.products.gullhuset-products li.product .product_type_variable {
background: linear-gradient(135deg, #d4af37, #f0c674);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;
font-size: 13px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-block;
margin: 0 0 1.25rem 0;
width: auto;
text-align: center;
box-shadow: 0 8px 15px rgba(212, 175, 55, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0 !important;
transform: translateY(10px) !important;
}
/* Show button on product hover */
.gullhuset-styling-active .woocommerce ul.products li.product:hover .add_to_cart_button,
.gullhuset-styling-active .woocommerce ul.products li.product:hover .product_type_simple,
.gullhuset-styling-active .woocommerce ul.products li.product:hover .product_type_variable,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .add_to_cart_button,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .product_type_simple,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .product_type_variable,
.woocommerce ul.products.gullhuset-products li.product:hover .add_to_cart_button,
.woocommerce ul.products.gullhuset-products li.product:hover .product_type_simple,
.woocommerce ul.products.gullhuset-products li.product:hover .product_type_variable {
opacity: 1 !important;
transform: translateY(0) !important;
}
.gullhuset-styling-active .woocommerce ul.products li.product .add_to_cart_button:hover,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_simple:hover,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .add_to_cart_button:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_simple:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_variable:hover,
.woocommerce ul.products.gullhuset-products li.product .add_to_cart_button:hover,
.woocommerce ul.products.gullhuset-products li.product .product_type_simple:hover,
.woocommerce ul.products.gullhuset-products li.product .product_type_variable:hover {
background: linear-gradient(135deg, #b8941f, #d4af37);
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
color: #ffffff;
text-decoration: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.gullhuset-styling-active .woocommerce ul.products,
.woocommerce.gullhuset-wc-products-wrapper ul.products,
.woocommerce ul.products.gullhuset-products {
gap: 1rem;
padding: 1rem;
}
.gullhuset-styling-active .woocommerce ul.products li.product,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product,
.woocommerce ul.products.gullhuset-products li.product {
width: 280px;
flex: 0 0 280px;
}
}
@paaljoachim
Copy link
Author

An update or the same.... not sure.

`/**

  • Gullhuset WooCommerce Custom Styles
  • Applies beautiful styling to default WooCommerce elements
  • Add this CSS to Appearance > Customize > Additional CSS or your theme's style.css
    */

/* Apply styles when our custom class is present or on WooCommerce pages */
.gullhuset-styling-active .woocommerce ul.products,
.woocommerce.gullhuset-wc-products-wrapper ul.products,
.woocommerce ul.products.gullhuset-products {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding: 2rem;
margin: 0 auto;
max-width: 1200px;
}

/* Product items */
.gullhuset-styling-active .woocommerce ul.products li.product,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product,
.woocommerce ul.products.gullhuset-products li.product {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #f3f4f6;
width: 300px;
flex: 0 0 300px;
text-align: center;
}

.gullhuset-styling-active .woocommerce ul.products li.product:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover,
.woocommerce ul.products.gullhuset-products li.product:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-color: #e5e7eb;
}

/* Product image wrapper */
.gullhuset-styling-active .woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products.gullhuset-products li.product .woocommerce-loop-product__link {
display: block;
text-decoration: none;
}

/* Product images */
.gullhuset-styling-active .woocommerce ul.products li.product img,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product img,
.woocommerce ul.products.gullhuset-products li.product img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
border-radius: 0;
}

.gullhuset-styling-active .woocommerce ul.products li.product:hover img,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover img,
.woocommerce ul.products.gullhuset-products li.product:hover img {
transform: scale(1.05);
}

/* Sale badges */
.gullhuset-styling-active .woocommerce span.onsale,
.woocommerce.gullhuset-wc-products-wrapper span.onsale,
.woocommerce ul.products.gullhuset-products span.onsale {
background: #ef4444;
color: #ffffff;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
min-width: auto;
min-height: auto;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.025em;
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
}

/* Product titles */
.gullhuset-styling-active .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products.gullhuset-products li.product .woocommerce-loop-product__title {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin: 1rem 1.25rem 0.5rem;
line-height: 1.4;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8rem;
transition: color 0.3s ease;
}

.gullhuset-styling-active .woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products.gullhuset-products li.product:hover .woocommerce-loop-product__title {
color: #d4af37;
}

/* Product prices */
.gullhuset-styling-active .woocommerce ul.products li.product .price,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price,
.woocommerce ul.products.gullhuset-products li.product .price {
margin: 0 1.25rem 1.25rem;
font-size: 1.25rem;
font-weight: 700;
color: #d4af37;
}

.gullhuset-styling-active .woocommerce ul.products li.product .price del,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price del,
.woocommerce ul.products.gullhuset-products li.product .price del {
color: #9ca3af;
font-weight: 500;
font-size: 0.9em;
}

.gullhuset-styling-active .woocommerce ul.products li.product .price ins,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .price ins,
.woocommerce ul.products.gullhuset-products li.product .price ins {
text-decoration: none;
font-weight: 700;
}

/* Add to cart buttons */
.gullhuset-styling-active .woocommerce ul.products li.product .add_to_cart_button,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_simple,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_variable,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .add_to_cart_button,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_simple,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_variable,
.woocommerce ul.products.gullhuset-products li.product .add_to_cart_button,
.woocommerce ul.products.gullhuset-products li.product .product_type_simple,
.woocommerce ul.products.gullhuset-products li.product .product_type_variable {
background: linear-gradient(135deg, #d4af37, #f0c674);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 20px;
font-weight: 600;
font-size: 13px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-block;
margin: 0 0 1.25rem 0;
width: auto;
text-align: center;
box-shadow: 0 8px 15px rgba(212, 175, 55, 0.3);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0 !important;
transform: translateY(10px) !important;
}

/* Show button on product hover */
.gullhuset-styling-active .woocommerce ul.products li.product:hover .add_to_cart_button,
.gullhuset-styling-active .woocommerce ul.products li.product:hover .product_type_simple,
.gullhuset-styling-active .woocommerce ul.products li.product:hover .product_type_variable,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .add_to_cart_button,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .product_type_simple,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product:hover .product_type_variable,
.woocommerce ul.products.gullhuset-products li.product:hover .add_to_cart_button,
.woocommerce ul.products.gullhuset-products li.product:hover .product_type_simple,
.woocommerce ul.products.gullhuset-products li.product:hover .product_type_variable {
opacity: 1 !important;
transform: translateY(0) !important;
}

.gullhuset-styling-active .woocommerce ul.products li.product .add_to_cart_button:hover,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_simple:hover,
.gullhuset-styling-active .woocommerce ul.products li.product .product_type_variable:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .add_to_cart_button:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_simple:hover,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product .product_type_variable:hover,
.woocommerce ul.products.gullhuset-products li.product .add_to_cart_button:hover,
.woocommerce ul.products.gullhuset-products li.product .product_type_simple:hover,
.woocommerce ul.products.gullhuset-products li.product .product_type_variable:hover {
background: linear-gradient(135deg, #b8941f, #d4af37);
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
color: #ffffff;
text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
.gullhuset-styling-active .woocommerce ul.products,
.woocommerce.gullhuset-wc-products-wrapper ul.products,
.woocommerce ul.products.gullhuset-products {
gap: 1rem;
padding: 1rem;
}

.gullhuset-styling-active .woocommerce ul.products li.product,
.woocommerce.gullhuset-wc-products-wrapper ul.products li.product,
.woocommerce ul.products.gullhuset-products li.product {
    width: 280px;
    flex: 0 0 280px;
}

}`

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