How to customise a Woo­Com­merce product page

A unique, original product page is sometimes the decisive factor in gen­er­at­ing more sales and creating interest in your online store. Woo­Com­merce’s default features leave little room for custom product pages. Not to worry, in addition to built-in WordPress features, plugins like Store­Cus­tom­izer, or page builders like Elementor offer flexible settings and designs. Let’s take a look at editing a Woo­Com­merce product page.

Why is it be­ne­fi­cial to edit a Woo­Com­merce product page?

The answer is simple. An in­di­vidu­al style, con­sist­ent product branding, and user-friendly UX will lend your online store a certain cred­ib­il­ity and help sale con­ver­sions. As with store displays, the way a product shows itself off is almost as important as its quality. Visitors will be persuaded to buy a product more reliably if it is branded and presented well.

If you use the default Woo­Com­merce product pages, you will quickly notice that the options for custom settings are limited. However, you don’t have to settle for the default design if you want to jazz up your online store. Seeing as it is re­l­at­ively com­plic­ated and not without risks to redesign product pages with changes in the source code, we recommend various free plugins as well as features that are already included in WordPress and Woo­Com­merce.

Methods for cus­tom­ising a Woo­Com­merce product page

From Woo­Com­merce product page templates to WordPress. Use the following options to customise product pages as needed:

Via Plugins (using Store­Cus­tom­izer as an example)

The easiest way to edit your online store including product pages are plugins like SeedProd, Store­Cus­tom­izer or WooBuild­er, which work in a similar way to page builders. SeedProd is one of the most popular page builders, is updated regularly and has already been installed by over a million users. However, the most important functions for product pages are only available in the paid Pro version. Therefore, using Store­Cus­tom­izer as an example, we will explain how to edit your product pages with a drag-and-drop plugin com­pletely free of charge. Note that you cannot install plugins with the free WordPress.co.uk package.

Step 1: Install the plugin Store­Cus­tom­izer from the man­u­fac­turer’s site or directly from the download page for WordPress-Plugins. After in­stall­a­tion you need to activate the plugin.

Step 2: Now go to ‘Design’ on your Woo­Com­merce store page and then ‘Customize’ > ‘Store­Cus­tom­izer’ > ‘Woo­Com­merce Store Page’. You can use different features in the plugin to customise the page. You can find all the settings and features in the left menu bar. These include settings for font size, colours, page design and layout.

Step 3: An important feature of Store­Cus­tom­izer includes removing pre-installed Woo­Com­merce page elements like store titles or sorting results. Simply place a checkmark next to elements you want to remove.

Step 4: You can also set the number of displayed products per page and per row and add a label for new products with ‘New badge for recently added products’. For this, you specify how long items are con­sidered new after they are added. You can also enable front-end sales stat­ist­ics for products to highlight top sellers.

Step 5: Use editor functions to customise store buttons or product de­scrip­tions or change the design for store buttons or page elements such as banners and margins.

Step 6: For product pages, Store­Cus­tom­izer offers cus­tom­isa­tion for all page elements. This includes product tabs, the shopping cart button, the product price, the product photo, the number of sold products, the de­scrip­tion and the display of similar products or product reviews.

Without Plugins (Using Editor, Cus­tom­isa­tion and CSS-Coding)

If you don’t want to install plugins, use three of WordPress’ built-in features, which you can find in the left dashboard menu under ‘Design’: the Editor, Customise and Ad­di­tion­al CSS features.

WordPress-Editor

With the in­teg­rated full-site editing of the WordPress block editor, custom ad­just­ments can be made to store pages. The editor works in the beta version according to the drag-and-drop principle. Page elements such as para­graphs, images or videos can thus be inserted and edited as blocks.

Step 1: Click on ‘Design’ and on ‘Editor’ in the left menu bar.

Step 2: To add a new content block, click the ‘plus’ icon in the editor.

Step 3: Now you’ll see a list of blocks with different choices for posts and page elements. If you want to use an element on the page, click and drag it to the ap­pro­pri­ate page block. Possible elements include text con­tri­bu­tions such as para­graphs, lists, tables, or quotes.

Step 4: Other page elements include media elements, multiple design/layout options and widgets.

Customise

The ‘Customise’ feature allows you to make changes to the layout, design or page elements on existing pages.

The con­fig­ur­a­tions available to you with ‘Customise’ include options for colour settings, fonts, or even custom CSS.

Ad­di­tion­al CSS

With the ‘Ad­di­tion­al CSS’ option, simple changes can also be made manually via CSS with ap­pro­pri­ate coding skills. However, for this you should have at least begin to learn pro­gram­ming or already have basic pro­gram­ming skills. For ‘Ad­di­tion­al CSS’ the paid Pro package of WordPress.co.uk is required.

Via page builder tools

If you are already using a WordPress page builder like Elementor or Divi, you can also use them to configure your product pages. However, make sure that your page builder offers specific block features for Woo­Com­merce. Elementor, for example, includes preloaded Woo­Com­merce templates for product pages that will help you present your products in an appealing way in no time. As a rule, good page builders are paid, or features for Woo­Com­merce pages can only be used in paid packages.

Powerful page builders we’d recommend are:

• Elementor
• Visual Composer
• WPBakery
• Oxygen
• Beaver Builder
• Divi

Practical Woo­Com­merce ex­ten­sions/plugins for product pages

Woo­Com­merce itself offers several ex­ten­sions and plugins that add a variety of features to your product page. We’d recommend the following ex­ten­sions:

• Add-ons for products: With add-ons like Product Add-Ons you can offer ad­di­tion­al services like gift wrapping, custom greeting messages, engraving, donations or similar. Your site visitors simply tick se­lect­able add-ons to add them.
• Al­tern­at­ive product images: Be it different colours, imprints, sizes or shapes - if you offer a product in different versions, it is re­com­men­ded to also integrate al­tern­at­ive product images and image galleries. This can be done, for example, with the plugin Ad­di­tion­al Variation Images.
• Reviews and Re­com­mend­a­tions: With an extension like Re­com­mend­a­tion Engine, you include extras like product reviews, re­com­mend­a­tions of similar products, or goods fre­quently purchased in the set.
• Product Videos: By default, you can only add product images on Woo­Com­merce, but a tool like Product Video creates the pos­sib­il­ity to include product videos from YouTube, Facebook or even Vimeo to il­lus­trate the use or design of your products.
• Badges & Labels: If you run frequent special offers and discount pro­mo­tions, these can be iden­ti­fied with special badges and labels in a dis­tinct­ive design. Use a plugin like Product Badges for this purpose.

These details are a must for any online store

In order to create an online store with WordPress you need to know what belongs on a product page. The following aspects are important for good product present­a­tion:

• Product photo: Make sure you have your own pro­fes­sion­al product photos that match the style of your store or offer aesthetic value. This strengthens the cred­ib­il­ity of your brand. Multiple per­spect­ives of your product, prefer­ably from all sides, are ideal.
• Product title: The title should contain the most important in­form­a­tion about the product and is usually displayed in the SERPs of search engines. Keep in mind that a product should sound appealing on Google.
• Price, special offers, shipping costs: Visible prices including sales tax is par­tic­u­larly important. Visible in­dic­a­tions of special offers, discounts as well as shipping costs should be clearly displayed.
• Product de­scrip­tion: Make sure you have a detailed, un­der­stand­able product de­scrip­tion that conveys all the important in­form­a­tion in an easy-to-un­der­stand way and convinces hesitant customers that it is the right decision.
• Ad­di­tion­al product and shipping in­form­a­tion: Depending on the type of product, ad­di­tion­al in­form­a­tion on weight, di­men­sions, material or origin is an important addition for an informed purchase. Different shipping options or weight-dependent shipping costs can be displayed or cal­cu­lated by plugins.
• Payment methods/checkout: If possible, offer your site visitors the most important common Woo­Com­merce-payment-methods in order not to let the purchase fail due to a lack of payment options.
• Position, colour and size of the shopping button: Insider tip! The shopping button, also known as the shopping cart button, can be game changing. The button is ideally placed near the product image and title and above the product de­scrip­tion. If it is only found by scrolling down to the bottom of the page, you’re losing sales. An eye-catching colour and a vivid design can also generate more sales.
• Similar products/cross-sells: A ‘similar products page’ can invite customers to buy other things in your store by offering al­tern­at­ives. It allows you to display more products on a product page without clut­ter­ing the page. Cross-sells, which are re­com­men­ded products that com­ple­ment the displayed product, can also increase sales.
• Reviews: The reviews of other customers and clients are often decisive pur­chas­ing factors. Es­pe­cially when good products receive positive reviews, it would be a wasted op­por­tun­ity not to place these reviews on the product page, e.g. in the form of stars or quotes. Reviews can be in­teg­rated through the WordPress-review-plugins. You can also prompt buyers and shoppers for reviews or remind them to review a product.

Summary: How to create an un­mis­take­able product page on Woo­Com­merce

WordPress and the Woo­Com­merce plugin are powerful tools, but WordPress-themes, an original web design with effective color scheme or a large product selection do not make a suc­cess­ful online store. So, remember that it also depends on the present­a­tion of your products with clear, modern product pages and suitable features.

Use plugins like Store­Cus­tom­izer or SeedProd to edit your product pages or use a powerful page builder like Elementor. Built-in WordPress features like the ‘Editor’, ‘Customise’ or ‘Ad­di­tion­al CSS’ can also be enough for quick, efficient cus­tom­isa­tions. Never forget that at­tract­ive product pages can win over your customers and generate more sales.