[Resolved] Shopping Cart Icon next to search in header

Home Forums Support [Resolved] Shopping Cart Icon next to search in header

Home Forums Support Shopping Cart Icon next to search in header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #467039
    Darren

    Hi Leo

    Could you assist with creating a shopping basket Icon inline but to the right of search bar a bit like this site, https://www.studiocare.com/

    Many Thanks

    GP Premium 1.5.6
    #467127
    Leo
    Staff
    Customer Support

    Hi Darren,

    Can you add in the Cart widget in header widget first?

    Looking at your current layout, I would recommend considering doing this: https://docs.generatepress.com/article/split-header-three-sections/

    Let me know ๐Ÿ™‚

    #467364
    Darren

    hi leo

    Think I might have opened up a can of worms with those directions, I cant get out of this it seems to advanced, just want to get back to the way it was and add a cart icon as described.

    Thanks

    Darren

    #467703
    Leo
    Staff
    Customer Support

    Let’s give this a shot first as it’s not too difficult.

    – In the header-left div, replace the capital letters with your actual info, like URL to your website, URL of your logo etc

    – Download the widget shortcode plugin: https://en-ca.wordpress.org/plugins/widget-shortcode/ and use it to turn the Search product widget and cart widget into shortcodes

    – Replace “header center content” in header-center div with the search product shortcode from above

    – Replace “header right content” in header-right div with the cart shortcode from above

    That should be it. Let me know.

    #467896
    Darren

    Hi Leo

    Many thanks, if you have a look I have put the widget codes in and have removed the cart from the actual header, the only issue is that when I remove the search bar I loose the rounded edges and it doesn’t align properly.

    Can you give me a work around for the search alignment and custom settings (lining things up) but also for all the custom css on the search bar.

    Also any hints on how I can make the basket look like a shopping cart.

    Thanks D

    #467957
    Darren

    Leo

    It seems that the custom CSS is still working on the search bar, just need the info on the alignment/ proportions of the three sections and how to centre stuff.

    Is any of the old custom CSS now redundant?

    Thanks

    #468037
    Leo
    Staff
    Customer Support

    You can try this CSS to put the button inline:

    .widget .search-field {
        width: 200px;
    }

    As for making the basket looking like shopping cart, you’d have to ask WooCommerce to see if they have a filter for that.

    #468154
    Darren

    Hi Leo

    I added the
    .widget .search-field {
    width: 200px;
    }

    Its made the search bar too small and the shopping cart has too much padding around it, could you tell me if I can adjust those section widths so that the site has a max width of 1100 px which is what I set it too. it seems adding those dividers in the header has made the whole site wider than it was.

    Regards

    Darren

    #468163
    Darren

    PS whats the command to give the whole search bar 25px top padding to centralise top and botton

    #468190
    Darren

    Leo

    Ideally I want the search products area to be around 600px wide and 15-20px tall,

    #468414
    Darren

    Hi Leo

    I re produced the header in Elementor and managed to line things up, I’ve used the woocommerce product search widget which is still responding to the CSS we put in previously. I just want to make the search area bigger, is there a CSS for that

    Thanks

    Darren

    #468486
    Leo
    Staff
    Customer Support

    Try this:

    input#woocommerce-product-search-field-0 {
        width: 300px;
    }
    #468552
    Darren

    Thanks Thats great works a treat

    #468672
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.