How to Create Custom WooCommerce Product Pages

Want to learn how to easily customize your WooCommerce product pages? If you run an online store, you probably want to ensure your single-product pages look great, are organized correctly, and match your branding. This can be hard to do if you’re only relying on WooCommerce and your theme to make changes because you’re more or less stuck with the default layout.

Instead, you can use other plugins to do things like:

• Add additional content elements
• Change fonts and colors
• Make page structure changes
• Or even completely customize your product pages from scratch

…all without coding!

Some ideas of fully-custom product templates:

Find the perfect plugin to customize your product pages according to what you need below!

1. Edit the Cosmetic Styling of Your Product Pages

Here are some great plugins if you’re looking for just a few small cosmetic tweaks, like changes to your fonts, colors, or changes to individual elements.

WooCommerce Colors

WooCommerce Colors allows you to customize the colors of various WooCommerce elements such as the Add to Cart button, product price, and more. You can making these changes using the native WordPress Customizer.

This is a simple, straightforward plugin that doesn’t require any CSS knowledge. However, it only allows you to adjust the colors, and you may not be able to override some colors depending on your theme.

Price: Free

YellowPencil

YellowPencil allows you to change your fonts, colors, font sizes, spacing between elements, and even add animated visual effects on your site’s front-end. There are many styling options in the free version, but Yellow Pencil Pro adds advanced options for gradients, animations, custom fonts, color palettes, background images and more.

YellowPencil works on any page across your site – not just your product pages. It automatically generates CSS code for your site as you use it, and it saves it to your database rather than your theme file. This ensures you won’t lose your changes when you update your themes.

YellowPencil allows you to reorder elements in your template, but you cannot add new elements. As a result, you’re restricted to the elements that already exist in the default single-product template.

Price: Free, with paid upgrade options

CSS Hero

What it does: CSS Hero is a visual editor that allows you to make styling changes to your site by automatically adjusting the CSS as you make visual changes.

Customize your template’s elements by changing the colors, fonts, responsive breakpoints, and more. You can also hide elements or save the styling of certain elements to reuse them in other places on your site.

You can’t reorder or add new elements, though, so you’re limited to the layout and elements that already exist in the product template.

Price: Paid, starts at $29 per year

2. Add New Elements to Product Listings

If you’re looking to add additional elements to your pages, like places for extra content or product videos, these plugins offer ways to add these elements to your single product pages.

WooCommerce Single Product Page Customizer

WooCommerce Single Product Page Customizer allows you to add fields of custom text or HTML in your product template and choose where on the page to display them.

For instance, you can add information such as a clothing size guide, shipping information, or a link to your shop’s return policy. This information is then displayed for all of your products.

This is a very straightforward and easy-to-use plugin, but it is limited in what you can do with it. For instance, you can’t choose to display information only for some products. You also can’t add other types of elements to your template, and you can’t rearrange any of the existing elements.

Price: Free

Custom Product Tabs for WooCommerce

Custom Product Tabs for WooCommerce allows you to add additional tabs of text, images, HTML, or shortcodes on your product pages. You can then choose for which products to display the information.

You can use this plugin to display additional information about manufacturers, share your return policy, or add additional photos without cluttering the product page.

Again, this plugin has a very focused purpose. It’s not possible to customize any other part of your product templates with this plugin besides adding tabs of additional content.

If you want to display product-specific content in your tabs, such as size charts per product, you won’t be able to do so by pulling in product information dynamically. Instead, you’ll need to create individual tabs for each product with the specific content and add them to the correct product.

Price: Free, with a paid Pro version

Product Video for WooCommerce

Product Video for WooCommerce allows you to add videos to your product pages or your product gallery. You can choose to embed YouTube, Vimeo, Dailymotion, Metacafe, or Facebook videos, or you can upload your own. It also offers several display options: in a popup, inside your page, and full screen.

The plugin gives you lots of control over how your video displays. You can customize the dimensions of your video, enable autoplay, play the video in a loop, and upload a specific thumbnail image.

As with the other plugins in this category, this plugin’s features are limited to videos. You cannot customize any other part of the product template with this plugin.

Price: Paid, currently $49

3. Build Completely Custom Products

If you’re looking for product pages that are completely unique to you, you can build completely custom pages – and entire sites – that allow you to specify styling, page layout, and more.

Toolset

Toolset gives you the ability to build your product templates completely from scratch with the layout, styling, and page elements you want, all without coding.

Price: Paid, plans starting at $69

Build your template with dynamic content and completely custom styling

With Toolset, you can easily build your product template using WooCommerce and Toolset blocks and populate those blocks with dynamic content. This means you only need to design the template once, and it will pull in the correct product name, description, price, reviews, and more automatically depending on the product.

Once your product template is constructed, you can use the abundance of styling options to make it look exactly how you want it to without being bound by any default options.

Choose specific display criteria for your templates

You can also design different templates for different criteria: for instance, you can design different templates for out-of-stock items, for different product categories or attributes, and even assign priorities in case multiple templates apply to one product.

Further customize your WooCommerce store with even more functionality

Popular page builders like Elementor Pro, Divi, and WPBakery also offer options for building and customizing WooCommerce product pages. The extra features available with Toolset’s suite of plugins can be used specifically for WooCommerce stores or other types of sites.

For instance, you can:

• Create front-end forms that allow your vendors to add their products to your site
• Create post relationships that allow you to connect your products to other post types (such as “Outfits”)
• Display your store locations on a map
• Add powerful search and filter functionality
• Create additional custom fields to further define your products

Choosing the Right WooCommerce Tools for You

If you don’t like the options available to you through WooCommerce or your theme, there is no shortage of free and paid plugins to get your store exactly how you want it.

Building a custom WooCommerce store doesn’t have to be difficult or require expensive custom programming. With the plugins in this article, you can build advanced, beautiful, functional WooCommerce shops – no coding required!