Modifying search.php in Storefront Child Theme

  • Resolved alexWP333

    (@alexwp333)


    10 years, 8 months ago

    I’m trying to add a visual element to the layout of the search results pages of my Storefront site.

    First, I copied the search.php file from my Storefront theme’s parent folder to the child folder, and then I adding the new code there. The new visual element did not appear on the site.

    Next, I temporarily added code to the search.php file in the parent folder, just to see if it would work there, but still the new code wasn’t showing up.

    Finally, as a test, I temporarily removed the storefront_sidebar code from the search.php file in the parent folder, but when I went to the site the sidebar was still there.

    Why are the search pages of my site unaffected by the code changes that I’ve tried?

    site’s search page is here

Viewing 7 replies - 1 through 7 (of 7 total)
  • James Koster

    (@jameskoster)

    10 years, 8 months ago

    Hey,

    This is a quirk of WooCommerce. The search.php template file is for posts. The product search uses the WooCommerce archive-product.php template file.

    To add something to that template you should hook it in to one of the present actions and use the is_search() conditional to only display it on search results.

    Cheers

    Thread Starter alexWP333

    (@alexwp333)

    10 years, 8 months ago

    Thanks James,

    I have two questions:

    First, where can I find the archive-product.php file? I looked in the Storefront parent folder, and just found an archive.php file. I also looked in various folders in plugins > woocommerce, but still don’t see the archive-product.php file.

    Second, when I do get to the archive-product.php file, would the code that I need to add be in this format?

    function add_visual_element () {
if (is_search()){
... code to add visual element here ...
}
}
add_action('posts_selection', 'add_visual_element');

    Thread Starter alexWP333

    (@alexwp333)

    10 years, 8 months ago

    I found the location of the archive-product.php file, under the templates folder.

    The only thing I need to know now is whether the code above is correct, or if your suggestion to “hook it in to one of the present actions” involves a different code snippet.

    Any code details you can provide would be appreciated.

    James Koster

    (@jameskoster)

    10 years, 8 months ago

    Hey,

    You should definitely hook it in. If you modify that template you’ll lose your customisation when you update WooCommerce.

    The code should look something like;

    function add_visual_element () {
if ( is_search() ){
... code to add visual element here ...
}
}
add_action( 'woocommerce_before_shop_loop', 'add_visual_element', 10 );

    Cheers

    Thread Starter alexWP333

    (@alexwp333)

    10 years, 8 months ago

    Thanks for your help.

    I created a new subfolder under my storefront-child folder, and called this new subfolder “woocommerce”.

    Next, I copied the original archive-product.php file (the one that was in the woocommerce > templates folder) and placed this copy into my new “woocommerce” subfolder.

    Lastly, I modified the code in this new archive-product.php file that’s in the “woocommerce” subfolder.

    Since the modifications that I made were to the new copy of the archive-product.php file that’s in the “woocommerce” subfolder, I’m hoping that any future updates to WooCommerce will not wipe away the customizations that I’ve made.

    Does this sound like a safe assumption for me to make?

    James Koster

    (@jameskoster)

    10 years, 8 months ago

    Yup, that’s safe. Just be sure to check the core version of that template file after a major WooCommerce core update to make sure you’re not missing any important changes.

    Thread Starter alexWP333

    (@alexwp333)

    10 years, 8 months ago

    Great. Many thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Modifying search.php in Storefront Child Theme’ is closed to new replies.