Join me for a live coding challenge, where I‘ll 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
If you are a member, please log in.
Otherwise, here is why you should join the Club.
Useful Links
- Nike Single Product page: https://www.nike.com/t/air-max-sc-womens-shoes-CwMCK7/CW4554-118
- WooCommerce Single Product Page Visual Hook Guide: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
- WooCommerce: Remove or Rename SALE! Badge https://www.businessbloomer.com/woocommerce-remove-sale-badge-everywhere/
- WooCommerce: Replace Variable Price With Active Variation Price https://www.businessbloomer.com/woocommerce-replace-variable-price-with-variation-price/
- WooCommerce: Remove “Clear” Button @ Variable Product Page https://www.businessbloomer.com/woocommerce-remove-clear-button-variable-product-page/
- WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product https://www.businessbloomer.com/woocommerce-disable-zoom-gallery-slider-lightbox-single-product/
- WooCommerce: Display Product Gallery Vertically (Single Product Page) https://www.businessbloomer.com/woocommerce-display-product-gallery-vertically-single-product/
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"> ▼</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 );
More WooCommerce Masterclasses
Here’s a list of free live webinars and member-only class recordings (we usually take a break for June-August, otherwise you should expect about 2 live classes per month). Make sure to attend live so you can interact with the teacher and the other attendees!
-
WooCommerce Plugin Marketing 4 Week Cohort 001
Live Cohort: MEMBERS ONLY Recordings: MEMBERS ONLY This 4-week hands-on cohort is for developers ready to grow their WooCommerce plugin. We’ll not just learn—we’ll get…
-
Why You Should Build WooCommerce Products in Public
Building a WooCommerce product or service in private is no longer enough. In today’s AI-driven world, the first people to see your work often determine…
-
WooCommerce in 2027: The New Admin Design
Live Class: FREE Recordings: BBCLUB MEMBERS ONLY WooCommerce hasn’t meaningfully refreshed its admin UX in years, while competitors keep raising the bar. In this session,…
-
Finding Your Next 10 WooCommerce Clients
Discover how to land your next 10 WooCommerce clients. This session is for freelancers, agencies, consultants, and product owners who want a clear, practical strategy…
-
WooCommerce Plugin Marketing 101: Your First 1,000 Users
Most WooCommerce plugins never reach 1,000 active installs—but hitting that milestone is crucial for validating your product before going PRO. In this class, I’ll show…
-
WooCommerce Settings API: Build Custom Option Pages
Stop cluttering the WordPress admin menu with separate settings pages! Learn to create professional, native-feeling custom tabs and options right inside the WooCommerce Settings interface.…
-
WooCommerce Database Walkthrough: Tables Explained
Tired of relying on guesswork when querying crucial WooCommerce data? This is your essential tour. We will walk you table-by-table through the WooCommerce database schema,…
-
From Woo Plugins to Shopify Apps Dev: Is it Worth it?
You’ve mastered WooCommerce plugin development. But is the scalable income of the Shopify App Store worth the pivot? This session provides a clear-eyed look at…
-
Avoid Costly Mistakes: Spotting WooCommerce Client Red Flags
Are you tired of projects that go over budget, clients who ghost, or customers who drain support? Bad clients — whether for consulting, development, or…
-
Classic vs Block: Add, Remove & Edit WooCommerce Checkout Fields
Let’s dive into the ins and outs of customizing WooCommerce checkout fields, comparing the Classic Checkout with the Checkout Block. You’ll see exactly what’s possible…
-
Behind the Scenes: The Making of Checkout Summit 2026
What does it really take to build a WooCommerce site that can handle a major international conference? For Checkout Summit 2026, I started with nothing…
– BACKED BY –
















Nice!
Thanks for the content.
Already a dev etc but was still interesting to see this timed approach to building a page
Glad you enjoyed it!
Thank you, Rodolfo
My pleasure!
Will replays of the live sessions be available to watch later?
Yes! Business Bloomer Club members have lifetime access to all recordings.