Woo masterclasses

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

The default WooCommerce single product page template, while functional, can lack some features that can hurt your conversion rate.

Mine, for example, is quite boring, and it’s missing trust signals, visual hierarchy, and doesn’t look like a sales page:

Screenshot of one of my plugins’ sales page: https://www.businessbloomer.com/shop/plugins/woocommerce-add-multiple-products-to-cart-url/

On top of that, I serve a specific audience. And this audience needs to know certain information before making a purchase decision. The page layout and copy needs to help them with this.

If we look at similar WooCommerce websites serving the same audience, you can see that my page is really poor. See for example the Barn2 WooCommerce Product Table single product page, the IconicWP WooCommerce Delivery Slots single product page, the WooCommerce.com Product Add-Ons single product page and the YITH WooCommerce Wishlist single product page: it’s evident that I need to do much better!

By addressing these weaknesses, I will show you how I plan to create a more visually appealing, informative, and user-friendly product page that can convert visitors into customers, so that you can apply the same rules to your WooCommerce website.

This is an amazing opportunity to see how simple yet effective WooCommerce website changes can be planned and coded, so that you can learn a new thing or two for your WooCommerce website or your WooCommerce clients. It’s also a great opportunity to hang out with like-minded professionals during the live class.

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis and soccer balls and, of course, wood fired oven pizza.
Rodolfo Melogli
Rodolfo Melogli@rmelogli

Video Recording, Code Snippets & Materials

Sorry, this video recording is only visible to logged in Business Bloomer Club members.
If you are a member, please log in.
Otherwise, here is why you should join the Club.

Code Snippets

// Remove Storefront theme header
add_action( 'storefront_header', function() {
	remove_all_actions( 'storefront_header' );
}, 0 );

// Remove Storefront theme breadcrumbs
add_action( 'init', function() {
   remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
});

// Remove WooCommerce stuff: rating, sale!, price, add to cart, meta
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// Remove zoom, lightbox
add_action( 'wp', function() { 
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
    remove_theme_support( 'wc-product-gallery-slider' );
});

// Add some CSS e.g. feat image @ right
add_action( 'woocommerce_before_single_product_summary', function() {
	echo '<style>';
	echo '@media (min-width: 768px) { .storefront-full-width-content.single-product div.product .summary { float: left; } }';
	echo '@media (min-width: 768px) { .storefront-full-width-content.single-product div.product .woocommerce-product-gallery { float: right; } }';
	echo '</style>';
});

// Add CTA buttons
add_action( 'woocommerce_single_product_summary', function() {
	echo '<p><a href="#buy" class="single_add_to_cart_button button alt">Buy Now</a>&nbsp;<a href="#demo" class="single_add_to_cart_button button">View Demo</a></p>';
	echo '<ul><li>No-questions-asked 30 days money back guarantee</li><li>' . get_post_meta( get_the_ID(), 'total_sales', true ) . ' sales</li></ul>';
}, 30 );

// Remove product tabs
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );

// Output long description
add_action( 'woocommerce_after_single_product_summary', function() {
	?>
		<div class="woocommerce-tabs">
		<?php the_content(); ?>
		</div>
	<?php
});

Useful Links

What you’ll learn

The WooCommerce Single Product page weaknesses
How to “understand” your customers and find out what they need
How to implement changes with simple PHP

Requirements

Basic knowledge of PHP and WordPress hooks

Upcoming masterclasses

Available recordings

WooCommerce AMA with Rodolfo Melogli

Join me for an ‘Ask Me Anything About WooCommerce’ session – covering customization, development, plugins, analytics, marketing, forking, and more!…

– 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.

#1 WooCommerce Website Development Agency

Pixel Manager for WooCommerce Plugin

Professional Plugins for WooCommerce Stores

High-Performance WooCommerce Hosting

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.

Learn about sponsorship opportunities →

2 thoughts on “Conversion-Focused Redesign Of The WooCommerce Single Product Page”

  1. Michael

    Thanks for your mail:

    Which is a great idea, because in a few hours (10AM NY | 3PM UK | 7:30PM India | 12AM Sydney) I’m running a live class about redeveloping my WooCommerce single product page template and you can still sign up for free (34 seats left). “See” you later?

    But found out it is not for free ….?

    Reply
    1. Rodolfo Melogli

      All live classes are free. Check the upcoming ones at https://www.businessbloomer.com/club/woocommerce-masterclasses/#calendar

      Reply
Leave a Reply

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