I tried both, it's not what I meant yet. Some things good now:
> The WooCommerce Product Title influences only the products on the carrousel at home.
> The size of the product info when clicked on a product however, is not changed > help me as its to small. Check 'Toner' on the left at: https://soluforyou.com/product/toner/ I want it bigger there (for all products).
> Then the pricing ON THE PRODUCT pages (not home) The following CSS is not working:
2. For the product pricing, this CSS will only work for the product prices on the home page and not on any other pages.
/* SHOP Price for prices on the homepage */.home.woocommerceul.productsli.product.material.price, .home.woocommerceul.productsli.product.price,
.home.woocommerceul.productsli.product.material.price.woocommerce-Price-amount {
font-size: 17px!important;
}
3. For the product prices on the product page, you can add this CSS and let us know if it helps.
/* SHOP Price for prices on product page */.single-product.woocommercediv.product.summaryp.price {
font-size: 14px;
}
Hi there!
How can I style the following (see screenshot)
1) The line width and the size of the circles (< solved)
2) the square line stroke smaller
3) On the right: that button as a pill
____update___
point 1 is solved with this code:
/* SHOP Price filter more elegant */
.wc-block-components-price-slider__range-input-wrapper:before{
background:transparent !important;
}
.wc-block-components-price-slider__range-input-progress{
height:2px !important;
top:-50% !important;
}
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb {
height:4px;
width:4px;
}
Hi there,
2) Use this CSS:
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{ border:1px solid black !important; }
3) Use this CSS:
.woocommerce .woocommerce-ordering select{ border-radius:50px !important; }
Cheers.
Noah.
Thanks, that worked perfectly!
And how can I style the prices and the quantities? Where in Salient is that? See screenshot:
Hi there,
Please try this css:
.woocommerce div.product .summary p.price {
font-size: 21px;
} .entry-summary .cart .quantity input.qty {
font-size: 17px;
}
Thanks.
Hi Judith, that worked well, but ofcourse changes everywhere.
> On a product page it looks great (what I wanted): https://soluforyou.com/product/eye-cream/
> But on the home page, in the carrousel, the prices are incredible small suddenly: https://soluforyou.com/
See screenshot. How can change the price size of ONLY the carrousel on home of the shop?
Hello again,
Thank you for getting back to us.
Try adding this CSS and let us know how that goes.
.home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, .home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount { font-size: 18px !important; }
Kind regards,
Hi Andrew, thanks. So now the prices on home look great, but the prices on the Product page seem unchanged
yes I deleted my cache.
How can I make the product page pricing now smaller?
https://soluforyou.com/product/eye-cream/
See screenshot, red square.
Also I like to make the product title bigger, see blue square. How do I change this?
Hello there,
Thank you for reaching out to us.
Try changing this in the theme option by going to salient > typography> nectar specific elements and changing this.
As for the price font size, add this into the Custom CSS box in your Salient Theme Options panel:
.single-product .woocommerce div.product .summary p.price { font-size: 18px; }
Thanks
I tried both, it's not what I meant yet. Some things good now:
> The WooCommerce Product Title influences only the products on the carrousel at home.
> The size of the product info when clicked on a product however, is not changed > help me as its to small. Check 'Toner' on the left at: https://soluforyou.com/product/toner/
I want it bigger there (for all products).
> Then the pricing ON THE PRODUCT pages (not home) The following CSS is not working:
/* SHOP Price smaller product page */
.home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price,
.home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount {
font-size: 17px !important;
}
/* SHOP Price test what is this */
.single-product .woocommerce div.product .summary p.price {
font-size: 14px;
}
Hello there,
Thank you for getting back to us.
1. You can add this CSS to change the font size of the product title on the product page.
.single-product div.product h1.product_title { font-size: 32px !important; }
2. For the product pricing, this CSS will only work for the product prices on the home page and not on any other pages.
/* SHOP Price for prices on the homepage */ .home .woocommerce ul.products li.product.material .price, .home .woocommerce ul.products li.product .price, .home .woocommerce ul.products li.product.material .price .woocommerce-Price-amount { font-size: 17px !important; }
3. For the product prices on the product page, you can add this CSS and let us know if it helps.
/* SHOP Price for prices on product page */ .single-product.woocommerce div.product .summary p.price { font-size: 14px; }
I hope that helps.
Kind regards,
Yes, that works! Now I have grip on how it's shown, thanks!!
Tip: put this in Salient...