Let’s Recreate the Nike Product Page in Woocommerce

Let’s analyze the Nike single product page – always lots to learn for our WooCommerce sites!

1. Visual impact: The clean design keeps the focus on the product, with stunning high-quality images. Notice how the gallery is prominent and interactive. A minimalist layout ensures no distractions. No breadcrumbs either.

2. Above the fold text content: In 5 lines of text they tell you everything: a benefit in red, the product title in bold, the product category (not linked – we don’t want customers to leave product page), the price, the current promo. Short desc is way below.

3. Variation swatches: Ugly color and size dropdowns become beautiful image and label selectors. Also, the Size Guide link and the half size up recommendation are super relevant!

4) Sticky featured image: As soon as you scroll down past the website header, and start focusing on the product, the featured image is sticky. The right column is scrollable. Next thing the customer can do is “Add to Bag” (button is unmissable, large, it stands out).

5. Shipping and Payment: No need to get to the Checkout page to find out you can pay via easy installments, that there are many shipping options and that pickup is also available.

6. Trust builders (inside toggles): Key trust elements like reviews, shipping info, and return policies are displayed close to the product details. This builds confidence before checking out.

7. Reviews toggle: There are thousands of reviews. So they show the latest 3, then give you a lovely “More Reviews” link, that displays the other 1626 reviews in a popup. Great use of (little) space!

8. Social proof: Yeah reviews are great, but could be fake! What about showing people who wear your shoes? Thankfully IG is full of them 🙂

9. “Complete the look”: That sounds MUCH better than “You may also be interested in…”. Their product is bundled together with complementary products, and on click there is a popup where you can add all or some to the cart.

10. “Long” description: Finally, here comes the product description. For this product, we have 50 words and 3 full width images. Clearly, no one cares about reading – a great pic is enough!

11. Product recommendations: In case you’re not 100% sure about THIS product, why not check some other recommendations? Their engine gives you the best possible matches.

Hope this was helpful! Want to know how to recreate this iconic product page for your WooCommerce store?

Code Snippet:

// Remove breadcrumbs (Storefront theme)
add_action( 'storefront_before_content', function() {
   remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}, 9 );
 
// Remove Sale! badge
add_filter( 'woocommerce_sale_flash', '__return_null' );
 
// Display tags above product title
add_action( 'woocommerce_single_product_summary', function() {
   $terms = get_the_terms( get_the_ID(), 'product_tag' );
   if ( $terms ) {
      $term_names = array();
      foreach ( $terms as $term ) {
         $term_names[] = $term->name;
      }
      echo implode( ', ', $term_names );
   }
}, 4 );
 
// Display cats below product title
add_action( 'woocommerce_single_product_summary', function() {
   $terms = get_the_terms( get_the_ID(), 'product_cat' );
   if ( $terms ) {
      $term_names = array();
      foreach ( $terms as $term ) {
         $term_names[] = $term->name;
      }
      echo implode( ', ', $term_names );
   }
}, 6 );
 
// Remove rating from below the product title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
 
// Replace Variable Price With Variation Price
add_action( 'woocommerce_variable_add_to_cart', function() {
   global $product;
   $price = $product->get_price_html();
   wc_enqueue_js( "     
      $(document).on('found_variation', 'form.cart', function( event, variation ) {   
         if(variation.price_html) $('.summary > p.price').html(variation.price_html);
         $('.woocommerce-variation-price').hide();
      });
      $(document).on('hide_variation', 'form.cart', function( event, variation ) {   
         $('.summary > p.price').html('" . $price . "');
      });
   " );
});
 
// Remove short description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
 
// Remove "Clear" Link
add_filter( 'woocommerce_reset_variations_link', '__return_empty_string', 9999 );
 
// Remove "meta"
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
 
// Add content above add to cart
add_action( 'woocommerce_before_add_to_cart_button', function() {
   echo '<div>Pay by Credit Card or PayPal with no fees!</div>';
});
 
// Add content below add to cart
add_action( 'woocommerce_after_add_to_cart_button', function() {
   echo '<h4>Shipping</h4><p>You\'ll see our shipping options at checkout.</p><h4>Free Pickup</h4><p>Find a Store</p>';
});
 
// Add short description at position 40
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 40 );
 
// Add reviews at position 41
add_action( 'woocommerce_single_product_summary', 'comments_template', 41 );
 
// Turn Reviews into a toggle
add_action( 'woocommerce_single_product_summary', function() {
   wc_enqueue_js( "
      $('.commentlist,#review_form_wrapper').hide();
      $(document).on('click','.woocommerce-Reviews-title',function(){
         $('.commentlist,#review_form_wrapper').toggle();
      });
   " );
}, 42 );
 
// Customize Reviews toggle title
add_filter( 'woocommerce_reviews_title', function( $reviews_title, $count, $product ) {
   return 'Reviews (' . $count . ')<span style="float: right" class="toggle">&nbsp;&nbsp;&#x25BC;</span><span style="float: right">' . wc_get_rating_html( $product->get_average_rating() ) . '</span>';
}, 9999, 3 );
 
// Remove product tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
 
// Display long description at position 14
add_action( 'woocommerce_after_single_product_summary', 'the_content', 14 );
 
// Remove Related products
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
 
// Display "Complete the Look" section
add_action( 'woocommerce_after_single_product_summary', function() { 
   global $product;
   $args = array(
      'type' => 'grouped',
      'status' => 'publish',
      'limit' => -1,    
   );
   $grouped_products = wc_get_products( $args );
   $product_ids = array();
   foreach ( $grouped_products as $grouped_product ) {
      if ( in_array( $product->get_id(), $grouped_product->get_children() ) ) {
         $product_ids[] = $grouped_product->get_id();
      }
   }
   if ( $product_ids )  {
      echo '<h2>Complete the Look</h2>';
      echo do_shortcode( '[products ids="' . implode( ',', $product_ids ) . '"]' );
   }
}, 13 );
 
// Include pattern/post with Instagram embeds
add_action( 'woocommerce_after_single_product_summary', function() { 
   echo '<h2>How Others Are Wearing It</h2>';
   echo '<p>Mention @Stride on Instagram for a chance to be featured.</p>';
   $page_id = 243112;
   $page_object = get_post( $page_id );
   echo apply_filters( 'the_content', $page_object->post_content );
}, 12 );