Shop filter by brands – above products

This topic has 11 replies, 3 voices, and was last updated 5 years, 3 months ago ago by Olga Barlow

  • Avatar: ZY
    ZY
    Participant
    February 12, 2021 at 23:12

    dear Olga,
    I would like to show all brands in “filter by brand filter” above the products on shop page,
    Also would like to use logos (images) instead of words in this filter widget. and align them horizontally .
    thanks!

    Please, contact administrator
    for this information.
    10 Answers
    Avatar: Robert Hall
    Robert Hall
    Participant
    February 13, 2021 at 08:14

    Hi

    You can add Filter By Brands by going to Dashboard > Appearance > Widget > https://prnt.sc/zb3sew

    You can add product Brands image by going to Dashboard > Products > Brands https://prnt.sc/zb5azn

    As for adding Product Filter By Brand with image please let us know where you see this options in our demo …

    Avatar: ZY
    ZY
    Participant
    February 13, 2021 at 10:04

    Hi Omid,
    thanks for your reply!
    I have added filter by brands, its now on top of products shop page, however there are some modifications i would like to perform, but not able to.
    I’m sending you two screenshots how it is right now and how I would like to have,
    Can you please check those and advise how i should do it?

    question 1 – the above question
    question 2 – why do not all brands appear? i have 7 brands but there are appearing only 4
    question 3 – i have added a thumbnail to one brand but this image is not showing, is it only showing on brands carousel and not on filter by brands?
    question 4 – if my question 1 is not possible to do, i’m thinking to create a banner on shop page on top of products which i can modify and style how i want it and add URL of brand links to images brands, this should work right? well, here is my question, i have already a shop banner on bottom of products, but i need 1 more banner on top of products, how do i create a second banner as I dont see any option in theme options (there is only one banner that i can choose and position at top or bottom of the page)
    question 5 – maybe if nothing works, is brands carousel an option? but it should work as filter by brands and keep products in the cart and work with product categories in shop sidebar
    if yes, how to create and put on top of products on shop page?

    thanks a lot for your support!

    Please contact administrator
    for this information.
    Avatar: ZY
    ZY
    Participant
    February 13, 2021 at 10:26

    Hi again sorry forgot to ask this
    question 6- products on my shop page are not aligned with each other, see screenshot link,
    i have tried to crop 1:1 but it does not seem to work.. can you please check this?

    question 7 (linked to question 1) – filter toolbar needs to be under the filter by brands as I have showed in screenshot (how it should be) , Im not able to find this option

    question 8 – as you see, the all departments menu is not showing, i have added this below snippet to not display it, however is there another option to disable it in theme options rather than adding a code in CSS ?

    .et_b_header-menu .secondary-menu-wrapper .secondary-title {
    display: none;
    }

    thanks a lot for your help!!!

    Please contact administrator
    for this information.
    Avatar: ZY
    ZY
    Participant
    February 13, 2021 at 23:55

    hi guys,

    meanwhile i was playing a bit and have created bar with brands on top of products, have used images bar with links “url/?filter_brand=..” , however they are not functioning as filter widget with checkboxes, because when you choose in widget one brand you can add to products second brand with “url/?filter_brand=oldbrand,secondbrand” , also when you deselect brand it removes this brandname from url, so this function is not working with my brand logos as they have all this as url “url/?filter_brand=..”
    I have added print screen, could you please advise how I can add this function to my brand bar on top of page? or if this is not possible, how can I edit “filter by brand” widget so that I dont have words but logos with checkboxes ?

    Below questions from first messages are still with question mark , please check 🙂 thanks!
    question 2
    question 6
    question 8

    Thanks a lot!

    Have a nice day

    Please contact administrator
    for this information.
    Avatar: ZY
    ZY
    Participant
    February 14, 2021 at 13:17

    hi guys
    How come other posts are replied which were posted 14/02 in the morning and mine left behind?
    Would really like to know explanation from your side?

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    February 15, 2021 at 12:18

    Hello,

    Take our apologies for the delay. Support member that worked on weekend needed the help of developers to give you the correct answer.

    Also, it would be better to post question by question to avoid misunderstanding when a lot of questions posted within one topic.

    1) We don’t option to display brands in columns. It’s possible to implement with additional customization if you have CSS skills. Or you can submit customization request here.

    2) It’s because of the brands’ transient cache. We’ll add option to clear that cache in the next update (in WooCommerce -> Status -> Tools). If you provide us with FTP access to your site we’ll be able to upload the pre-release archive to clear the cache

    3) Because brand filter widget does not have option to choose the display type like Brands list option has for example. I have passed request to our developers to add such type for the filter widget in the next updates.

    4) By default we have only one Banner area for the shop page in our theme. You can create additional widget area https://smallenvelop.com/create-widget-area-in-wordpress-theme/ and edit archive-product.php to show it on the shop page. Use XStore child theme to implement this customization.

    5) Brands carousel is just list of brands, it’s not the filter widget in the meaning of the filter option.

    6) You set 300x300px for your images. But how the system could crop image to 300px height if original image is only 234px height at all?
    So, images that you use should be at least 300x300px width/height.
    Or you can disable crop option and add the below code to Theme Options > Custo CSS to limit heigh and make grid look better

    .content-product .product-content-image img {
        width: auto;
        height: auto;
        max-height: 230px;
    }

    7) There is no such option, so follow the 4) and create your own custom widget area where display the brands filter

    8) I don’t see problem with the All departments menu if you choose the menu you want to show there. If you don’t want to show All departments element at all then edit connection blow and remove the element

    Regards

    Avatar: ZY
    ZY
    Participant
    February 15, 2021 at 18:38

    Hi Olga,
    thank you for your reply I understand now why my questions were not answered
    not really replies I was hoping for but ok not much to do 🙂
    Olga, if you please can help with below three things, then I will not bother you again 🙂
    I have decided now to use brands filter and have put it in static block on top of products
    However two things are problematic
    1) filter on top of products is not adding “check-mark” when selecting a brand, but the same filter with brands is working in the shop sidebar (i have left both filters on page so you can test and see yourself, also I have added printscreen with explanation
    2) after number1 is solved and filter from sidebar is removed, I need to make the filter on top of products in 4 columns and not in 1 as it is right now, also printscreen added, i have edited image so you can understand how it is supposed to be, pleased to know the answer 🙂

    3) on mobile i should have filter by brands in sidebar so it is not appearing on top of products, because I know static block on top of products is appearing on mobile above products.

    please try to find solution for above questions as until now none of my plans have worked as you see..

    can i also ask you not to post images of website public as you have done with printscreens?

    thanks a lot

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    February 16, 2021 at 17:42

    Hello,

    Filter widget created for the shop widget areas. I have added Brands filter to the top of the products to the filters area and added custom CSS to show it into 5 columns. Is it ok for you?

    I have added some custom code to hide the brand filter from the sidebar on the desktop and show it on mobile. Check if it’s suitable for you.

    Regards

    Avatar: ZY
    ZY
    Participant
    February 16, 2021 at 18:06

    Olga,
    you guys are wonderful. Thanks for your help! I will buy another license soon from you guys!
    just two small things before I mark this topic as complete,
    Could you advise how to change toolbar products order below the brands filter widget
    and two lines of titles to be aligned? images attached.
    and tell me how to do it so I dont bother you with those details 🙂

    second thing, i do not have the right to publicly show website ,
    could you please delete printscreens from your comments?
    thanks!

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    February 17, 2021 at 19:17

    Hello,

    To move widgets before the sorting select I made customization in xstore-child/woocommerce/archive-products.php. To align product titles I added custom code to child theme style.css. Clear the CloudFlare CDN cache to apply style changes.
    Check your site after that.

    Regards

  • Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Shop filter by brands – above products’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.