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.
Changing the color of the Add to Cart button using the WooCommerce Colors plugin
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.
Changing a product page’s title font, price color, and button color with the YellowPencil plugin
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.
Changing the color of the Add to Cart button with the CSS Hero plugin
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!
