1-Hour WooCommerce Challenge: Let’s Recreate the Nike Product Page

Join me for a live coding challenge, where Ill customize the WooCommerce Single Product page to resemble the Nike website as closely as possible.

Hosted by Rodolfo Melogli

Session overview

Ready to take your WooCommerce skills to the next level? Join me for a live, fast-paced coding challenge where I’ll attempt to recreate the Nike product page using WooCommerce in under an hour!

In this interactive session, I’ll walk you through the steps to design a visually compelling and highly functional product page, similar to one of the world’s top eCommerce sites. From customizing the layout to refining the product details, images, and related products, we’ll see how WooCommerce can transform with the right tweaks.

Whether you’re aiming to enhance your own product pages or just want to see how advanced customizations come together in real time, this session will provide hands-on insights and practical code examples.

Expect tips on creating a high-conversion layout, adding dynamic elements, and using essential WooCommerce customization techniques. Throughout the challenge, you can engage, ask questions, and even test out some of the code yourself.

By the end of this live challenge, you’ll have a clear roadmap for building your own polished product pages that rival big brands. So, bring your WooCommerce curiosity, and let’s see how close we can get to Nike’s page style—right before your eyes!

Don’t miss this chance to learn, code, and connect with the WooCommerce community in real time!

Video Recording

Useful Links

Code Snippets

// 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 );

Upcoming masterclasses

As a Business Bloomer / WooWeekly subscriber you can attend as many live classes you wish – for free. Here’s a list of upcoming events (we usually take a break for June-August, otherwise you should expect about 2 classes per month). Make sure to attend live so you can interact with the teacher and the other attendees!

Available webinar recordings

As a Business Bloomer Club member you have full lifetime access to previous class recordings (as well as online courses, private community and more). Here’s the list of all past classes:

1 2 3
IT Monks is a leading WordPress development agency with over 15 years of experience in custom WooCommerce design and development, delivering 500+ successful eCommerce projects.

6 thoughts on “1-Hour WooCommerce Challenge: Let’s Recreate the Nike Product Page

  1. Nice!

    Thanks for the content.

    Already a dev etc but was still interesting to see this timed approach to building a page

  2. Thank you, Rodolfo

  3. Will replays of the live sessions be available to watch later?

    1. Yes! Business Bloomer Club members have lifetime access to all recordings.

Leave a Reply

Your email address will not be published. Required fields are marked *