
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 );
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!
Supercharge WooCommerce With Custom Product Options
Custom product options (“add-ons”) in WooCommerce can do much more than just…
Classic vs Block: Add, Remove & Edit WooCommerce Checkout Fields
Let’s dive into the ins and outs of customizing WooCommerce checkout fields,…
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:
Send These 7 WooCommerce Emails & Watch Sales Grow
Think email marketing is too complicated? Think again… If you’re only sending WooCommerce order emails, you’re leaving money on the…
Spotting WooCommerce Conversion Rate Killers: A Live Audit
In this class, I’ll be auditing several live WooCommerce stores to identify and analyze conversion rate optimization (CRO) issues. Whether…
How to Sync WooCommerce & Google Sheets Without Plugins!
Want to connect WooCommerce with Google Sheets without relying on plugins, Zapier, Make, or third-party connectors? In this class, you’ll…
Preventing WooCommerce Checkout Carding Attacks
Carding attacks can wreak havoc on your WooCommerce store, leading to fraudulent transactions, chargebacks, spam orders, and financial loss. In…
Generate WooCommerce Test Data: Products, Orders, Users
To properly test or develop a WooCommerce site, you need a large dataset of fake products, orders, customers, and taxonomies….
Live Migrating a WooCommerce Site to HPOS
Migrating a WooCommerce site to HPOS can be complex, especially with 30,000+ orders. In this case, we’ll use the terminal…
How to Spin Up WooCommerce Test Websites For Free
Testing WooCommerce snippets, plugins, themes shouldn’t be a hassle. Let’s discover free tools to spin up test websites in minutes—no…
Log Events & Debug Custom Code with WooCommerce Logger
WooCommerce provides a simple way to log your custom events and debug your custom code and plugins. By using this…
Optimize WooCommerce Performance with WordPress Transients
Discover how WordPress transients can boost WooCommerce speed! We’ll explain what transients are, their pros and cons, and when and…
Unlocking the Power of WooCommerce Featured Products
Many developers and store owners find themselves unsure about how to effectively use featured products. Let’s change that – and…
Buying a WooCommerce Store: All You Need to Know
A guide to valuation, negotiation, and acquisition strategies – along with post-acquisition tips for optimizing and growing an existing WooCommerce…
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 to resemble the Nike website…
Live Coding a WooCommerce Mini-Plugin
Join me for a live coding session, while I try to develop a custom, commercial WooCommerce plugin in less than…
WooCommerce AMA with Rodolfo Melogli
Join me for an ‘Ask Me Anything About WooCommerce’ session – covering customization, development, plugins, analytics, marketing, forking, and more!…
Maximize Your WooCommerce Potential: Understanding User Behavior with Clarity
Learn how to use the free Microsoft Clarity plugin to record and analyze user behavior on your WooCommerce site, so…
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 you can enhance the customer…
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 by Rodolfo Melogli Masterclass overview…
Allow Multiple Payments In The Same WooCommerce Order
All deposit / split / partial payment plugins generate an additional order for paying the balance. Today, we change that….
Live Coding a Simple WooCommerce Checkout Currency Switcher
I definitely need a EUR/USD switcher in my Woo shop, and I’d love to try implementing it without a plugin….
How to Find and Fix Slow Database Queries in WooCommerce
Learn how to resolve slow database queries in WordPress / WooCommerce websites. Use the right tools to boost performance and…
Live Coding a “Deal of the Week” Functionality For WooCommerce
I’ve always wanted to set up an automatic promotion on a different Woo product each week. Let’s code it together?…
Web Accessibility Basics for WooCommerce
Accessibility in ecommerce is increasingly a legal requirement, but it also helps you expand your audience. Hosted by Bet Hannon…
How to Avoid Timeouts When Running Millions of WooCommerce Tasks
Meet Action Scheduler – a scalable processor of large queues of PHP jobs. Learn how to run bulk actions without…
WooCommerce Reimagined: Powering Up with the AI Advantage
Say goodbye to the same old, boring WooCommerce experience. Let’s dive in and see what AI can do for your…
Live Coding a WooCommerce LMS Plugin
Watch me code a simple WooCommerce plugin for selling and managing online courses. Masterclass overview My business relies on creating…
WooCommerce No-Code Automations Make* Simple
* Not a spelling mistake. Here’s how you can build entire workflows and connect WooCommerce to other apps via Make,…
Better Than Subscriptions: Building a Re-order Page in WooCommerce
Transform WooCommerce re-ordering into a seamless, customer-centric experience that goes beyond the ordinary. Hosted by Patrick Rauland Masterclass overview Join…
How to Contribute to WooCommerce Core
Learn how to contribute to the WooCommerce plugin code by submitting your first pull request (PR). Hosted by Rodolfo Melogli…
Behind the Woo Scenes: How I Run Business Bloomer
Find out how I sell, support and manage the whole business via WooCommerce, some custom code, and a handful of…
– 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.