Return to previous page

How do I implement a search-field like yours?

This topic has 19 replies, 3 voices, and was last updated 9 years, 4 months ago ago by Stan Russell

peter4576

Participant

July 1, 2015 at 12:19

I love how your searchfield works on your site (centered in a header). I would like that!

How do I achieve this? Can you paste the VC code, pls? + CSS

Thank you so much

Peter

#72565 Copied Theme version: Latest WooCommerce version: Latest

18 Answers

Eva Kemp

Support staff

July 1, 2015 at 14:19

Hello,

Go to Theme Options > Header and select header type you need.

Regards,
Eva Kemp.

#72593 Copied

peter4576

Participant

July 1, 2015 at 14:26

Sorry I was unclear. I hereby send you a screenshot so you get my point 🙂

I meant your search-field here:
https://www.8theme.com/support/

https://gofile.me/6lYKv/VCALUNRH

#72596 Copied

Eva Kemp

Support staff

July 1, 2015 at 15:34

Hello,

You can create a row and use Mega Search Form element in Visual Composer editor.

Regards,
Eva Kemp.

#72620 Copied

peter4576

Participant

July 1, 2015 at 15:40

Ah ok so cool!

Does your theme come with any slider-background? I was search for it and I know other themes come with it, but it seems I cannot achieve this? Do you have any suggestions?

Thanks

Peter

#72623 Copied

peter4576

Participant

July 1, 2015 at 16:02

HI again

Ok, got it – now I understand why I had not seen it before and could not find it 🙂

If you have a look at my frontpage it is pretty screwed up, and there is no default designs to choose from. Is it possible you can send me the CSS you have used, so that I can achieve something similar?

Please have a look.

http://pmr.as

Also, when I try and set the background I never get what I want. Only when setting it to “fit 1st parrent” I ALMOST get the size I want, but still I dont get rid of the border in the sides.

Also I still have the 10-20 pixel space on top (padding) which I would like to get rid of.

I hope you can help me achieve following:

1. No padding on top
2. No padding in sides (full width but without zooming and screwing up the image which the other settings do)
3. Help me with CSS so I can get a setup like yours

Thanks

Peter

#72632 Copied

Eva Kemp

Support staff

July 1, 2015 at 20:01

Hello,

Please provide us with wp-admin panel credentials in Private Content.

Regards,
Eva Kemp.

#72679 Copied

peter4576

Participant

July 2, 2015 at 11:04

Hi there!

Any news on this one? I have a designer working on the CSS, so I would be glad if you could notify me before doing anything on the live-site.

Also, you could just send me the CSS and I can implement myself 🙂

Thanks

Peter

#72795 Copied

Eva Kemp

Support staff

July 2, 2015 at 11:35

Hello,

This is not just CSS, that block is created with the help of VC editor. So please provide us with wp-admin panel credentials to check your page.

Thank you.
Regards,
Eva Kemp.

#72799 Copied

peter4576

Participant

July 2, 2015 at 12:04

Hi there! But I did so already yesterday? I will just post em again in the private field.

Also, I can just paste the VC code also…

Please, contact administrator
for this information.

#72803 Copied

Eva Kemp

Support staff

July 2, 2015 at 12:42

Hello,

I added a Row element inside of the first row and divided it into 3 columns, then I added “Mega Search Form” element in the second column to have it centered and added this code in CSS block of VC editor:
http://storage3.static.itmages.com/i/15/0702/h_1435837234_6310497_6771ae6058.png

Please check it now.

Regards,
Eva Kemp.

#72817 Copied

peter4576

Participant

July 2, 2015 at 13:12

Really nice job!

Thank you so much!

Only last thing, please:

1. Why is the background image loading in 1-steps? I believe there must be some conflict/ hard loading job using the background image-settings I have.
2. Is there another way which takes less load-time to make the background image load?
3. How to get rid of the padding on top + sides, so that the image takes up full width (within the box)

Thanks

Peter

#72823 Copied
Eva Kemp

Support staff

July 2, 2015 at 13:27
Hello,

1./2. As I see background image is loading quite fast. Please clarify this issue with more details.

3. I’ve added this code in CSS block of VC editor:
```
.page-content {
    margin-top: 1px;
}
```
Please check the site now.

Regards,
Eva Kemp.
#72827 Copied
peter4576

Participant

July 3, 2015 at 05:41

Thank you very much.

However, I still have following ongoing problems:

1. I get a autosearch function which I cannot disable. You dont have it, and it ruins my BG image and all.

2. I still havent got rid of he side-margin, and my side margin CSS does not help…

3. The background image loads in 2 steps. It loads in from left (its kind of jumping) which looks really bad. Did you test it?

Thank you

Peter

#72923 Copied

Eva Kemp

Support staff

July 3, 2015 at 09:37

Hello,

1. What autosearch function are you talking about? Please show us a screenshot.

2./3. I’ve set full width for background image in the row settings. Please clear browser cache and check it now.

Regards,
Eva Kemp.

#72980 Copied

peter4576

Participant

July 3, 2015 at 09:46

Hi again

https://gofile.me/6lYKv/x5nBkvZj

Above link is to screen shot.

1. When typing 3 letters you get the auto-suggest. But in this search-form it screws up not only layout but the content and all is weird. So I would like to kill the autosuggest for this search-formular.

2. Also, as stated earlier, when I set the background to “full width” it screws up the image. It zooms on the image (for no need as it is twice the size as the actual width(!). The guy in the image with the walkie talkie is now so big that you cannot see the walkie talkie. Thats why I changed the background type.

Thanks

Peter

#72984 Copied
Eva Kemp

Support staff

July 3, 2015 at 12:10
Hello,

1. I’ve added this code in CSS block of VC editor to hide autosearch:
```
.et-search-result {
    display: none !important;
}
```
2. I’ve set background position for the image:
http://storage4.static.itmages.com/i/15/0703/h_1435921748_2889573_eb6363474a.png

Please check it now.

Regards,
Eva Kemp.
#73012 Copied
peter4576

Participant

July 5, 2015 at 07:49

Thank you so much! Worked as a charm

#73158 Copied

Stan Russell

Participant

July 6, 2015 at 08:52

Hello,

you are welcome!

Regards,
Stan Russell.

#73245 Copied
Tagged: implementation, json, persuasive, search field, templates, woocommerce, wordpress
Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘How do I implement a search-field like yours?’' has been successfully resolved, and the topic is now closed for further responses

How do I implement a search-field like yours?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection