Adding Search Bar in Products/Shop Page

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.

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.

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.

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.

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.

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.

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.

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.