Archived topic
Woocommerce CSS Styles
3 replies · Started by Alexander on February 22, 2022
Viewing posts 1–4 of 4
Hi,
1.
how to use css to display all Product previews in Same style? (Product ul li etc)
Every Product ul (s) (shop, related produkts) should display like on the homepage
2.
How to display in Woocoemerce Price and Warenkorb on right side like in Example
Thanks
alex
Hi Alex,
For #1: try this CSS:
@media (min-width:360px){
.wc-block-grid__product-image img,
.wc-product-image .inside-wc-product-image,
.inside-wc-product-image img {
height: auto !important;
width: 100% !important;
margin: 0 0 11px;
}
h2.woocommerce-loop-product__title {
font-family: Exo, sans-serif;
text-transform: uppercase;
font-size: 21px;
line-height: 1.2em;
font-weight: 700;
padding: 0;
margin: 0 0 11px !important;
}
.woocommerce ul.products li.product .price {
margin: 0 auto 12px !important;
font-size: .92em;
font-weight: 400;
}
ul.products li.type-product {
border-bottom: 16px solid transparent;
}
}For #2:
Try this:
@media (min-width:769px){
.woocommerce-product-gallery + .summary.entry-summary {
display: flex;
flex-wrap: wrap;
}
.woocommerce-product-gallery + .summary.entry-summary h1.product_title.entry-title {
flex: 1 0 60%;
}
.woocommerce-product-gallery + .summary.entry-summary .price {
flex: 1 0 40%;
text-align: right;
}
.woocommerce-product-gallery + .summary.entry-summary .woocommerce-product-details__short-description {
flex: 1 0 60%;
}
.woocommerce-product-gallery + .summary.entry-summary form.cart {
flex: 1 0 40%;
display: flex;
justify-content: flex-end;
}
.woocommerce-product-gallery + .summary.entry-summary .product_meta {
flex: 1 0 100%;
border-top: none;
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 0 0 30px 0;
text-align: right;
}
}Thanks
Works fine!
No problem. Let us know if you need further help.:D
This archived topic is closed to new replies.
