Demo 46 Shop Filters

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #4900
    fuhcologne
    Participant

        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.
        #4907
        Aizaz Awan
        Keymaster

            Hello, @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.

            #4919
            fuhcologne
            Participant

                Hi @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?

                #4921
                fuhcologne
                Participant

                    Additional 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.

                    #4935
                    Aizaz Awan
                    Keymaster

                        Hello, @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.

                        #4940
                        fuhcologne
                        Participant

                            Hi @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.

                            #4944
                            Aizaz Awan
                            Keymaster

                                Hello, @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.

                                #4961
                                fuhcologne
                                Participant

                                    Ah, got it.
                                    Could you point me in the direction of the bits of code from demo 47 CSS I would need to be able to

                                    1. 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.
                                    #4965
                                    fuhcologne
                                    Participant

                                        Sorry, 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 1 month, 1 week ago by fuhcologne.
                                        #4967
                                        fuhcologne
                                        Participant

                                            When 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.
                                            #5018
                                            Aizaz Awan
                                            Keymaster

                                                Hello, @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.

                                                #5019
                                                Aizaz Awan
                                                Keymaster

                                                    Hello, @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.

                                                    #5020
                                                    Aizaz Awan
                                                    Keymaster

                                                        Hello, @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.

                                                      Viewing 13 posts - 1 through 13 (of 13 total)
                                                      • You must be logged in to reply to this topic.
                                                      Customize Icon
                                                      Need Customization? We specialize in delivering high-quality web and mobile design/development services to our clientele. Should you require customization services, please do not hesitate to reach out to us at your convenience.