How to customize the WooCommerce product page like a boss

Reading Time: 17 minutes

Have you found yourself thinking that you need to hire a developer to customize your WooCommerce product pages? Well, think again. It’s actually a lot easier than you might suspect, and you don’t even have to know any custom code — we promise!

Between the WordPress Site Editor, a wide range of site builders, and WooCommerce-focused plugins, customizing product pages is easier than ever. 

In this article, we’ll bust the myth that you have to be a coding expert to create unique, branded, and optimized WooCommerce product pages and provide you with a step-by-step guide that’s easy to follow regardless of your technical knowledge.

Six reasons why you need to customize your product pages

Why not just stick with the default WooCommerce layout? If you want to improve your chances of success, there are six definitive reasons you need to customize your product page. 

Putting in the work here will help you stand out from competitors, make shopping easier, improve customers’ ability to find you, allow for change and growth over time, highlight your uniqueness, build trust, and drive sales. Let’s take a closer look at each one:

1. To stand out from the crowd

Let’s face it, the internet is a crowded place. Customizing your WooCommerce product page lets you put your brand’s unique stamp on everything in your store, creating a shopping experience like no other. Whether your brand identity makes use of funky colors, quirky fonts, or distinctive graphic designs, every element on your product page should work together to help you build a recognizable and memorable brand identity.

2. To create a better shopping experience

A slick, well-designed product page makes shopping a breeze. This includes clear product descriptions, high-quality images, readable fonts and color combinations, and easy-to-find information. But a streamlined product page is also about what you don’t include. 

Eliminate unnecessary tabs and information that isn’t relevant to your customer, remove outbound links, and pare down your product’s short descriptions so they don’t read like The Rise and Fall of the Roman Empire. 

Don’t forget that mobile commerce is trending upwards, so it’s important to optimize your product page layout for mobile devices (phones and tablets). 

When customers have a simplified and easy to navigate shopping experience, they’re way more likely to stick around and hit that “buy” button.

3. To improve your search rankings

Better product pages mean better search engine optimization (SEO). When you customize your page with the right keywords, optimize for fast load times, and implement mobile-friendly design, your WooCommerce products are more likely to show up in search results. More visibility in search engines equals more potential customers finding you.

4. To be flexible for the future

Your business isn’t static, and your product pages shouldn’t be either. Getting into the habit of customizing product pages will give you the flexibility to add new types of products, test out creative promotions, and highlight unique features as you grow. It’s like having a wardrobe that evolves with your style.

5. To win trust and loyalty

A polished product page shows customers you’re serious about your business. When shoppers see a well-crafted page with transparent information and easy-to-navigate design, they’re more likely to trust you and come back for more. 

Think of customizing your WooCommerce product page in a similar way to how you would remodel a physical store. Don’t be afraid to have a little fun with it and create a product page that truly reflects your brand — your customers will appreciate that.

6. To boost sales

It all adds up to this, of course. The main reason you should customize your product pages, the result of satisfying the first five items on this list, is to grow your business! 

So do you want to turn browsers into buyers? A customized product page can do just that. By strategically placing reviews, creating urgency with special deals, and making your call-to-action buttons pop, you’ll be nudging customers toward checkout in no time.

What to do before customizing WooCommerce product pages

Get familiar with the WooCommerce product page

If you’re new to WooCommerce, you’ll want to take some time to familiarize yourself with the components of the default product page from both the front end and the back end. You’ll also want to make sure you understand all the ins and outs of creating a product on WooCommerce.

If you haven’t created a product yet, set up a test product in draft mode, then preview it to get an idea of how it will display. You can see an example of this in the image below.

You’ll notice that, while it will probably be functional and may even look nice, the default layout may not align perfectly with your brand’s aesthetic or the user experience you envision. This is why you should customize it!

Research competitors’ WooCommerce product pages

Whether you have a set vision for your product page’s design and functionality or you are still trying to figure out what you need, you can get inspiration from other successful WooCommerce stores. 

Research examples of custom WooCommerce product pages and take note of the things other brands are doing well, where there’s room for improvement, and how your shop’s needs might differ from theirs.

Back up your site

Before making any changes, it’s essential to back up your WooCommerce store. This ensures that you can restore your site to its previous state if anything goes wrong during the customization process. You can check with your hosting provider to see if they allow you to run manual backups, or you can use plugins like UpdraftPlus, Jetpack, or BackWPup for this task.

Create and activate a child theme

Child themes let you make changes to your site’s design and functionality without making direct edits to the parent theme. All customizations should be done within a child theme so that when you update the parent theme, you won’t lose your customizations.

If you haven’t used a child theme before, WordPress.org has detailed instructions on how to create and activate a child theme.

Be aware that if you’ve already made theme or page customizations using the Site Editor, you may lose them when activating your child theme, so make sure you are able to replicate those settings.

Three ways to customize the WooCommerce product page layout and design

You likely won’t use one single method to customize your WooCommerce product page. A combination of drag-and-drop layout editing and the use of a few plugins may be required for you to achieve all your goals. So we’ll cover three different methods you might want to use either alone or in combination with other customization techniques, depending on your goals.

1. The WordPress Site Editor

The WordPress Site Editor, introduced with Full Site Editing capabilities in WordPress 5.8, allows users to customize much of their website using a purely visual interface. This includes headers, footers, and individual page templates. For WooCommerce users, it offers an intuitive way to customize product pages directly from the WordPress dashboard.

Note: Before you can use the Site Editor, you’ll need to make sure that your theme supports Full Site Editing and Gutenberg blocks.

WooCommerce comes with default page templates for certain core pages — Checkout, Cart, Product Catalog, Single Product, and more. You can edit any of these pages to customize them to your liking or create new custom templates. 

For the WooCommerce Single Product page, you have the option of customizing the default product page template or creating a template that is assigned to a specific product. You’ll need to make sure that you’ve added the product first before creating its product page template. We’ll walk you through both options.

Step 1, option 1: Customize the default WooCommerce product page template

If you want to edit the default Single Product template, you can find it in your WordPress dashboard under Appearance > Editor > Templates and then scroll down to the WooCommerce section and click Single Product.

Step 1, option 2: Create a custom WooCommerce product page template for a specific product

If you’d like to create a new custom product page template and apply it to a specific item, you can go to Appearance > Editor > Templates, and then click the “+” icon next to the Templates page title to add a new template.

From here you can choose Single Item: Product, then select the product you’d like the template to apply to. All other products will use either the default Single Product template or other custom templates you’ve previously created and assigned.

After you’ve chosen your product, you’ll then be asked to choose a pattern (a premade layout) from the pattern library or you can press Skip to create a layout from scratch.

Step 2: Use the block editor to customize your template layout 

WooCommerce includes blocks that you can use to create and customize page templates within the Site Editor. You can arrange these blocks however you like within the page. Your product page should usually include:

• A header block: You can use this sitewide or as a custom header for your template
• WooCommerce blocks: In the block library, under WooCommerce you’ll find WooCommerce-specific blocks to add essential elements like the product title, image, price, description, and add to cart button
• A footer block: Your footer block typically includes important links to your FAQs, warranty, and support pages

Don’t be afraid to rearrange blocks in an order that differs from the default WooCommerce product page layout. Experiment by dragging and dropping blocks to arrange them according to your desired layout. If you’re not sure what the best setup for your blocks is, take some time to look at how your competitors are designing their product pages.

For instance, Amundsen Sports, a Norwegian athletic fashion brand, has customized their product page by creating a full-sized image gallery, with each of their product images taking up equal space, rather than having one large featured image with multiple thumbnails below or to the side. They’ve also made the add to cart button the next largest element on the page. This is what it looks like: 

They’ve arranged their content so that product options and the add to cart button are furthest up in the visual hierarchy. The product description, as well as graphics that highlight their unique selling points, are toward the bottom of the layout, with further product details like unique features, fabrics, and fit description being last.

When customizing your product page, you can choose from an assortment of WooCommerce, WordPress, and theme-specific blocks and patterns in the Site Editor by clicking on the Toggle block inserter button in the upper left corner of the Editor screen.

You can either scroll or use the search bar to find the block you want to use, or click on the Patterns tab to find some pre-designed layouts for things like sale banners or other calls to action (CTAs).

Here are some blocks you might want to add:

• The Reviews block: Insert the product reviews block to display customer feedback
• The Related Products block: Add a related products block to encourage cross-selling
• Custom content blocks: Use standard WordPress or theme-specific blocks to add custom content, such as text boxes, images, or videos. Or you could include an email newsletter signup, audio clips, downloadable files for product manuals, trust badges, instructional YouTube videos, or embedded pinterest content associated with your product. 

The options are endless, but your customers’ attention span is not, so choose the content you wish to add to your product page template wisely.

Step 3: Adjust block styles, global styles, and add custom CSS

At the block level you can adjust a variety of style elements depending on what options are available for the block you are editing. For some blocks, you may be able to adjust font size and weight, line height, font color, background colors, padding, margins, and other style attributes. 

For other blocks, built-in styling options may be limited and you might need to adjust your global styles settings or rely on custom CSS to get the appearance you want.

Your global style options can be found under Appearance > Site Editor > Styles > Edit Styles.

If you want to use custom CSS for an individual block in your product page template, you can assign a CSS class within the Site Editor under Settings > Block > Additional CSS Class(es). For this example, we’ll create a custom CSS class for the Add to Cart with Options block called custom-add-to-cart-block.

Then, in your global style editor (the half-black, half-white circle in the upper right corner of the page editor screen), click on Additional CSS and add your custom CSS to your newly-created CSS class. Here we’ve added a yellow background and some padding with the following code:

.custom-add-to-cart-block {

background-color:yellow;

padding:30px;

}

If there are further elements you want to target with custom CSS, you can use your browser’s developer tool to find them, make temporary changes to the CSS to preview, then copy and paste those changes into the Additional CSS tab in the Site Editor’s Styles panel. Here’s that process in action:

“But you said I wouldn’t need any custom code!”

Yes, we did say that. Don’t worry. If you don’t have the time or interest to learn CSS code, you can always opt for a plugin like CSS Hero to help you generate the custom CSS you need using their visual editing tools.

Step 4: Save and preview

When you’ve finished your design, click the Save button to save your custom product page template.

Preview the changes on your site to ensure everything looks as expected. You can view a live preview by navigating to one of your product pages.

2. The WordPress Customizer

If you don’t have a theme that supports the Site Editor, you can still do some customizations using the WordPress Customizer (even though it’s not as robust a solution as the Site Editor). The number and kinds of customizations that you can do will vary depending on your theme, so what you’ll see in the following example may not exactly match up with your own theme options. But it should give you a good idea of how to find these options and some general customizations that you can make.

For this example, we’re using the free Astra theme from the WordPress.org theme library.

Note: The Customizer will only allow you to customize the default Single Product page. You won’t be able to use it to create custom templates for individual products. 

To access the Customizer, navigate to any product page, then click on the Customize button in your WordPress admin toolbar at the top of your screen, as seen below:

From here you’ll scroll down to and click on the WooCommerce tab, then click the Single Product Layout tab. This tab will display a variety of settings specific to your theme. Also, the labels for these options may look different depending on the theme you’re using.

You should also have an area where you can rearrange WooCommerce product elements on the page. You may be able to reorder elements like the featured product image, product title, product ratings, product price, product category, product short description/excerpt, add to cart options, product meta, etc. 

Additional styling will either need to be done in the Customizer’s global styling options or via custom CSS. If adjusting the global styles isn’t sufficient for your needs, you can use your browser’s developer tools to find the relevant CSS classes, divs, and tags for the elements you want to modify. 

Then, add your custom code targeting those elements in the Additional CSS tab in the Customizer. For this sample product page, let’s turn the add to cart button hot pink, make it pill-shaped with a border radius of 30px, and reduce the width to 50% so that it sits right next to the quantity box.

To accomplish this, we’ll add the following code to the Additional CSS tab:

.woocommerce div.product form.cart .button.single_add_to_cart_button {

    width: 50%;

    background-color: hotpink;

    border-radius: 30px;

}

You should be able to preview your custom CSS in the Customizer before you click the Publish button. If everything looks correct, publish your changes.

If you’re not a CSS expert, you can try a visual styling plugin like CSS Hero or use a site builder plugin that may come with more granular options for customizing and styling your WooCommerce pages.

3. A site builder plugin

Between the Site Editor, Customizer, and your theme’s options, you may still not find the tools you need to customize your WooCommerce product page without learning at least a little CSS and HTML. If you find yourself begrudgingly contemplating signing up for a coding class or hitting up your favorite developers on Codeable, you may want to give a page builder plugin a try first to see if you can find a quicker solution.

There are a wide array of page builders out there — most of them freemium or premium software. While Elementor is one of the most popular of the premium page builders for WordPress, Twentig is a great, lightweight and entirely free plugin alternative. For a freemium page builder, SiteOrigin Page Builder’s free version is relatively robust and may have enough basic features for some WooCommerce store owners (although they do offer a premium version as well).

Each page builder will have their own unique methods and options for visual customization of your WooCommerce product page, so check out a variety of options before making a decision. Not sure where to start? Check out our 10 best WordPress landing page plugins in our guide.

Adding custom functionality to the WooCommerce product page using plugins

In addition to changing your product page’s layout and style, you can also make it more efficient and user-friendly by adding expanded functionality. Whether you want to add custom fields for product add-ons, offer product bundles, additional product information tabs, a sale countdown timer, or any number of other features, there’s probably a plugin out there that does it.

While we created a list of 34 of the best WooCommerce plugins to try in 2024 that you should totally check out, we’ll keep our recommendations for the product page short and sweet. Below is a list of six WooCommerce plugins that add custom functionality to your product page.

1. Product Add-Ons

The WooCommerce Product Add-Ons extension enhances your product pages by giving online store owners the ability to offer a more flexible and personalized shopping experience. This plugin simplifies the process of adding various customization options to your products, catering to specific customer needs and preferences. 

Key features

• Personalized add-ons: Allow customers to select gift wrapping, add engravings, or choose different sizes and colors
• Upselling and cross-selling: Create options that encourage customers to purchase additional features or related products
• Dynamic pricing: Automatically adjust the product price based on the customizations chosen by the buyer
• Conditional logic: Show or hide specific options based on previous customer selections to streamline the customization process

By providing a tailored shopping experience that meets exact customer needs, you can increase customer satisfaction, conversion rates, and improve customer retention. Whether you’re offering something as simple as gift wrapping or complex product personalizations, this plugin is a valuable addition to any online store.

2. WooCommerce Tab Manager

WooCommerce Tab Manager helps online store owners enhance and organize the information on their product pages with customized product information tabs. It provides a user-friendly interface to create, manage, and reorder tabs, making it easier to present detailed product information efficiently and accessibly. 

Key features

• Custom tabs creation: Easily create new tabs for additional product information
• Reordering tabs: Drag and drop to reorder tabs based on priority or relevance
• Global and per-product tabs: Create tabs that apply to all products or customize tabs for individual products
• Integration with other plugins: It seamlessly integrates with other WooCommerce plugins for enhanced functionality

Examples of tabs you can create

You can create tabs for pretty much anything, really, but here are some examples of tabs that could be useful for your products:

• Product specifications
• Product manuals
• Warranty information
• Shipping and returns policy
• FAQs
• Customer reviews
• Usage instructions and videos
• Reviews and customer testimonials

Organizing information into tabs makes it easier for customers to navigate and find what they need. Tabs also allow for a richer, more informative product page. By providing comprehensive product information and answering potential questions directly on the product page, you can reduce purchase hesitations and boost sales.

3. Product Recommendations

The WooCommerce Product Recommendations extension helps ecommerce store owners customize pages by displaying tailored product suggestions to customers. This extension uses a variety of strategies to recommend relevant products directly on the product page, increasing cross-selling and upselling opportunities. 

Key features

• Rule-based recommendations: Set rules based on product attributes, product categories, tags, and more to display relevant products
• Cross-selling complementary products: Encourage customers to buy additional items that complement their primary purchase
• Upselling higher-end products: Help increase the average order value by steering customers toward more premium products
• Personalized suggestions: Offer personalized recommendations based on customer behavior, such as browsing history and past purchases
• Bestsellers and trending products: Displaying a list of bestsellers or trending products on product pages can create a sense of urgency and social proof, encouraging customers to buy popular items
• Customizable display: Adjust how and where recommendations appear on your product pages

By suggesting multiple products that are relevant to visitors, you can encourage customers to spend more time on your site and add more items to their cart, boosting engagement, reducing bounce rates, and increasing sales and average order values. Additionally, you can use product recommendations to improve your stock management by promoting slow-moving, deadstock, or almost-sold-out items.

The WooCommerce Product Recommendations extension empowers store owners to create a more dynamic and engaging shopping experience by presenting customers with products that match their interests and needs. Whether you’re aiming to cross-sell, upsell, or personalize the shopping journey, this extension offers a versatile and effective solution to enhance your product pages and drive sales.

4. PW Sales Scheduler for WooCommerce

The PW Sales Scheduler extension for WooCommerce helps store owners manage and schedule sales events efficiently, creating a sense of urgency and excitement around discounted products. This extension can significantly enhance the customization of product pages by dynamically displaying sales information, countdown timers, and special pricing, encouraging customers to take advantage of limited-time offers. 

Key features

• Automated sales scheduling: Easily schedule start and end times for sales, ensuring that discounts are applied and removed automatically
• Countdown timers: Display countdown timers on product pages to create urgency
• Dynamic pricing display: Show original and sale prices to highlight the discount
• Custom sale messages: Add custom messages and banners to product pages to promote sales events

With PW Sales Scheduler for WooCommerce, you can schedule, months in advance, flash sales, seasonal promotions, clearance events, and weekly or monthly deals and highlight them directly on your product pages. This not only drives immediate sales through urgency but also helps in planning and executing promotional strategies efficiently.

5. YITH WooCommerce Points and Rewards

With the YITH WooCommerce Points and Rewards extension, you can implement a loyalty program that rewards customers for their purchases and interactions. This extension doesn’t keep the points and rewards information hidden in the user’s account details, either. It gives you the ability to display points information on all the product pages as well as in the shop page. Publicly displaying this information on products can encourage purchases through a gamified shopping experience.

Key features

• Points earning system: Customers earn points for purchases and other actions
• Points redemption for future purchases: Offer your customers the option to redeem points for a future discount such as, “Redeem 200 points for a $10 discount on your next order!”
• Custom messages: Display custom messages about points earning and redemption. This can include information about special promotions where customers can earn extra points, limited-time offers for redeeming points, or a simple awareness campaign promoting your loyalty program with a message like, “Join our loyalty program and start earning points on every purchase!”
• Integration with product pages: Show points information directly on product pages (e.g. “Earn 50 points with this purchase!”)

By using the YITH WooCommerce Points and Rewards extension, store owners can create a more engaging and rewarding shopping experience directly from their product pages. This type of gamification of commerce also drives repeat purchases, word-of-mouth recommendations, and boosts customer loyalty.

6. Newsletters, Email Marketing, SMS and Popups by Omnisend

The Newsletters, Email Marketing, SMS, and Popups by Omnisend plugin for WordPress is designed to increase customer engagement and drive sales through multiple channels. By integrating email, SMS, and on-site popups, Omnisend allows store owners to effectively customize their product pages and implement marketing strategies that boost interaction and conversion rates and reduce abandoned carts with customized messages to customers. 

With over 100,000 happy customers worldwide, Omnisend is helping ecommerce stores make the most of their product pages with their suite of marketing tools.

Key features

• Customizable popups: Create targeted popups to capture email addresses, promote offers, or share announcements directly on product pages. For instance, a popup with an offer like, “Sign up now and get 10% off your first purchase!” or a message advertising a flash sale can help build your email list and attract new customers.
• Email campaign integration: Seamlessly include product information in email campaigns to drive traffic to your product pages. Send newsletters showcasing new arrivals, bestsellers, or back-in-stock items with direct links to product pages, driving traffic and increasing conversions.
• SMS Marketing: Send personalized SMS messages globally about product updates, sales, and special offers
• Automated workflows: Set up automated email and SMS workflows for behavior-based follow-ups like, “The product you viewed last week is now on sale! Check it out here: (link)”
• Abandoned cart recovery: Automatically send reminders to customers who leave items in their cart, encouraging them to complete their purchase. For example, “Still interested in (Product Name)? Here’s a 15% discount to help you decide!” This helps recover potentially lost sales.

By leveraging the Omnisend plugin, store owners can seamlessly integrate their marketing strategies with their product pages, increase customer engagement, and drive sales through personalized and targeted communication.

Wrap up

By using the Site Editor, Customizer, or a page builder plugin of your choosing to start customizing the layout and style of your WooCommerce product pages, you’ll give your customers a slick and seamless shopping experience they can trust. Next, build on that foundation by adding targeted functionality using powerful WooCommerce plugins to encourage repeat purchases, reduce customer service headaches, and boost your average order values.

Lastly, keep your customers in the loop and nudge them to make a purchase with targeted email campaigns, SMS marketing, and abandoned cart recovery automations. 

Ready to take your product pages to the next level? Join the 100,000+ ecommerce brands that grow with Omnisend every day. Start free today!