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:
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.
Video Recording, Code Snippets & Materials
(apologies about the “We’re almost live!” notification in the video recording – I forgot to remove it during the live session and unfortunately there’s nothing I can do about it)
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> <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
- Google Doc with notes https://docs.google.com/document/d/1tRjd2l9QWWfXnLltCQVkqLADq2tCG8phvvibk64JoHQ/edit?usp=sharing
- Single product page hooks https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/#actions
- WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product https://www.businessbloomer.com/woocommerce-disable-zoom-gallery-slider-lightbox-single-product/
- Storefront Theme: How To Remove Breadcrumbs
- WooCommerce: Remove Product Tabs, Show Long Description https://www.businessbloomer.com/woocommerce-remove-product-tabs-echo-long-description/
- WooCommerce Name Your Price sales page https://woocommerce.com/products/name-your-price/
- CommerceGuru’s CommerceKit sales page https://www.commercegurus.com/commercekit/
- Advanced Product Fields for WooCommerce sales page https://www.studiowombat.com/plugin/advanced-product-fields-for-woocommerce/
- Pixel Manager for WooCommerce sales page https://sweetcode.com/plugins/pmw
What you’ll learn
Requirements
Upcoming masterclasses
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 recordings
Allow Multiple Payments In The Same WooCommerce Order
All deposit / split / partial payment plugins generate an additional order for paying the…
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…
How to Find and Fix Slow Database Queries in WooCommerce
Learn how to resolve slow database queries in WordPress / WooCommerce websites. Use the right…
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…
Web Accessibility Basics for WooCommerce
Accessibility in ecommerce is increasingly a legal requirement, but it also helps you expand your…
How to Avoid Timeouts When Running Millions of WooCommerce Tasks
Meet Action Scheduler – a scalable processor of large queues of PHP jobs. Learn how…
WooCommerce Reimagined: Powering Up with the AI Advantage
Say goodbye to the same old, boring WooCommerce experience. Let’s dive in and see what…
Live Coding a WooCommerce LMS Plugin
Watch me code a simple WooCommerce plugin for selling and managing online courses. Masterclass overview…
WooCommerce No-Code Automations Make* Simple
* Not a spelling mistake. Here’s how you can build entire workflows and connect WooCommerce…
– 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.
Thanks for your mail:
But found out it is not for free ….?
All live classes are free. Check the upcoming ones at https://www.businessbloomer.com/club/woocommerce-masterclasses/#calendar