• Resolved pict3000

    (@pict3000)


    I am looking for the php file that outputs the html for the body of the homepage in Woocommerce’s “Storefront” theme– i.e. everything between the header and the footer.

    I’ve looked in every folder and php file in storefront’s directory, homepage-template.php, index.php, functions.php and on and on, as well as in woocomerce’s entire directory. I don’t see any of that html anywhere. I know it comes from different directions, so to be more specific, I would love to start with finding these elements in the php files:

    <div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    			<section class="storefront-product-section storefront-product-categories"><h2 class="section-title">Product Categories</h2><div class="woocommerce columns-3"><ul class="products"><li class="product-category product first">

    Does anyone know where this is?

Viewing 7 replies - 1 through 7 (of 7 total)
  • <div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">

    Is in template-homepage.php.

    The markup for products comes from several places. I really need to know what you’re trying to do before I can direct you there.

    Thread Starter pict3000

    (@pict3000)

    James, because this is the only code in template-homepage:

    get_header(); ?>
    
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    			<?php
    			/**
    			 * @hooked storefront_page_content - 10
    			 * @hooked storefront_product_categories - 20
    			 * @hooked storefront_recent_products - 30
    			 * @hooked storefront_featured_products - 40
    			 * @hooked storefront_popular_products - 50
    			 * @hooked storefront_on_sale_products - 60
    			 */
    			do_action( 'homepage' ); ?>
    
    		</main><!-- #main -->
    	</div><!-- #primary -->
    <?php get_footer(); ?>

    you can see why I’m unable to find the html. Apparently, the markup I’m looking for is buried in the line * @hooked storefront_product_categories - 20. So how do I drill down into that?

    What am I trying to do? In this particular case I’m trying to experiment with various category-image sizes, and rearrange neighboring text accordingly. But from here on out I will always need to be able to find whatever html I may choose, for whatever manipulation I may need, for any location on any web page anywhere on my site, for any design reason that may arise.

    So where are these ‘hooked’ blocks of code so I can manipulate the html they output?

    Thread Starter pict3000

    (@pict3000)

    Following up on my previous post, I found the <section> string in storefront/inc/structure/template-tags.php when I did a search for that html in my WP files. So I got pretty close to the image source part that would let me change image sizes, etc., but a search for any part of <img src="http://4ninths.com/wp-content/uploads/2015/02/music-450x600-150x150.jpg" alt="Music" width="150" height="150"> didn’t give me any search results.

    The images I have there now (4ninths.com) are the theme’s stock photos. I know how to change them in admin, but I want total control.

    So to revise my question, where would I find the php that generates the “img src” for homepage product categories?

    This is exactly why I asked you what you’re trying to do 🙂 In this case you do not need to touch any code to change the image sizes. There’s a setting in WooCommerce for that. Tweak the dimensions there then run the Regenerate Thumbnails plugin and you’re done.

    FYI: The product templates actually come from WooCommerce and work in a similar way (functions hooked into actions). Take a look at content-product.php and content-product_cat.php for more information.

    I appreciate there’s a bit of a learning curve to doing things this way for some folks, but it’s worth it for the flexibility / stability that this solution provides.

    EDIT, I am James Koster, didn’t realise I was logged in to our Woo account, sorry for any confusion 🙂

    Thread Starter pict3000

    (@pict3000)

    Great advice, thank you!

    It all worked great. Now all I need to do is bone up on actions and filters and hooks and I’ve got the control I’m looking for.

    I am also using theme
    Is it possible to show short description of products on home page with Read More link ?
    Thanks

    How many storefront @hooked can I use?
    Is there any @hooked contact or address?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘"Storefront" homepage: where is the PHP/HTML for…’ is closed to new replies.