Adding Search Bar in Products/Shop Page

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

[Author]

Posts