How do I set this up? > Already got Whoocommerce and products running. > See www.soluforyou.com > But when I choose 'Salient templates," I don't see the corresponding visual system you have.
Is there a Salient setting that allows on the left bar a filter system? We need this. Thanks for helping us out.
Update: are you using a custom developed Widgets here, or a simple plugin like "YITH WooCommerce Ajax Product Filter"? Or is is a simple Salient setting somewhere?
Either way it's all new to me but I need to deliver this to my client. As you site shows it, it is suggested Salient can offer his.
Thanks but I'm afraid your solution will completely wipe out my entire current design. Good to make it clear again. I am already busy with my site and don't want to delete my progress.
Update: just learned you need to add this as a widget.
> Now it has the price filter up and running. > And a size filter up and running
Question 1 But How do I style this? For example, font size
> Font size The following CSS does nothing: .woocommerce.widget_price_filter .price_slider_amount .price_label {
font-size: 8px !important; } __
Question 2 Also I want the slider like yours, with black filled dots instead of open dots like now
Question 3 I see it works, but it's slow. Every time I click on something the whole site has to reload. But in your site it's flashy fast. How can I get the same result?
To clarify, the demo site here https://themenectar.com/salient/ecommerce-robust/shop/ uses an earlier version of WordPress without the blocks, just the regular older widgets added to the woocommerce sidebar the theme provides. That is the reason there are styling differences.
1) To change the font size of the prices use the following CSS:
Now it picks the prices. But I don;t want that. I need "Filter by price" and "Filter by attribute" to be smaller, or maybe even a lighter weight font. How can I change this? Your theme has no option for this, and I never can discover it with inspect element
Hi, I am trying to recreate your live shop (but then tweaked in our branding.)
You have a site live here: https://themenectar.com/salient/ecommerce-robust/shop/
How do I set this up?
> Already got Whoocommerce and products running.
> See www.soluforyou.com
> But when I choose 'Salient templates," I don't see the corresponding visual system you have.
Is there a Salient setting that allows on the left bar a filter system? We need this.
Thanks for helping us out.
Update: are you using a custom developed Widgets here, or a simple plugin like "YITH WooCommerce Ajax Product Filter"? Or is is a simple Salient setting somewhere?
Either way it's all new to me but I need to deliver this to my client.
As you site shows it, it is suggested Salient can offer his.
Attached files: Screenshot 2023-06-25 at 09.44.56.jpg
Screenshot 2023-06-25 at 09.45.32.jpg
Hello there,
Thank you for reaching out to us.
I'd recommend you try and import the Ecommerce-Robust demo and use the shop page in the demo to showcase your products.
Please try this and let us know how that goes.
Kind regards,
Hi Andrew,
Thanks but I'm afraid your solution will completely wipe out my entire current design.
Good to make it clear again. I am already busy with my site and don't want to delete my progress.
Please visit my page for one second and react within my context;
http://soluforyou.com/shop/
Update: just learned you need to add this as a widget.
> Now it has the price filter up and running.
> And a size filter up and running
Question 1
But How do I style this? For example, font size
> Font size
The following CSS does nothing:
.woocommerce.widget_price_filter .price_slider_amount .price_label {
font-size: 8px !important;
}
__
Question 2
Also I want the slider like yours, with black filled dots instead of open dots like now
Question 3
I see it works, but it's slow. Every time I click on something the whole site has to reload. But in your site it's flashy fast. How can I get the same result?
Attached files: Screenshot 2023-06-26 at 09.40.30.jpg
Hi there,
To clarify, the demo site here https://themenectar.com/salient/ecommerce-robust/shop/ uses an earlier version of WordPress without the blocks, just the regular older widgets added to the woocommerce sidebar the theme provides. That is the reason there are styling differences.
1) To change the font size of the prices use the following CSS:
.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount{ font-size:0.8em; }adjust it to what you want.
2) About getting the black filled dots, try the following CSS:
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb { background: black; } div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-moz-range-thumb { background: black; }3) About the speed, that demo site is also running a caching plugin we have a guide on that here https://themenectar.com/docs/salient/performance-optimization-guide/#caching
Hope this helps.
Noah.
Thanks, but your CSS even with important does not help (yes I cleared the cache)
/* SHOP price filter styling */
.wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount{
font-size:0.8em !important;
}
Hello again,
Try replacing the previous CSS with this one, then adjust the value to the one you want to changei it to.
/* SHOP price filter styling */ .wc-block-components-price-slider--is-input-inline .wc-block-components-price-slider__controls .wc-block-components-price-slider__amount{ font-size: 17px !important; }I hope that helps.
Best regards,
Thanks, but that is not the right one: I even set it even to 2px so you can it:
https://soluforyou.com/shop/
Now it picks the prices. But I don;t want that. I need
"Filter by price" and "Filter by attribute" to be smaller, or maybe even a lighter weight font. How can I change this? Your theme has no option for this, and I never can discover it with inspect element
Please help
Hello again,
Thank you for the clarification.
Please replace the previous CSS with this one and let us know how that goes.
#sidebar .wc-blocks-filter-wrapper h3.wp-block-heading { font-size: 18px; }Kind regards,
That worked great, thanks!
About the slides, yes looks better as well. How can I change the line width and the size of the circles?
div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-webkit-slider-thumb { background: black; } div.wc-block-price-filter__range-input-wrapper.wc-block-components-price-slider__range-input-wrapper input[type="range"]::-moz-range-thumb { background: black; }Hi there,
You can control the line width and size of circles with this CSS:
.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; }Hope this helps.
Noah.
Thats worked perfect! thanks