7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Customize a WooCommerce Product Page for Free

Scroll to top
Read Time: 8 mins

Creating a fully functioning eCommerce store requires you to take care of a lot of big and small things. Any website that you create to sell products will have different types of pages to address different needs. Dedicated product pages are one such example.

A product page allows you to provide all the necessary information about the product that your users like in one place. WooCommerce does come with its own default product pages, but you might see better results with your own custom pages. In this tutorial, you will learn how to customize a WooCommerce product page for free in a step-by-step process.

Options for Customizing a WooCommerce Product Page

The beauty of WordPress is that it gives you a lot of different options to do the same task. WooCommerce product pages are no different. There are both free and paid options available for customizing a page. Our focus in this tutorial will be on getting it done for free. However, remember that it is often easier to use premium plugins to do things in WordPress.

  1. Page Builders: Not all page builders come with built-in support for WooCommerce building blocks, but some of them do. For example, you can use page builders like Elementor and Visual Composer to create customized WooCommerce product pages. This is quite easy to do but usually requires a paid or pro version of the builders.
  2. Dedicated Plugins: WooCommerce comes with some hooks for actions and filters that can be used to add or remove content from the product page or other places. There are dedicated plugins relying on these hooks that you can use to make changes to the product page.
  3. Custom Code: This is the most complicated way of creating customized WooCommerce product pages, but it is also the most powerful. You don't have to spend any money and will have full control, but there is a risk of making mistakes if you are just starting out.

Customizing a WooCommerce product page for free will require some additional effort on your part. We will use a combination of dedicated plugins and some CSS to get things done.

Getting Started

I will start this tutorial under the assumption that you have already installed a theme of your choice and completed a basic setup of WooCommerce like adding some products. Here, we will use the free Storefront theme available on WordPress. It is free, simple, and was created by core WooCommerce developers themselves. You will probably be using a different theme, so the screenshots in the tutorial will differ from what you see when customizing your page.

The image below shows what my default WooCommerce product page looks like with Storefront.

WooCommerce Product Page: Initial VersionWooCommerce Product Page: Initial VersionWooCommerce Product Page: Initial Version

There is also a section at the bottom of the page which shows some related products to viewers.

WooCommerce Product Page: Related ProductsWooCommerce Product Page: Related ProductsWooCommerce Product Page: Related Products

Customizing the Existing Elements on Product Page

We will use the StoreCustomizer plugin to make changes to the appearance of our WooCommerce product page. Once you have installed the plugin, head over to Appearance > Customize > StoreCustomizer in the admin dashboard from the main menu.

You will then see a few menu items to customize different types of WooCommerce pages. Go ahead and click on WooCommerce Product Page.

StoreCustomizer MenuStoreCustomizer MenuStoreCustomizer Menu

You should see different subsections now which contain options to make changes to different parts of the product page. At the top, there are checkboxes to remove the breadcrumbs navigation, image zooming, and lightbox features. I am keeping them all unchecked except the lightbox.

StoreCustomizer Top OptionsStoreCustomizer Top OptionsStoreCustomizer Top Options

Then there are options to add a default prefix or suffix to the product price. Check the Add a default Price Prefix checkbox and put the word Only in the input box.

Our initial product page had three tabs for the description, additional information, and reviews of the product. We will now remove the Reviews section from the tab by selecting the Remove Tab radio button. The reviews will appear below the tabs in a separate section of their own. We can do this by checking Add Product Reviews after Tabs. The customizer gives us the option to make further changes to the spacing of the reviews section or adding dividers above and/or below it.

StoreCustomizer Review SectionStoreCustomizer Review SectionStoreCustomizer Review Section

Our product page shows three related products by default. StoreCustomizer allows us to change the number of products shown, as well as the items per row. I have set the Products Per Row value to 4.

StoreCustomizer Related ProductsStoreCustomizer Related ProductsStoreCustomizer Related Products

There are a few more settings at the bottom of the plugin to change the color and size of elements like the product title and price. You can also set a color for the Add to Basket button.

StoreCustomizer Cart Button OptionsStoreCustomizer Cart Button OptionsStoreCustomizer Cart Button Options

Adding More Elements on the Product Page

We will now use another free plugin called Single Product Page Customizer to place content in different parts of the page. Some of this content would be static, and other parts would be dynamic, like showing users a list of best-selling products.

Once you have installed the plugin, go to WooCommerce > Single Product Page Customizer. The plugin comes with a guide map to show you different places where you can put your own content. Click on the Add New Position button to select a position for your content. This will show you an editor like the image below. You can select something from the dropdown menu and then switch to the text tab. This will allow us to put our own custom HTML on the page.

Let's begin by placing a banner at the top of each product page. Select woocommerce before single product from the dropdown and then place the following HTML in the editor.

Here is a screenshot for reference:

Single Product Page EditorSingle Product Page EditorSingle Product Page Editor

We will also be showing some best-selling products from our website on the product page right after the product summary by selecting the woocommerce after single product summary option from the position dropdown. We have used one of the many available WooCommerce shortcodes here to show the four best-selling products.

Let's say you want to show some general information regarding the return and shipping policy on a product page. We can do that by selecting the woocommerce after add to cart button option from the position dropdown. Here is the HTML that I put inside by editor:

Using CSS to Make Visual Changes

CSS is essential for laying out and visually styling elements on a webpage. Now that we have placed all our desired HTML content on the product page, it's time to use some CSS in order to present it all in a way we like.

This part can be a bit tricky if you have never used CSS before. This is because just a simple copy paste might not result in the same changes on your end if you are using a different theme or slightly different HTML structure from my version. A little familiarity with CSS will come in handy at this point.

Getting back to the task at hand, you can head over to the WordPress dashboard and navigate to Appearance > Customize > Additional CSS to place your own custom CSS. Here is the CSS that I used:

The rules applied on the first few selectors are meant for our Single Product Page Customizer. Others are to make changes to existing elements within our storefront theme.

The product page should look like the following image after you have updated the CSS.

Customized WooCommerce Product PageCustomized WooCommerce Product PageCustomized WooCommerce Product Page

The description and additional information tabs are also no longer directly below the product summary. We have added a row of best-selling products just before them.

WooCommerce Product ReviewWooCommerce Product ReviewWooCommerce Product Review

You should try and make small changes to the visual appearance of these two sections yourself as practice. For example, you could make the headings bolder and change the color of Add to Cart buttons.

Final Thoughts

As I mentioned at the beginning of the tutorial, there are a lot of ways to customize a WooCommerce product page in WordPress. The ideal route for you will depend on your budget, available time, and coding skills. Usually, the easiest way to get things done is with paid plugins or page builders that offer a bunch of features to let you create custom product pages in no time.

However, you can also customize a product page for free by using a combination of free plugins and a little bit of CSS. You will have a lot more control over the content of the page if you have decent coding skills, but the concepts we covered in this tutorial should be enough for all your basic needs.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.