WooCommerce 3.0特色产品代码放置位置咨询

Hey there! Since you're new to WordPress and the StoreFront theme, let's break down exactly where you can put that featured products code—first and foremost, always use a child theme! If you edit the parent StoreFront files directly, all your changes will get wiped when the theme updates, and that's a huge headache.

Option 1: Add to a Template File (For Fixed Placement) #

If you want the featured products to show up in a specific, fixed spot (like the homepage or a custom page):

1. Copy the parent theme template to your child theme:
   • For the homepage: Grab front-page.php from the StoreFront parent theme folder (wp-content/themes/storefront) and paste it into your child theme folder (wp-content/themes/storefront-child).
   • For a custom page: Create a new file called page-featured-products.php in your child theme, add this template header at the top:

     <?php
     /*
     Template Name: Featured Products Page
     */
     get_header(); ?>
     

2. Insert your code in the right spot:
   • Open the copied/created file, and find where you want the products to appear (e.g., right after the header, or before the footer).
   • Paste your code there—make sure it's inside PHP tags if the surrounding content is PHP, or wrap it in <?php ... ?> if it's in an HTML section.

Option 2: Turn It Into a Shortcode (Super Flexible!) #

This is my favorite option because it lets you add the featured products anywhere—pages, posts, widgets, you name it. Here's how:

1. Open your child theme's functions.php file.
2. Paste this modified version of your code (it wraps your product loop into a shortcode):

   function custom_featured_products_shortcode() {
       ob_start(); // Capture output to return as shortcode content
       ?>
       <ul class="products">
           <?php
           $args = array(
               'post_type' => 'product',
               'posts_per_page' => 12,
               'tax_query' => array(
                   array(
                       'taxonomy' => 'product_visibility',
                       'field' => 'name',
                       'terms' => 'featured',
                   ),
               ),
           );
           $loop = new WP_Query( $args );
           if ( $loop->have_posts() ) {
               while ( $loop->have_posts() ) : $loop->the_post();
                   wc_get_template_part( 'content', 'product' );
               endwhile;
           } else {
               echo __( 'No products found' );
           }
           wp_reset_postdata();
           ?>
       </ul>
       <?php
       return ob_get_clean(); // Return the captured content
   }
   add_shortcode( 'custom_featured_products', 'custom_featured_products_shortcode' );
   

3. Save the file, then go to any page/post editor and type [custom_featured_products]—your featured products will show up there! You can even use this shortcode in a Text/HTML widget (most sites allow shortcodes in widgets by default these days).

Option 3: Use StoreFront's Action Hooks (For Theme-Wide Placement) #

StoreFront has built-in hooks that let you add content to specific areas without editing template files. For example, if you want featured products to show up right below the header on every page:

1. Open your child theme's functions.php file.
2. Paste this code:

   function display_featured_products_via_hook() {
       ?>
       <ul class="products">
           <?php
           $args = array(
               'post_type' => 'product',
               'posts_per_page' => 12,
               'tax_query' => array(
                   array(
                       'taxonomy' => 'product_visibility',
                       'field' => 'name',
                       'terms' => 'featured',
                   ),
               ),
           );
           $loop = new WP_Query( $args );
           if ( $loop->have_posts() ) {
               while ( $loop->have_posts() ) : $loop->the_post();
                   wc_get_template_part( 'content', 'product' );
               endwhile;
           } else {
               echo __( 'No products found' );
           }
           wp_reset_postdata();
           ?>
       </ul>
       <?php
   }
   // Hook the function to run right after the StoreFront header
   add_action( 'storefront_after_header', 'display_featured_products_via_hook' );
   

3. You can swap out storefront_after_header with other StoreFront hooks like storefront_before_content, storefront_before_footer, or storefront_after_footer to place the products wherever you want.

Quick Notes to Avoid Headaches #

• Always backup your files before making changes—if something breaks, you can revert easily.
• Make sure WooCommerce is active and you've actually marked some products as "Featured" (edit a product, check the "Featured" box in the right sidebar).
• If your code doesn't show up, double-check that you're editing the child theme files, not the parent theme.

内容的提问来源于stack exchange，提问作者Sibongile