How To Customize The Woocommerce Product Page

The Woocommere product page is one of the most important pages in your shop. This is your opportunity to clearly describe the benefits and features of your product. I’ll show you how to customize this page for maximum conversions.

I will be discussing how to do this with our Blue Angel Pro theme. This theme allows you to change the layout without manually coding it yourself.

Customize 19 Elements On The Product Page

Product Title

Navigate to Appearance-Customize-Product Page Adjust your Font Size and Font Weight. We have found that a font weight of Bold and and font size of 24 looks good for most product titles. If you make the title too large and the title is too long, it will wrap around and make your page distracting. Keep it informative yet concise and stick to one line if possible.

SideBar

If you would like to show the sidebar, select the Show Sidebar button. Note that you must have a sidebar active in order for the sidebar to render. The sidebar widgets are available under Widgets-Sidebar. You have a choice to display a left sidebar, right sidebar, or no sidebars. Out of the box, Woocommerce will display the sidebar on all pages. We believe this is distracting on key pages but you may have a good reason to show one.

Add Trust Badges

Trust badges in key locations help to build confidence with your customers. In this area you can show anything you want such as a gallery of credit card logos, your custom trust badge showing how you protect your customer during checkout, or a custom message such as shipping expectations. You can also add any custom HTML in this area including Font Awesome icons. The choice is up to you.

To add the content below the Add To Cart button, navigate to Appearance-Customize-Widgets. In order for the trust badge widget to display in your admin area, you must be viewing the Woocommerce product page. Next, add your desired widget by dragging and dropping it into the Trust Badge area. You will see your changes in real time as the widget content refreshes on the product page.

Watch this short video and I will show you how to add credit card icons in just a few minutes. You can download some high quality free credit card icons here.

Show Sticky Add To Cart Button

To increase conversions, it’s helpful to show a sticky add to cart button when the customer scrolls down the page. This call to action is highly visible, but isn’t distracting. It only uses a small area at the top and looks great on desktop or mobile and encourages your customers to begin a purchase.

To enable this option, select the Show Sticky Add To Cart Button.

Show Sales Badge

You can show or hide the sales badge for discounted items by checking the box Show Sales Badge.

Show Meta Information

Sometimes more information does not help and just overwhelms customers. If you need to hide meta information such as the SKU and product categories, just uncheck the Show Meta button.

Show Additional Information

You may need to add additional information about your product such as dimension and weight. This is needed for correct shipping calculations. You may however choose to hide this information from your customer. Select Show Additional Information to toggle this feature on or off.

Move Reviews Tab To The Bottom of The Page

If you would like to hide the additional information tab, plus move reviews to the bottom of the page, select this option. The advantage here is that all of your information is on one full width page. Customers are used to looking at the bottom of the page for reviews. It saves a mouse click and hunting around your product page if you take product reviews out of the standard tabbed area.

Show or Hide Breadcrumbs

What are breadcrumbs? Breadcrumbs show you where you are on the side such as site-name/products/accessories/my_accessory_product. This may be useful, but it also may just be useless information that is distracting your customer. Hiding the breadcrumbs also move the content up the page and gives you more room for a short description.

To hide this information, toggle the Show Breadcrumbs option.

Leave a Reply

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