Head for retail example

Hi,

I’m trying to setup the header exactly like the demo retail (https://woodmart.xtemos.com/demo-retail/demo/retail/)

On importing the retail demo using the woodmart base import, the header doesnt import the same version as shown in the demo link shared above specifically for the mobile device. The seach bar as shared in the photo attached is missing.

Upon adding the search bar manually the header looses colour and becomes transparent.

Please help resolve the issue. I have created a staging server and installed a fresh instance with only the essential plugins. Link attached below.

Attachments:

You must be logged in to view attached files.

More images for the transparent header after adding searchbar manually.

I have given admin access to the clean install as well if you want to check.

Attachments:

You must be logged in to view attached files.

Hello,

Here is the code of the header:

{"name":"Header Retail","structure":{"id":"root","type":"root","content":[{"id":"top-bar","type":"row","content":[{"id":"column5","type":"column","content":[{"id":"y4ro7npestv02kyrww49","type":"text","params":{"content":{"id":"content","value":"<strong>FREE SHIPPING FOR ALL ORDERS OF $150</strong>","type":"editor"},"inline":{"id":"inline","value":false,"type":"switcher"},"css_class":{"id":"css_class","value":"","type":"text"}}}]},{"id":"column6","type":"column","content":[]},{"id":"column7","type":"column","content":[{"id":"43k0qayz7gg36f2jmmhk","type":"social","params":{"type":{"id":"type","value":"share","type":"selector"},"size":{"id":"size","value":"","type":"selector"},"color":{"id":"color","value":"light","type":"selector"},"align":{"id":"align","value":"center","type":"selector"},"style":{"id":"style","value":"","type":"selector"},"form":{"id":"form","value":"circle","type":"selector"},"el_class":{"id":"el_class","value":"","type":"text"}}},{"id":"aik22afewdiur23h71ba","type":"divider","params":{"full_height":{"id":"full_height","value":true,"type":"switcher"},"css_class":{"id":"css_class","value":"","type":"text"}}},{"id":"by7fngopqyq58lavfby3","type":"menu","params":{"menu_id":{"id":"menu_id","value":"top-bar-right","type":"select"},"menu_style":{"id":"menu_style","value":"bordered","type":"selector"},"menu_align":{"id":"menu_align","value":"right","type":"selector"}}},{"id":"hvo7pk2f543doxhr21h5","type":"divider","params":{"full_height":{"id":"full_height","value":true,"type":"switcher"},"css_class":{"id":"css_class","value":"","type":"text"}}}]},{"id":"column_mobile1","type":"column","content":[]}],"params":{"flex_layout":{"id":"flex_layout","value":"flex-middle","type":"selector"},"height":{"id":"height","value":41,"type":"slider"},"mobile_height":{"id":"mobile_height","value":40,"type":"slider"},"hide_desktop":{"id":"hide_desktop","value":false,"type":"switcher"},"hide_mobile":{"id":"hide_mobile","value":true,"type":"switcher"},"sticky":{"id":"sticky","value":false,"type":"switcher"},"sticky_height":{"id":"sticky_height","value":41,"type":"slider"},"color_scheme":{"id":"color_scheme","value":"light","type":"selector"},"shadow":{"id":"shadow","value":false,"type":"switcher"},"background":{"id":"background","value":{"background-color":{"r":9,"g":33,"b":67,"a":1}},"type":"bg"},"border":{"id":"border","value":{"width":"1","color":{"r":58,"g":77,"b":105,"a":1},"sides":["bottom"]},"type":"border"}}},{"id":"general-header","type":"row","content":[{"id":"column8","type":"column","content":[{"id":"gs8bcnxektjsro21n657","type":"logo","params":{"image":{"id":"image","value":{"id":302,"url":"http://dle4.yanaweb.net/wp-content/uploads/2017/06/wood-reserve-image-1-3.jpg","width":1600,"height":575},"type":"image"},"width":{"id":"width","value":245,"type":"slider"},"sticky_image":{"id":"sticky_image","value":"","type":"image"},"sticky_width":{"id":"sticky_width","value":245,"type":"slider"}}}]},{"id":"column9","type":"column","content":[{"id":"r1zs6mpgi6bmsbvwzszd","type":"space","params":{"width":{"id":"width","value":10,"type":"slider"},"css_class":{"id":"css_class","value":"","type":"text"}}},{"id":"9x1ytaxq7aphtb3npidp","type":"search","params":{"display":{"id":"display","value":"form","type":"selector"},"search_style":{"id":"search_style","value":"with-bg","type":"selector"},"categories_dropdown":{"id":"categories_dropdown","value":true,"type":"switcher"},"ajax":{"id":"ajax","value":true,"type":"switcher"},"ajax_result_count":{"id":"ajax_result_count","value":20,"type":"slider"},"post_type":{"id":"post_type","value":"product","type":"selector"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}},{"id":"bl9ba3piar26qqnzgblk","type":"space","params":{"width":{"id":"width","value":10,"type":"slider"},"css_class":{"id":"css_class","value":"","type":"text"}}}]},{"id":"column10","type":"column","content":[{"id":"d6tcdhggjbqbrs217tl1","type":"space","params":{"width":{"id":"width","value":15,"type":"slider"},"css_class":{"id":"css_class","value":"","type":"text"}}},{"id":"vssfpylqqax9pvkfnxoz","type":"account","params":{"display":{"id":"display","value":"text","type":"selector"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"},"with_username":{"id":"with_username","value":false,"type":"switcher"},"login_dropdown":{"id":"login_dropdown","value":true,"type":"switcher"},"form_display":{"id":"form_display","value":"side","type":"selector"}}},{"id":"a22wdkiy3r40yw2paskq","type":"wishlist","params":{"design":{"id":"design","value":"icon","type":"selector"},"hide_product_count":{"id":"hide_product_count","value":false,"type":"switcher"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}},{"id":"rvamlt5fj396fxl4kevv","type":"compare","params":{"design":{"id":"design","value":"icon","type":"selector"},"hide_product_count":{"id":"hide_product_count","value":false,"type":"switcher"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}},{"id":"nedhm962r512y1xz9j06","type":"cart","params":{"position":{"id":"position","value":"side","type":"selector"},"style":{"id":"style","value":"2","type":"selector"},"icon_type":{"id":"icon_type","value":"bag","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}}]},{"id":"column_mobile2","type":"column","content":[{"id":"g1k0m1tib7raxrwkm1t3","type":"burger","params":{"style":{"id":"style","value":"text","type":"selector"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"},"position":{"id":"position","value":"left","type":"selector"},"search_form":{"id":"search_form","value":true,"type":"switcher"},"categories_menu":{"id":"categories_menu","value":false,"type":"switcher"},"menu_id":{"id":"menu_id","value":"mobile-categories","type":"select"}}}]},{"id":"column_mobile3","type":"column","content":[{"id":"lt7vdqgaccmapftzurvt","type":"logo","params":{"image":{"id":"image","value":{"id":302,"url":"http://dle4.yanaweb.net/wp-content/uploads/2017/06/wood-reserve-image-1-3.jpg","width":1600,"height":575},"type":"image"},"width":{"id":"width","value":179,"type":"slider"},"sticky_image":{"id":"sticky_image","value":"","type":"image"},"sticky_width":{"id":"sticky_width","value":179,"type":"slider"}}}]},{"id":"column_mobile4","type":"column","content":[{"id":"trk5sfmvib0ch1s1qbtc","type":"cart","params":{"position":{"id":"position","value":"side","type":"selector"},"style":{"id":"style","value":"5","type":"selector"},"icon_type":{"id":"icon_type","value":"bag","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}}]}],"params":{"flex_layout":{"id":"flex_layout","value":"flex-middle","type":"selector"},"height":{"id":"height","value":105,"type":"slider"},"mobile_height":{"id":"mobile_height","value":60,"type":"slider"},"hide_desktop":{"id":"hide_desktop","value":false,"type":"switcher"},"hide_mobile":{"id":"hide_mobile","value":false,"type":"switcher"},"sticky":{"id":"sticky","value":true,"type":"switcher"},"sticky_height":{"id":"sticky_height","value":60,"type":"slider"},"color_scheme":{"id":"color_scheme","value":"light","type":"selector"},"shadow":{"id":"shadow","value":false,"type":"switcher"},"background":{"id":"background","value":{"background-color":{"r":9,"g":33,"b":67,"a":1}},"type":"bg"},"border":{"id":"border","value":{"width":"0","applyFor":"fullwidth","style":"solid","sides":["bottom"]},"type":"border"}}},{"id":"header-bottom","type":"row","content":[{"id":"column11","type":"column","content":[{"id":"wjlcubfdmlq3d7jvmt23","type":"categories","params":{"menu_id":{"id":"menu_id","value":166,"type":"select"},"more_cat_button":{"id":"more_cat_button","value":false,"type":"switcher"},"more_cat_button_count":{"id":"more_cat_button_count","value":5,"type":"slider"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"},"color_scheme":{"id":"color_scheme","value":"dark","type":"selector"},"background":{"id":"background","value":{"background-color":{"r":255,"g":255,"b":255,"a":1}},"type":"bg"},"border":{"id":"border","value":{"color":{"r":129,"g":129,"b":129,"a":0.2},"width":"1","sides":["bottom","top","left","right"]},"type":"border"}}}]},{"id":"column12","type":"column","content":[{"id":"6kgdkbvf12frej4dofvj","type":"mainmenu","params":{"menu_style":{"id":"menu_style","value":"default","type":"selector"},"menu_align":{"id":"menu_align","value":"left","type":"selector"},"full_screen":{"id":"full_screen","value":false,"type":"switcher"},"icon_type":{"id":"icon_type","value":"default","type":"selector"},"custom_icon":{"id":"custom_icon","value":"","type":"image"}}}]},{"id":"column13","type":"column","content":[{"id":"1g7wl3ufrhgz2t297r20","type":"text","params":{"content":{"id":"content","value":"<ul class=\"inline-list inline-list-with-border main-nav-style\"><li><a class=\"color-primary\" href=\"https://woodmart.xtemos.com/shop/\">SPECIAL OFFER</a></li><li><a href=\"https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/20264492?ref=xtemos\" target=\"_blank\" rel=\"noopener\">PURCHASE THEME</a></li></ul>","type":"editor"},"inline":{"id":"inline","value":false,"type":"switcher"},"css_class":{"id":"css_class","value":"","type":"text"}}}]},{"id":"column_mobile5","type":"column","content":[]}],"params":{"flex_layout":{"id":"flex_layout","value":"flex-middle","type":"selector"},"height":{"id":"height","value":50,"type":"slider"},"mobile_height":{"id":"mobile_height","value":50,"type":"slider"},"hide_desktop":{"id":"hide_desktop","value":false,"type":"switcher"},"hide_mobile":{"id":"hide_mobile","value":true,"type":"switcher"},"sticky":{"id":"sticky","value":false,"type":"switcher"},"sticky_height":{"id":"sticky_height","value":50,"type":"slider"},"color_scheme":{"id":"color_scheme","value":"dark","type":"selector"},"shadow":{"id":"shadow","value":false,"type":"switcher"},"background":{"id":"background","value":[],"type":"bg"},"border":{"id":"border","value":{"style":"solid","applyFor":"fullwidth","width":"1","color":{"r":129,"g":129,"b":129,"a":0.2},"sides":["bottom"]},"type":"border"}}}]},"settings":{"overlap":{"id":"overlap","value":false,"type":"switcher"},"boxed":{"id":"boxed","value":false,"type":"switcher"},"full_width":{"id":"full_width","value":false,"type":"switcher"},"dropdowns_dark":{"id":"dropdowns_dark","value":false,"type":"switcher"},"sticky_shadow":{"id":"sticky_shadow","value":true,"type":"switcher"},"hide_on_scroll":{"id":"hide_on_scroll","value":false,"type":"switcher"},"sticky_effect":{"id":"sticky_effect","value":"slide","type":"selector"},"sticky_clone":{"id":"sticky_clone","value":true,"type":"switcher"},"sticky_height":{"id":"sticky_height","value":60,"type":"slider"}}}

You can press “import” and paste the code and configure as per your needs.

Best Regards

The issue is still persistent. Have you looked through the images and links I have shared with you? Please look at them first. I doubt you have seen them as your reply is generic.

Hello,

Yes, I have seen the screens. I have provided the initial retail header to provide your the base for creating your header and not to waste time for investigating of how have you done that.

Here is the insturctions on how to configure the Header builder: https://xtemos.com/docs/woodmart/header-builder/

You will find the mauals on how to add or remove the elements, set or remove the background color.

You can take code and use the ready header or take instruction and make the restore the elements and other features as per your needs.

Best Regards

Hello,
I had attached an image of the header builder in the first message.

Steps I took to setup the demo.
1. Setup clean install of wp
2. Install woodmart+required plugins
3. Import demo data
4. Apply retail theme
5. Add search form to header bottom
6. Save settings and make default

After following all the above steps the search bar is still not visible on mobile.

Secondly, after adding anything to the header bottom for mobile, the header becomes trasparent automatically. I have made sure the colours are selected and setup properly.

Once again. Please check all the information thouroghly and provide solution as this is a theme level bug and NOT a configuration issue.

Hello,

Your site cannot be reached and I cannot check the problem.

Switch to the mobile view and add a search for to the bottom row. Save.

Make your site accessible to check the second issue.

Best Regards

Hello,

I have added the search to the bottom row on mobile view.

Please refer the the link below.

A clarification to my last message, I have added the search form to bottom row on header builder. BUT on the frontend the searcg bar is still not visible.

Hello,

You have not enabled the row https://gyazo.com/d854ba15de3d023f7d1eee8f3cf6f083 and it works https://prnt.sc/somyrh

Best Regards

Hello,

Thank you for pointing that out. All issue are resolved as of now.

Best,
A

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts