Home Forums WoodMart – Premium Template Adding Search Bar in Products/Shop Page

Tagged: ,

This topic contains 23 replies, has 2 voices, and was last updated by Aizaz Imtiaz Awan Aizaz Imtiaz Awan 1 month, 1 week ago.

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #326906

    ajax
    Customer

    Hi WoodMart Team,

    I am looking to add a search bar right above the filters and sorting options, may I kindly seek for your advice on this? (attached an image below on the ideal placement of the search bar that I hope to include)

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #326910

    ajax
    Customer

    Additionally, may I also know how can I add spacing after the pagination on the shop/products page? Since we cannot directly edit them with Elementor.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #326950

    Hello,

    I saw the screenshot you attached.

    1) You can read our detailed documentation on how to add filter form in the following link:
    https://xtemos.com/docs/woodmart/faq-guides/create-filters-form/

    2) Please disable the maintenance mode of the website to check it myself and help you out accordingly.

    Best Regards.

    #327060

    ajax
    Customer

    Hi,

    I saw the filter form but that works more like a filter instead of a search function, is there any other way to add a search bar for searching product name instead?

    Sure, I have disabled the maintenance mode.

    Thank you.

    #327113

    Hello,

    1) Please try adding the Ajax Search element in the HTML Block you added as filter form.

    Screenshot for Clarification: https://gyazo.com/da99e058360dbced223d0cea9023ae32

    2) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    nav.woocommerce-pagination.wd-pagination {
        padding-bottom: 50px;
    }

    Regards.
    Xtemos Studios.

    #327274

    ajax
    Customer

    Hi,

    Thank you for your advice previously, and I believe I am currently on the right track.

    However, I am struggling to find how to adjust the width of the new HTML block to make sure that it does not extend over the left sidebar. (Refer to the screenshot below)

    Please advise on how can I adjust it, and I am using Elementor instead of WPbakery.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327276

    ajax
    Customer

    Additionally,

    I was able to sort of alter the width but not in relation to the sidebar, nonetheless, there are 2 rather big gaps before and after the search bar filter. May I know how do I reduce the space in the gap? (Please refer to the screenshot below).

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327352

    Hello,

    I saw the screenshots you attached.

    Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .filters-area.custom-content {
        padding: 0;
    }

    Regards.
    Xtemos Studios.

    #327489

    ajax
    Customer

    Hi,

    Thank you for the custom CSS and that worked to remove the spacing.

    However, may I clarify what is the best approach to adjust the width of the search and filter bar?

    Thank you.

    #327501

    ajax
    Customer

    Additionally, may I know how can I change the options under the sorting field? (attached in screenshot below)

    I would like to remove the sort of average rating, and price.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327575

    Hello,

    You are Most Welcome.

    Sorry but you cannot make the width of the filters to be the full width of the sidebar.

    2) The default Sorting in WooCommerce functionality and our theme don’t influence.

    You can find the settings for default sorting under Appearance >> Customize >> WooCommerce >> Product Catalog.

    Best Regards.

    #327622

    ajax
    Customer

    Hi there,

    I understand I cannot make the filter full width of the sidebar, but I was trying to ask how should I adjust the width so that it will not extend over the sidebar responsively especially when view on different devices (computers, tablet, phones etc.).

    Currently, I am adjusting the width under the Elementor’s layout tab and set the width to 900 (attached the screenshot). But I worry that this might not appear well on certain devices. So just want to make sure am I doing it right?

    With regards to the sorting, I saw that the setting you were referring to mainly changes the default sorting option. But is it possible to remove some of the options under the sorting instead? Because I am operating this website on catalog mode, and there will not be any prices on the products so sort of price options will be irrelevant in this case. Or is it possible to hide the sorting option?

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327643

    Hello,

    1) Please try setting the width to auto instead of setting a value then check back.

    2) Sorry but WooCommerce doesn’t allow such modifications as you require and our theme doesn’t influence.

    If you want to hide the default sorting then try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    form.woocommerce-ordering {
        display: none;
    }

    Best Regards.

    #327789

    ajax
    Customer

    Hi,

    Thank you for the CSS to hide the sorting option, it worked and is good enough for my application.

    Additionally, I am trying to add a categories + sub-categories accordion to the shop page sidebar. However, I am currently using the “Product Categories List” and it doesn’t have the option to set as accordion even though I enabled it under the Theme Settings (attached the screenshot below). Please advise on how can I achieve the accordion.

    Also, I realized that the custom CSS padding applied to the pagination might not apply to some cases where the number of products is lesser and does not have any pagination. So would be great if there is a custom CSS to add spacing to this case also.

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327847

    Hello,

    You are Most Welcome.

    Sorry, but there is no option in Theme Settings to make the categories in the sidebar accordion.

    Please provide the URL where the issue occurs to check it myself and help you out accordingly.

    Regards.
    Xtemos Studios.

    #327894

    ajax
    Customer

    Hi,

    I see, so the categories accordion is only possible to be implemented on the menu right? Like in this example: https://woodmart.xtemos.com/shop/ (attached the screenshot below). In that case, may I kindly ask how do we add this to the menu?

    Additionally, may I know if it is possible to add a “Featured Products” before the shop section? Would like to add something like this from the template: https://woodmart.xtemos.com/blog/woodmart_element/product-tabs-ajax-arrows/ (Attached a screenshot of another website as example)

    Here is the URL link to the spacing: https://hohengfood.com/product-category/korean-food/

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327898

    ajax
    Customer

    Just to further clarify, may I know which widget is this sentence referring to?

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327931

    Hello,

    I saw the screenshots you attached.

    For the toggle, function provides the complete admin login details to check it myself and help you out accordingly.

    Sorry, but it is not possible to add the featured products section as you mentioned.

    It requires customizations and this is beyond our limitations and support policy.

    Regards.
    Xtemos Studios.

    #327957

    ajax
    Customer

    Hi,

    Sure, I will provide the admin login details under the private content.

    No worries, the featured products section is just a good to have.

    Thank you.

    Private Content Hidden
    #327960

    Hello,

    The login details you provided are of limited access. I am unable to access plugins.

    Please provide complete admin access to let me assist you further.

    Best Regards.

    #327962

    ajax
    Customer

    Hi,

    Additionally, is there a way I can enlarge the background image on the page title?

    I tried using the “Page title size” and even the large option seems rather small, is it possible to add a custom css to enlarge it further? (attached the screenshot below)

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327981

    ajax
    Customer

    Hi,

    Furthermore, may I know how do I edit the newsletter popup form on the top right of the new header? I tried editing a HTML block but apparently it does not update it. (Attached the screenshot below)

    Thank you.

    Attachments:
    You must be logged in to view attached files.
    #327983

    ajax
    Customer

    Hi,

    I have given admin access to that account, but I have changed the role to super admin.

    Please try again and let me know.

    Thank you.

    #328113

    Hello,

    I have added the product categories widget to the shop page widget area and the categories are displayed as Dropdowns.

    Screenshot for Clarification: https://gyazo.com/e0043f09f578a938825e5460e639e15d

    1) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

    .title-size-large {
        padding: 180px 0;
    }

    2) Please try making changes to HTML Block 212.

    Note: Please create new topics for each issue in the support system to avoid any confusions.

    Best Regards

Viewing 24 posts - 1 through 24 (of 24 total)

You must be logged in to reply to this topic.