How to customize a WooCom­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. WooCom­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­tomiz­er, or page builders like Elementor offer flexible settings and designs. Let’s take a look at editing a WooCom­merce product page.

Why is it ben­e­fi­cial to edit a WooCom­merce product page?

The answer is simple. An in­di­vid­ual style, con­sis­tent product branding, and user-friendly UX will lend your online store a certain cred­i­bil­i­ty 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 WooCom­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 rel­a­tive­ly com­pli­cat­ed 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 WooCom­merce.

Methods for cus­tomiz­ing a WooCom­merce product page

From WooCom­merce product page templates to WordPress. Use the following options to customize product pages as needed:

Via Plugins (using Store­Cus­tomiz­er as an example)

The easiest way to edit your online store including product pages are plugins like SeedProd, Store­Cus­tomiz­er or WooBuilder, 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­tomiz­er as an example, we will explain how to edit your product pages with a drag-and-drop plugin com­plete­ly free of charge. Note that you cannot install plugins with the free WordPress.com plan.

Step 1: Install the plugin Store­Cus­tomiz­er from the man­u­fac­tur­er’s site or directly from the download page for WordPress-Plugins. After in­stal­la­tion you need to activate the plugin.

Step 2: Now go to “Design” on your WooCom­merce store page and then “Customize” > “Store­Cus­tomiz­er” > “WooCom­merce Store Page”. You can use different features in the plugin to customize the page. You can find all the settings and features in the left menu bar. These include settings for font size, colors, page design and layout.

Step 3: An important feature of Store­Cus­tomiz­er includes removing pre-installed WooCom­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­sid­ered new after they are added. You can also enable front-end sales sta­tis­tics for products to highlight top sellers.

Step 5: Use editor functions to customize 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­tomiz­er offers cus­tomiza­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­tomiza­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, Customize and Ad­di­tion­al CSS features.

WordPress-Editor

With the in­te­grat­ed 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.

Customize

The “Customize” feature allows you to make changes to the layout, design or page elements on existing pages.

The con­fig­u­ra­tions available to you with “Customize” include options for color 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 plan of WordPress.com 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 WooCom­merce. Elementor, for example, includes preloaded WooCom­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 WooCom­merce pages can only be used in paid plans.

Powerful page builders we’d recommend are:

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

Practical WooCom­merce ex­ten­sions/plugins for product pages

WooCom­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­lec­table add-ons to add them.
• Al­ter­na­tive product images: Be it different colors, imprints, sizes or shapes - if you offer a product in different versions, it is rec­om­mend­ed to also integrate al­ter­na­tive product images and image galleries. This can be done, for example, with the plugin Ad­di­tion­al Variation Images.
• Reviews and Rec­om­men­da­tions: With an extension like Rec­om­men­da­tion Engine, you include extras like product reviews, rec­om­men­da­tions of similar products, or goods fre­quent­ly purchased in the set.
• Product Videos: By default, you can only add product images on WooCom­merce, but a tool like Product Video creates the pos­si­bil­i­ty 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­tinc­tive 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 pre­sen­ta­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 strength­ens the cred­i­bil­i­ty of your brand. Multiple per­spec­tives of your product, prefer­ably from all sides, are ideal.
• Product title: The title should contain the most important in­for­ma­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­lar­ly important. Visible in­di­ca­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­for­ma­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­for­ma­tion: Depending on the type of product, ad­di­tion­al in­for­ma­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­lat­ed by plugins.
• Payment methods/checkout: If possible, offer your site visitors the most important common WooCom­merce-payment-methods in order not to let the purchase fail due to a lack of payment options.
• Position, color 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 color 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­ter­na­tives. It allows you to display more products on a product page without clut­ter­ing the page. Cross-sells, which are rec­om­mend­ed 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­cial­ly when good products receive positive reviews, it would be a wasted op­por­tu­ni­ty not to place these reviews on the product page, e.g. in the form of stars or quotes. Reviews can be in­te­grat­ed 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­tak­able product page on WooCom­merce

WordPress and the WooCom­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 pre­sen­ta­tion of your products with clear, modern product pages and suitable features.

Use plugins like Store­Cus­tomiz­er or SeedProd to edit your product pages or use a powerful page builder like Elementor. Built-in WordPress features like the “Editor”, “Customize” or “Ad­di­tion­al CSS” can also be enough for quick, efficient cus­tomiza­tions. Never forget that at­trac­tive product pages can win over your customers and generate more sales.