Support » Theme: Storefront » Adding Product Search extension to Storefront Header

  • Resolved mclanea

    (@mclanea)


    OK, so I think I’m pretty close on this. But I don’t have it 100% fixed and could use some help.

    I’m trying to swap out the default Storefront “search products…” widget you can add in the header via the customizer with the Product Search extension available on the WooThemes extension store.

    Plugin is installed, activated, working.

    And I even used this hook in my child themes functions.php to get it to work.

    /* Remove Storefront Product Search in Header*/
    add_action( 'init', 'jk_remove_storefront_header_search' );
    function jk_remove_storefront_header_search() {
    remove_action( 'storefront_header', 'storefront_product_search',    40 );
    }
    
    /* Add Product Search extension to replace default search product*/
    if ( ! function_exists( 'storefront_all_search' ) ) {
        function storefront_all_search() {
    if ( function_exists( 'woocommerce_product_search' ) ) {
      echo woocommerce_product_search(); 
    
    } else {
            } }
    }
    
    add_action('storefront_header', 'storefront_all_search', 40);

    The question remaining is how do I style it so that it ends up styled the same as when it was the default?

    Here’s a screen grab that explains it:
    https://www.evernote.com/shard/s10/sh/318d6462-eb57-478d-81fb-8f13268eaf4f/2c8b55283d3a4890

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey,

    You’ll probably just need to apply some CSS to fix this.

    Unfortunately, without seeing a URL I cannot be more specific than that.

    Cheers

    Thread Starter mclanea

    (@mclanea)

    OK, I was able to apply a style and get this to mostly resolve.

    This part works:

    .product-search input.product-search-field[type="text"] {
    	float: right !important;
    	width: 22% !important;
    }

    The results part doesn’t work yet for some reason:

    .product-search.floating .product-search-results {
    	position: absolute;
    	z-index: 10;
    	background: #fff;
    	border: 1px solid #ccc;
    	margin: -1px 0 0;
    	float: right !important;
    }
    
    .product-search.floating .product-search-results:empty {
    	border: none;
    	float: right !important;
    }

    Here’s the URL: https://theyouthcartel.com

    Hey @mclanea you’re close!

    You just nee to apply a top and right value to .product-search.floating .product-search-results.

    Try;

    .product-search.floating .product-search-results {
    top: 50px;
    right: 0;
    }

    Cheers

    Thread Starter mclanea

    (@mclanea)

    @jameskoster – THANKS!

    Here’s what I used to finally get it to look perfect in Storefront.

    .product-search.floating .product-search-results {
    	position: absolute;
    	z-index: 10;
    	background: #fff;
    	border: 1px solid #ccc;
    	margin: -1px 0 0;
    	float: right !important;
    	top: 70px !important;
    	right: 0 !important;
    }

    Here’s everything in gist file

    You’re very welcome, thanks for sharing the gist!

    Hey James Koster & mclanea,

    I am curious if you found this Product Search extension to not display products on mobile resolutions?
    http://i.imgur.com/bykCDAM.png

    For example, see the image above. The results do not load for me on Storefront – Homestore Child theme?

    Thread Starter mclanea

    (@mclanea)

    @josephkearns – I actually deactivated this extension after logging days of work troubleshooting it. It just causes such a mess with other extensions and Event Espresso, in particular, that I couldn’t justify the perceived benefit over the time wasted trying to fix it.

    I’ve added the code to my child theme functions.php, but it doesn’t work.

    How do I replace the search in the header by the product search extension?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding Product Search extension to Storefront Header’ is closed to new replies.