The WooCommerce Product page on most themes is usually set. You have one option and only one option to display your beautiful products. The product page is fixed. You can’t do anything to the product page without adding plugins or learning how to code.
How frustrating is that?
Every WooCommerce Store owners want to increase conversions with each and every page view that our customers see. But how do we actually do that? What are some of the more in-depth and practical ways that we can transition a viewer to a paying customer? Using SukiWP, what are some real steps we can take to maximize this theme to help our bottom line gain revenue?
We are going to go through this step by step and show you right now!
Before we begin, here’s an image of the desired goal for our product page: (below, we will go into the reasons for this example)
Above, we’ve got our typical WooCommerce product page and you could possibly see a few widgets in the sidebar (unless you’ve removed them), a good healthy navigation menu at the top of the page, a clear bold header for the product page, you’ve got some images, and of course the product’s short description text showing on this page. 👍
But what else did you immediately notice about this particular product page? What caught your eye immediately? It was the REVIEWS! ⭐⭐⭐⭐⭐
Our goal here is to have reviews ABOVE THE FOLD front and center for the customers to immediately see 👀 as they land on this particular product page.
Having reviews above the fold achieves a higher level of conversions in several ways.
Establishing Trust FIRST and foremost! Since the natural behavior is to scroll down, we want to make sure that the reviews are mentioned to establish a bit of trust and validity with the potential customer before they even scroll down to read the rest of the product details like the short description, price, and information in the tabbed area of the product.
Then (after they see the reviews), the customer scrolls down to see the details of the product, right?
Ok, so here is the typical WooCommerce product page. Now, most of us/you are familiar with WooCommerce, so this next question should be pretty easy for you. However, put yourself in the customer’s perspective as you answer this next question….)
How long does it take you to notice the tab saying “Reviews (4)”?
It’s pretty small isn’t it? Yes, it is right next to the tab labelled “Description”. And, because most of us use WooCommerce, WE already know that.🧠
But still, those reviews inside that tab is NOT visible (by default) to your customers – which is exactly what you will want your customers to see.👍
You do want your customers to see your reviews, right? Ok, so let’s look at the steps and settings used to visually present those reviews to the customers as soon as they landed on this specific product page.
Settings used to achieve this:
Appearance > Suki > Custom Blocks >👇
Next, click the “Add New” button. Then select a new block and toggle open “WooCommerce” > Select “Reviews by Product” like this: 👇
Now, select the product that you would like to make reviews for. In your case, simply choose one of your products that has existing reviews
Ok, now we are going to determine WHERE we want these specific reviews to appear.
So, scroll down to the “Block Settings” area and in the first tab, select “After Header” 👇
Now we need to go to the next part where we determine “when” to display this block. So simply select “Display Rules” and you’ll want to select these specific options right here: 👇
Now, see what we are doing here?
We don’t necessarily want these reviews all over the place. We DO specifically want to display these rules to the customer as they are on the (example) “Awesome Bike Product” page.
So we select to “Show on” only the “Products (singular)” and then in the next dropdown, we select our product. Click “Update” and you are done!
Now, here’s what the “normal” product page looks like without Suki Pro’s Custom Block Feature displaying each specific product’s reviews above the product’s content.
Look at the first one on the left. Looks a bit normal, doesn’t it?
Now, look at the 2nd one on the right. See the psychological and difference that the layout presents as you look at the reviews first?
Again, let’s remember what we CAN present to our customers eyeballs and minds using Suki Pro’s Custom Blocks Option: (the 2nd one looks MUCH BETTER!)
Now I want you to remember something that is particularly exciting about the SukiWP Theme – the above was only one OF MANY ways to customize your WooCommerce Product page.
Let’s look at some more ways to customize your WooCommerce Store’s Product page.
Remember in the above image, our product page had a sidebar, right? So what happens when you do not need a sidebar for a particular product?
Think about how often we can apply that question above!
There are plenty of scenarios where we have one product that needs to stand out among the rest and we do not need any type of “filtering” sidebar widget, a “recently viewed” sidebar widget, or anything else. Perhaps we want a full width product page.
Luckily, we can do that in SukiWP! And, let’s make sure we are clear on this: We can toggle this on a PER PRODUCT BASIS! (Remember: In some themes, the sidebar is either set on or off on a site wide basis) In SukiWP, we can toggle that for each and every product.
Open your WooCommerce product page and find the part labelled Content & sidebar layout and let’s look at what those options will do.
Watch what happens if we select the option of “Wide”:
See how our product page now becomes even better!?!?! Awesome, right? We have clearly visible reviews above the fold and right in front of the visitor’s eyes. Now, we have removed any miscellaneous information in the sidebar widgets.
If you’ve studied WooCommerce store metrics for a while, you’ll know that having blog posts and various other information all over the sidebar can, quite often, distract customers from completing their add-to-cart and checkout process.
However, it’s great that you can toggle the sidebar on and off for each product using the SukiWP Theme for your WooCommerce Store.
For every product page in your store SukiWP empowers you with 4 different options:
- Left Sidebar
- Right Sidebar
Combine those width selections above with the option to add custom blocks (ANY BLOCKS) to all of these places in your theme and you start to imagine all the possible layouts for your product pages. As a reminder, here they are again:
So, you can see how your options for the design and layout of your WooCommerce Product page is beginning to take off into an imagination of infinite possibilities.
But we still have not exhausted all of the options yet. Remember these two? These are the “Content container” options which let you expand the width of any or all of your WooCommerce Product pages to stretch the full width of the browser. 👇
While we can’t accurately display the full effect of this setting because of everyone’s monitor (and the fact that our site is set to a fixed width), let’s just look at one of the best ways to showcase your WooCommerce product’s images using the “Full width” option.
Speaking of the images that we’re displaying to our customers, there is still yet another tab that we still haven’t even opened yet! 🎉#wahoo!
But let’s do a quick recap so far:
- 2 options for the “Content Container” for you to select from
- Full Width
- 4 options for the Content & sidebar layout
- Left Sidebar
- Right Sidebar
So to combine those we now have EIGHT possible options to present and show our product pages. And those 8 don’t even consider all the endless places that we can insert our custom blocks (remember those reviews) throughout our product page!
The possibilities are endless! …..or so you thought 🤔💭
Let’s open the Product Layout option and look at those options. 👇
Remember last time we left off on our demo presentation? We had the width set to Full Width. But let’s look at some more options for displaying our products. In the demo Bike Store, all of our WooCommerce product images were at the BOTTOM of the main image. So let’s see what that same product page looks like with the images to the LEFT 👇
Even using the sample images with a variable product, we still have the great option to display our product gallery images over to the left if we would like to. 👇
Fortunately, SukiWP gives us so many options that we need to recap – AGAIN! 😲#wowzers!
So, we know know that we can put our Product Gallery images in three places:
- Under the Featured Image
- To the LEFT of your Featured Image
- To the RIGHT of your Featured Image
Add that to the previously mentioned:
- Custom Container which gives you 2 options – Normal / Full Width
- Then the Custom Layout giving you 4 selections – Wide / Narrow / Left / Right Sidebar
- PLUS the 3 which empowers you to display Product Images – Under / Left / Right
That is TWENTY FOUR different ways to display your WooCommerce Products!
….well, so far. Actually there are more. Let me show you why:
Remember those custom blocks that come in your Suki Pro modules? We can’t even get into how many options that opens up! Scroll back up to that video we took showing all the options and placements for the custom blocks. Are those options starting to add up in your imagination?
Let’s just stick to the fun time we’re having multiplying all these options together. We’re about to multiply the above TWENTY FOUR options by SIX (more) into ONE HUNDRED AND FORTY FOUR options! 144!
….did you already notice the next options? 👇
There are plenty of times when you need variations in the display of your WooCommerce Products. Sometimes you have up-sells and cross sales. But then there are times when your store simply does NOT want to show those to the customer while they are viewing a specific product. So in each of these options, you can simply toggle them with a ‘yes’ or ‘no’ toggle – again, on a per product basis.
All with no additional plugins & ZERO CODING! 👇
On each product, SukiWP enables you to have a simple toggle of Yes or No – again with ZERO CODING and NO ADDITIONAL PLUGINS!
Now, if you are following along with our math here, we now have more options to multiply: 🤗
- Show Tabs of Additional Information, Reviews, & Description
- Yes / No (✖2️⃣)
- Display the WooCommerce Product Upsell area below the main product
- Yes / No (✖2️⃣)
- Show users the Related Products area for each and any given product
- Yes / No (✖2️⃣)
Again, it’s as easy as a simple mouse click and toggle! All three having two options each gives you SIX MORE options to display your WooCommerce Product Page.
Last we left off, we were at 144 Options and now, we need to multiply those by these additional 6.
Our grand total for actually multiplying all the ways that SukiWP can display your WooCommerce Product pages is now up to
(…remember though, we can add custom blocks all over the place. So there’s actually more than that as well!)
Whew! What a write up, right?