The single product page in WooCommerce is where customers view detailed information about a specific product, including images, price, description, and an “Add to Cart” button. It is customizable and can include reviews, related products, and additional purchase options.

The WooCommerce Cart page is where customers review the items they’ve added before proceeding to checkout. 

The Checkout page is where they enter shipping details, choose payment methods, and complete their purchase. 

The Customer Account page (also called “My Account”) allows users to view their order history, manage addresses, and update account details. These pages are essential for a smooth online shopping experience.

First, let’s start with the single product page.

1. Single Product Page

The single product page is going to be the template that all your products are going to use to display the images and information.

To get there, let’s go to “store appearance” and then click on “store styling”. Wait for the page to load.

Once the page has loaded, you can click on any of the products to view the template. Scroll down and click on a product.

The product page will open and you will see what the product is going to look like. The first thing that you can edit is called the “Single Product Custom Area”.

You can edit it by clicking on the blue pencil icon.

A Panel will open where you can edit the information. This custom area will be the same for all the products, so if there is information that supports all of your products, then you can add it here.

You can add a summary of your shipping or return policy. We have already added some demo content for you which you can edit.

Layout > Woocommerce

Next, we are going to click on the back arrow button and go to the “Layout” tab and then “Woocommerce”. 

Scroll down until you reach the section labeled “Single Product”. Let’s start with the first option.

We highly recommend that you disable the block editor because the classic editor works much quicker than the block editor. It is already disabled for you.

You can also change the gallery width to skinny, regular, and wide which is the default option.

For the product short description position, we will select the option labeled top which is also the default option.

We are going to keep the “Legacy sticky add to cart bar” option disabled because we are using a different sticky cart that is more advanced.

Enable product metadata and the previous/next arrow. These options are located at the top of the page.

You also have the option to display the cross-sell carousel and the text that goes with it. You can link products to the cross-sell area when you upload a product. We recommend keeping the settings unchanged.

You can change the width of the product description container to contain the full width.

We have also added a floating black button labeled “Questions? Request a Call Back”. This button is located at the bottom right on every product page. 

A contact form will open once the customer clicks on it if they want you to call them back. Our data shows that this can potentially boost your overall conversion rate whenever the customer has any doubts about whether they want the product or not.

You can also disable this feature if you want to. You can choose how many related products you want to show on the page and you can also display the upsells.

Let’s continue with the cart page.

2. Cart Page

To modify the cart page, you need to head over to “Store Appearance” located on the left sidebar under the store dashboard, and then click on “Store Styling”.

Wait for the page to load.

Once finished, you need to scroll down and add any product to your cart so that we can view the cart when there is a product inside.

Click on the cart icon located in the header and then click on the “View Cart” button at the bottom.

The cart page will open and you will see the products added along with a calculator to the right.

You will also see a free shipping bar showcasing how much more money your customer has to add to the cart to get their shipping for free. This setting can be changed under the woocommerce settings.

Let’s edit this page.

The only component that you can edit is the trust badges under the “Proceed to checkout” button. They are used to build trust and you can leave them as they are.

Let’s see if there is anything we can do about the layout.

Layout > Woocommerce

First, go to the “Layout” tab then move to “Woocommerce” and then scroll down to the bottom where it says “Cart and Checkout”. The changes you make here will also reflect on the checkout page so we only need to do it once.

Let’s start with the progress bar which is the first option. You can enable or disable the progress bar. We recommend enabling it because it helps to show your customers how many steps they have left to make the purchase.

This is another good way to reduce cart abandonment.

You can also enable or disable cross-selling which can be set when you upload a product to boost the average order value.

You can also display the number of products you want to show in the cross-sell section.

You should make sure that both “Mobile-optimized cart page” and “Ajax update cart page quantity” are also enabled.

You should also enable “Distraction-free checkout” which helps boost conversions and leave the coupon code at the bottom.

3. Checkout Page

The next step would be to go to the checkout page. 

To get there you need to click on the “Proceed to checkout” button or on the checkout link located in the header of the store.

You will be redirected to the checkout page where you will be presented with 2 columns. The left column will contain fields where the customer needs to provide the information that will be crucial for shipping and creating their account.

They will need to add information such as their name, surname, their address phone and email. They can also add a personal note for you with additional information they might want to share.

The right column contains a short preview of their cart along with payment methods and a checkbox where they need to agree with your “Terms and conditions”. We will get to the legal pages later on.

Woocommerce > Checkout

Let’s modify the checkout page by going to the tab labeled “Woocommerce” and then clicking on “Checkout”.

In most cases, we will leave all the settings as default, but you can make changes to add or hide extra fields, mark the required fields with an asterisk, select your privacy policy page, and edit some of the legal text if needed.

Make sure to save your settings before going out.

4. Customer Account page

Next, we are going to view the customer account page. To view the account page, you need to click on the My Account link displayed in the header of the store.

If you are not logged into the website, then you will be given a login form where you need to provide your Username or email and password to log in. 

Once logged in, you will see a different dashboard created solely for your store customers.

From there, they can view their orders, and downloads for digital products, change their billing or shipping address and also change their account details, or view their wishlist.