control/expand header item length width ?

Hi,

since I need to make search works on variable product , so I found a search plugin , which it works

only problem I have now is to integrate it with woodmart

I edit the header , it shows up , but in narrowed width as my screenshot

which is ugly , how can I extend it and make it to display same way as default search box does ?

it was added by HTML block + plugin’s shortcode

when I view the HTML block individually , it does display a lot of longer than it embedded into header

best regards,

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but as far as we are viewing your Site right now, it is showing the Search as Full Width: https://ibb.co/s96sbSX

So, we can’t seem to find any issues with that on your Site.

Please check back your Site after completely clearing the browser and server cache.

Best Regards

Hi,

please check my screenshot 1 , this is how I create the HTML block , as shortcode

and screenshot 2 , show how it displays individual , that searchbox is fully extended

in screenshot 3 , you can see the theme default searchbox , it displays from left-side logo , all the way reaches the right side “my-account” button , this is good

now please check screensshot4 , I replace the “search” to custom HTML block in screenshot 1

then please check screenshot 5 , the searchbox , in frontend page , only display a little since the left-side logo , leave a huge chunk of blank area

so my question is how to extend that searchbox all the way to the right-side my account button , as default searchbox does.

Hello,

Could you please once add the HTML Block under your Header for the time being and then mention us so that we can check and provide you the Custom CSS to increase the Width (if possible or applicable).

Best Regards

Hi,

thanks, I have done as requested

also provided login info on private content , this is dev site, please feel free to do whatever that is you need to do

best regards,

Hello,

The issue on your Site is now adjusted with the help of the following Custom CSS applied:

This CSS was applied was in Global Custom CSS:

.whb-column.whb-col-center.whb-visible-lg {
    display: grid !important;
}

And this CSS was applied in Custom CSS for mobile:

.whb-column.whb-col-center.whb-visible-lg {
  display: none !important;
}

Location to find Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> there check the Global CSS section and Custom CSS for mobile.

Best Regards

Hi,

thanks for help , this works

I only got one problem left

how can I “hijack” mobile view search box in the header ?

or hijack/redirect the search query string from current

/?s=something&post_type=product

to search plugin specific one as

/?s=something&search_id=1&post_type=product

is there any add_filter kind of stuff I can use for this purpose ? maybe directly edit source code ?

Hello,

Sorry but there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Best Regards

Hi,

thanks, luckily I was able to work around it

in case anybody else hit same issue as I did , here is my solution :

since my goal is to make

/?s=something&post_type=product

to become

/?s=something&search_id=1&post_type=product

then I come up a rewrite rule

RewriteCond %{QUERY_STRING} s=(.*)&post_type=product
RewriteRule .*  /\?s=%1&search_id=1&post_type=product [L]

that will grab the s=xxx item , then rewrite it to the desgianted URL with %1 as back reference

Hello,

We are glad that you were able to find a workaround for that and Thank You very much for sharing the solution here with all. We appreciate that !

Thanks for contacting us.
Have a great day !

Topic Closed.
Best Regards

[Author]

Posts