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
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 );
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!
Log Events & Debug Custom Code with WooCommerce Logger
WooCommerce provides a simple way to log your custom events and debug…
How to Spin Up WooCommerce Test Websites For Free
Testing WooCommerce snippets, plugins, themes shouldn’t be a hassle. Let’s discover free…
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:
Optimize WooCommerce Performance with WordPress Transients
Discover how WordPress transients can boost WooCommerce speed! We’ll explain what transients are, their pros…
Unlocking the Power of WooCommerce Featured Products
Many developers and store owners find themselves unsure about how to effectively use featured products….
Buying a WooCommerce Store: All You Need to Know
A guide to valuation, negotiation, and acquisition strategies – along with post-acquisition tips for optimizing…
1-Hour WooCommerce Challenge: Let’s Recreate the Nike Product Page
Join me for a live coding challenge, where I’ll customize the WooCommerce Single Product page…
Live Coding a WooCommerce Mini-Plugin
Join me for a live coding session, while I try to develop a custom, commercial…
WooCommerce AMA with Rodolfo Melogli
Join me for an ‘Ask Me Anything About WooCommerce’ session – covering customization, development, plugins,…
Maximize Your WooCommerce Potential: Understanding User Behavior with Clarity
Learn how to use the free Microsoft Clarity plugin to record and analyze user behavior…
Mastering WooCommerce Thank You Page Customization: A Plugin-Free Approach
Let’s learn how to personalize the WooCommerce Thank You page with simple code, so that…
Conversion-Focused Redesign Of The WooCommerce Single Product Page
Let’s improve the boring WooCommerce Single Product page and encourage MORE users to convert. Hosted…
– BACKED BY –
Is your WooCommerce store prepared for traffic spikes? Improve speeds up to 200% with our
managed WooCommerce hosting. Enjoy scalable server resources, rock-solid security, and 24/7 support.
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.