Home Page › Forums › Porto | Multi-Purpose & WooCommerce Theme › Demo 46 Shop Filters
Tagged: demo 46, shop filter
- This topic has 12 replies, 2 voices, and was last updated 6 months ago by Aizaz Awan.
-
AuthorPosts
-
February 28, 2024 at 5:21 pm #4900
Hi, I currently have demo 46 loaded on my site. I want to add shop filters to the shop all / product archive page, but am not able to recreate what I want from the available widgets. When editing in Appearance >>> Widgets >>> Shop Sidebar Woo Category Sidebar I only see Filter by Attribute, Filter by Price, Filter by Stock, Filter by Rating. It is missing Filter by Category, which I need. I can see Filter by Category is possible from Demo 47. What do I need to do to get a shop archive filters option like demo 47 on demo 46 ?
I have attached a screenshot of what I was able to create (shorter filter list) and what I want to mimic (longer filter list). I have also attached a screenshot of what is available to me for filtering.
Attachments:
You must be logged in to view attached files.February 29, 2024 at 6:02 am #4907Hello, @fuhcologne,
Thanks for the detailed explanation with screenshots to understand your issue.
The thing is you are configuring the filters from the right place (Appearance >> Widgets >> Woo Category Sidebar.)
For the categories filter you can use the “Products categories widget”
For the attributes, you can use the “Filter Product by attributes”This will allow you to show the filter content on the sidebar.
However, the style on every demo is changed using custom CSS code. As you are aware the filter widgets in the widgets area don’t provide style options. In each demo of our theme, we added some custom CSS code to design the content. Just like this, you can configure the design using CSS code in the PORTO >> Theme Options >> Skins >> Custom CSS.
Best Regards,
PThemes Team.February 29, 2024 at 3:25 pm #4919Hi @Aizaz Awan,
Thank you for your response. I was able to get the categories filter based on your help.
Is it possible to see the CSS code for the different demo content without having to load a new theme every time?
February 29, 2024 at 3:42 pm #4921Additional question:
With using the Products Categories widget, is there a way to clear the selected category and go back to All ? It doesn’t look like the Reset Filters / Active Filters widget recognizes the Products Categories widget as a filter.
March 1, 2024 at 7:14 am #4935Hello, @fuhcologne,
1- Regrettably, it’s not feasible to review the CSS code of the other demos without importing them. I hope this is clear to you. You can import the other demos either locally or on a test site for examination.
2- The reset filters widget is coming from the YITH AJAX Product filters plugin. If you want the product categories to work with this then you have to remove the “Product Categories widget” and set the categories in the YITH AJAX Filters Presets like this example: https://postimg.cc/VJJLbnp5 For further assistance please refer to this article: https://docs.yithemes.com/yith-woocommerce-ajax-search/?utm_source=wp-free-dashboard&%5B…%5Dum=yith-woocommerce-ajax-search&utm_campaign=plugin-row-meta
Best Regards,
PThemes Team.March 1, 2024 at 5:39 pm #4940Hi @Aizaz Awan, thank you for the clarification. I loaded demo 47 onto a test site to examine the CSS in PORTO >> Theme Options >> Skins >> Custom CSS like you described, but I did not see any CSS relevant to the filters. Am I checking in the right place or should I be checking elsewhere for the CSS relevant to the filters plug-ins ?
2. I will try this out and let you know if it works for me, thank you.
March 2, 2024 at 6:11 am #4944Hello, @fuhcologne,
1- The shop page filters CSS is not included/added in the theme options. It is set in the theme core files. (Porto/CSS/theme_shop.css) is the file. But you override the theme CSS code into the Theme Options >> Skins >> custom CSS >> using the “!important” in the CSS code.
2- Thanks for your understanding.
Best Regards,
PThemes Team.March 4, 2024 at 5:56 pm #4961Ah, got it.
Could you point me in the direction of the bits of code from demo 47 CSS I would need to be able to1. Have the product categories filter not show how many products are in the category and just the category name? (Right now it shows the category name and the amount of products related to that category)
2. Change the Filter by Price widget to have the Filter Button (right now we have a Reset button)
3. Change the filter by Price widget to only change the price limits once the Filter button is pushed (right now it auto adjusts the filter any time the customer moves the slider)additional question unrelated to CSS:
I am using the Woocommerce Brands extension (https://woo.com/document/woocommerce-brands/) and so I have to use the Woocommerce Brand Layered Nav that comes with it for Brand filtering, but would you happen to know what bit of CSS I could use to remove the result count beside the brand tags ? Also, how could I mimic how demo 47 does Filter by Brands with the use of square button versus a list or dropdown for selecting brand?The screenshots I attached are what I would like to change my filter widgets to look like.
Attachments:
You must be logged in to view attached files.March 4, 2024 at 6:27 pm #4965Sorry, another question-
For the YITH AJAX Filters Preset, when using the Label filter type, what is the CSS code I can use to change the on hover and active filter color ? I do not see where it is in the other theme color options.
- This reply was modified 6 months ago by fuhcologne.
March 4, 2024 at 6:39 pm #4967When using YITH AJAX Filters Preset like you recommended , once I click on a selection and the results load, the Filter by Price widget breaks (does not load the slider into the view, only the title is visible). Do you know why this is happening?
Attachments:
You must be logged in to view attached files.March 6, 2024 at 1:50 pm #5018Hello, @fuhcologne,
https://www.portotheme.com/forums/topic/demo-46-shop-filters/#post-4961
1- To hide the product count you can simply uncheck the count option from the product categories widget check the screenshot: https://postimg.cc/zyV82xtY
2- The widget that is used for the product price doesn’t have any option like this as you can check in this screenshot: https://postimg.cc/5HmJ6Djv
3- As there is no option in the filter price widget the filter works when the user sets the limit in it automatically.
Lastly, regarding the brand filter, I need you to share your site wp-admin URL and access it with us here in the private content area of this topic after taking a complete backup of your site.
Best Regards,
PThemes Team.March 6, 2024 at 2:32 pm #5019Hello, @fuhcologne,
https://www.portotheme.com/forums/topic/demo-46-shop-filters/#post-4965
Regarding the issue you mentioned “For the YITH AJAX Filters Preset, when using the Label filter type, what is the CSS code I can use to change the on hover and active filter color? I do not see where it is in the other theme color options.” I didn’t understand it clearly, can you please elaborate on it with the help of video/screenshots and share the page URL so that I will understand better and assist you with a proper solution?
If possible please create a fresh new topic for each issue to avoid any mess up or inconvenience.
Thanks for your understanding.
Best Regards,
PThemes Team.March 6, 2024 at 4:10 pm #5020Hello, @fuhcologne,
https://www.portotheme.com/forums/topic/demo-46-shop-filters/#post-4967
Kindly provide the URL of your site along with admin access to facilitate debugging and identifying the root cause of the issue. For security reasons, please ensure to share this information in the private content area of this topic after taking a complete backup of your site.
Best Regards,
PThemes Team. -
AuthorPosts
- You must be logged in to reply to this topic.