Updated November 25, Read Time: 8 minutes. WooCommerce has a rather complex system of core files that it uses to create its frontend display.
Before starting, I recommend a free plugin called What the File that puts a panel in your admin bar that allows you to view whatever file the site is pulling from and the template parts that are contributing. They are simpler to implement than using WordPress hooks actions and filtersbut note that using hooks where possible is preferred though template overrides may have their place.
If you override templates, you should keep them updated with every theme and WooCommerce update. There are two files that WooCommerce pulls from to create a product page: single-product.
You can view its contents here. You can view the content-single-product. This avoids any overriding of changes when either WooCommerce or your theme has an update. This effectively has created a new template for you to edit: WooCommerce will automatically select the single-product. When you copy your content-single-product. This customization, like many, would be better off using a hook for this change, but more advanced changes can be done by modifying this file. This makes code cleaner and eliminates possible messy file duplication.
See this series of postsparticularly the first two articles, for help in getting started. To accomplish this requires a little bit of rerouting. Make it an easily recognizable name and distinct from other categories.
This file will be used to make changes in the loop, add or remove a sidebar, as well as make the single product looks exactly as you want it to look. The if conditional will check if the product belongs to a specific category, and then load the related custom template you created.
To insert the if conditional, find this code inside the loop of your single-product. If you have multiple categories, you can copy and paste the if statement and change the slug of the categories as well as the file names.
Make sure you save your files and to test the rerouting out with a simple h1 tag or something similar to confirm your new files are now working. WooCommerce uses a series of hooks to organize its content. One file is not made up of a single template, but is often pulling from many different sources and bits of code.
Action Hooks: Can independently accomplish any sort of custom functionality. Filter Hooks: Used to manipulate and modify existing output, like adding a sign-off at the end of every post.The WooCommerce Product Page is one of the most important pages in your WooCommerce store, but normally you have little control over the design, subsequently all WooCommerce Product pages tend to look exactly the same.
By creating a better WooCommerce Product Page you can get a jump start over your competitors to really show off your products in the best way possible.
Whether you need to add a product video, or much larger product images, or more SEO friendly text — this method makes it all possible. The beauty of this approach is that there are no limitations on the design of WooCommerce Product page layout. Once Gutenberg is re-enabled WooBuilder Blocks will work as expected.
WooBuilder Blocks include; add to cart block, product title, product price, short description, product image, product reviews and product meta. You choose where and if you use them :. Top tip — to create complex grid layouts for your WooCommerce Product Page then consider using a specialized Gutenberg based layout block like either the Caxton Layout Blockor the Kadance Layout Block. You can then use your new WooCommerce Product Page design as a template and apply it to multiple products using categories and tags.
If you want to apply your new super duper WooCommerce Product Listing Page designs to multiple products then you can use the WooBuilder Template system. This lets you test different versions of the same product and then choose the winner. If you are not using the new Gutenberg Block editor, then you can use our PageBuilder Pro plugin and the WooBuilder module you can just drag and drop the various WooCommerce Product elements to where you would like them to appear and completely customize the layout of your WooCommerce Products.
Create your WooCommerce product the normal way and enter all information, including priceproduct image and other details. This will open up a page in the live editor, with just one row. Now you can drag and drop the WooCommerce modules from the left hand customizer into your page. Now you can use your design as a template for your other new products.
On the left is the default WooCommerce Product Page layout, and on the right is an example of a layout built with our WooBuilder plugin. It uses the new Gutenberg Block Editor so that you can create any layout you can imagine. You can either dive into the code or use the WooBuilder Blocks plugin : WooBuilder automatically overrrides the normal WooCommerce template so you can change the design easily.
With WooBuilder Blocks you can save your design as a template and then apply to multiple products using WooCommerce Categories and Tags. WooBuilder Blocks is designed to be theme neutral. This lets you run multiple versions and layouts of the same WooCommerce product.
The Split Testing Block gives you real time statistics on which has been the most successful layout. Finally you can select the winning layout as your choice.
Where can we find the plugin for woo builder? Is it only available to certain wordpress versions? Thanks for the above information it helps me customise my site and also to know the working of it.
How does one change the template on existing product pages? You make mention of it in the video but do not actually show how to do it. I need assistance with it too please. It sounds like you might have the new Gutenberg Editor disabled — check if you have the classic editor plugin installed, as this disables the new Gutenberg Editor.Woocommerce Product Options Plugin - Custom Options for FREE 🤘
Total theme uses WP Bakery. Are you sure there is no conflict? Very beautifully describe about how to customize the WooCommerce Product Page. It easy to understand and implement. Thanks for sharing with us. Hi, I want to show video only specific category on single product tab section. Which category have video the description tab section will show active.Be as specific as possible - let us know what you expected, what's happening instead, and when you noticed this.
The more detail you, provide the faster we can help. Replies will be sent to you at. We appreciate your feedback about your support experience with WooCommerce, developers of Product Add-Ons. This helps us maintain high standards on the WooMarketplace, and helps WooCommerce improve. Glad to hear it went well with WooCommerce. Tell us more. Has anything changed since you first reached out?
Is there anything new that you'd like us to know? From adding a personal engraving, to upgrading to premium fabric, customizing products can keep your customers coming back.
With Product Add-Ons, you can offer special options to your customers in a snap. Add options via text boxes, dropdowns, text areas, checkboxes, custom price inputs, even sample images. Add-ons can be added globally or per-product from the edit product page. Product Add-Ons is one of the most popular extensions available for WooCommerce.
It gives you and your customers even more options, including but definitely not limited to :. Charge customers a flat fee regardless of how many products they ordered. Perfect for a one-time set-up charge or a rush fee.
Charge a fee for the add-on based on a percent of the total price—this is especially useful for service-based add-ons that can be tougher to boil down to a flat fee. Let your customers enter custom text to create a custom t-shirt, add a monogram or personalize a card. Make customization as easy and satisfying as checking a checkbox. Great for add-on services, like gift wrapping or express shipping.
In order to test this extension for 30 days login to your account firstor create one. Log in with WordPress. Create an account. We will create a personal demo site for you, giving you free access to test this extension for 30 days. Most helpful Rating highest to lowest Rating lowest to highest Newest Oldest.
We are accepting reviews for this product, and will display them when we get a few more! WooCommerce - the most customizable eCommerce platform for building your online business.
Thanks for contacting WooCommerce WooCommerce will reply to your questions about Get extension name shortly. While you wait, check out these handy resources:. See Subscription Details.Be as specific as possible - let us know what you expected, what's happening instead, and when you noticed this.
The more detail you, provide the faster we can help. Replies will be sent to you at. We appreciate your feedback about your support experience with SkyVerge, developers of Measurement Price Calculator. This helps us maintain high standards on the WooMarketplace, and helps SkyVerge improve. Glad to hear it went well with SkyVerge. Tell us more. Has anything changed since you first reached out?
Is there anything new that you'd like us to know? The Measurement Price Calculator extension for WooCommerce allows you to add and configure a calculator to your products that are sold in quantities based on their dimensions, square footage, volume, or weight.
This allows you to easily sell products which have a known measurement per item. Using the same pricing per square foot, you can easily enter the size of the box and the calculator will display the total price per box. Looking to instead allow customers to tell you how much they need? The Measurement Price Calculator also allows you to sell products based on the price by unit of measurement per square foot, cubic yard, etc. Perhaps you sell mulch with a price per cubic yard — you can allow the customer to provide an area and depth of mulch, and the calculator derives the total cubic yardage and final price.
With this one plugin you can configure two distinct calculator modes : quantity-based and user-defined. To learn how to set up products for each mode, check out the documentation. The quantity-based calculator is ideal for selling products that have a set measurement, such as a box of tile with given square footage.
The calculator will be shown on the frontend, prompting the customer for a length and width for instance. You set the label and the units to use, and your customer can easily purchase the minimum number of boxes based on the area of their floor and the coverage of each box of tiles:. The price for the product e. Of course, any of the calculators can be used : dimensions, area, volume or weight, with any combination of units and custom labels. On the other hand, the user-defined calculator mode allows you to sell products which are priced per unit and sold in custom sizes.
This calculator is ideal for selling products which are customized to order: for instance, fabric sold by the foot, with a length provided by the customer. On the product page, the customer will be able to supply the length desired and see the final price based on their dimensions:.
With this option enabled, you have the ability to account for product inventory in the same units in which it is sold. For instance, if your product is fabric by the foot you can configure your product inventory in terms of available feet of fabric, so if a customer orders two foot lengths a total of 20 feet will be deducted from your product inventory.
By enabling this option you are able to set a weight per square foot, for instance, so that shipping costs can be correctly totaled for products customized by your customers.
For simple products with prices that vary depending on the total measurement of the item, we are pleased to introduce the pricing table feature. No longer are you limited to a single price per unit for your pricing calculator products — simply define one or more pricing rules consisting of a measurement range, a price per unit, or a sale price per unit and the measurement price calculator will take care of the rest.
The price will be instantly updated on the product page based on the size of product configured by the customer. Display the available pricing on the frontend with a simple shortcode that can be used on the product page or anywhere shortcodes are accepted. Encourage your customers to purchase more with savings they can see. Want a convenient place to show this?
How about listing the price schedule in a custom tab added by the premium Tab Manager :. Remember that any of the calculators can be used: dimensions length, width, heightarea simple area or length x widthsurface area, perimeter, volume simple volume, area x height, or length x width x height or weight, with any combination of units and custom labels.
The Measurement Price Calculator allows you to configure product calculators that are as unique as your product line! Need any more reason to buy?You want to avoid broken links, slow pagesand abandoned carts. And, thanks to the WooCommerce Showcaseinspiration is never hard to find. This first example of product personalization is from a company that lives and breathes the concept of handmade goods. Here they can choose everything from the colors to the pattern on the cap and toe of the shoe.
Use WooCustomizer to easily Customize WooCommerce Pages.
Want to see? On the left side of the product page, you start with a flat black and white illustration of the product in question. Then, once you decide on colors you want, you merely look to the right side of the same screen. Again, the simplicity is what makes this one a winner. This is one want to handle it quickly and still meet all their needs. Even if you change a lot of settings or have an awkward screen size, everything adjusts perfectly, allowing you to design from any device.
Not every store can claim that! Here are a handful of WooCommerce extensions that we recommend trying, many of which these three stores are using:. Of course, you might have an idea for displaying personalization or custom products that goes beyond the scope of these extensions.
Looking for some more ideas? Cheers for the mention on eleven. Glad we could inspire you Vandy. Great idea for product customization. We will suggest this post to our woocommerce clients.
The Quero shoe optimizer is super cool!! Do you know what extension they used for that build process? Hey there — we can certainly reach out and find out. Great post!The WordPress. Today, most of the eCommerce sites need the simplest to the most advanced and complex online shops. And most of them wants to build their online shop with WooCommerce.
This is mainly because of the flexibility it provides and the ease of customization. Another very nice aspect of WooCommerce is, there are too many extensions to count and they cover almost every feature or functionality what you need. As a shop owner, you may want to publish more information about your products. There has some available commercial solution also but why do you cost some money when it could fairly and easily do by yourself via some easy actions.
How these tabs look will depend on your theme. For this purpose, I just diverge the above code which I add before to remove product tabs from my functions. Add the following snippet code to replace the description tab with a custom function in your functions.
You can add your own function and set the function rules inside the function. This simple and free plugin allows you to add lots of custom product tab including lots of features with its user-friendly interface. WooCommerce product tabs are a great way to tell your customers everything and anything there is to know about your product.
Hope the following code snippets will help to customize your product tabs by own. You can comment below to let us know your thoughts and opinion about the above tutorial for WooCommerce Product Tabs.
Add a custom WooCommerce Product Tabs: Insert the following snippet code to add a custom tab in your functions. Renaming WooCommerce Product Tabs: For this purpose, I just diverge the above code which I add before to remove product tabs from my functions.When planning a WooCommerce store, you will have to answer a lot of up-front questions that will have a serious impact on the future success of the store. The setup of the store is a serious challenge because once done, changes to the setup and design of the store are always difficult.
Now once the store is up, the next challenge is the clutter on the product pages. WooCommerce Single Product page has a lot of elements that do not directly help with the custom design and setup of the store. Two common culprits are product categories and star ratings. Not every store needs these two elements on the Single Product page. All these challenges could be tackled very easily through WooCommerce action and filter hooks. I have created this short list of things to demostrate what you could customize in the Product Page.
How to Customize WooCommerce Product Pages Like a Pro
The first thing you might wish to do is to display products in a different template than the default. The file single-product. A common practice when customizing the template pages of parent themes and plugins that is often recommended is to make a copy of the template in the theme. Now make all changes in the copy only. This way, if the themes and plugins are updated, your custom changes will remain unaffected.
Several plugins and themes provide an extensive collection of custom action and filter hooks that allow changes directly into theme file s. The good thing about all this is that you do not have to go through and modify the markup of the template files. The result is a cleaner code and no messy duplication of files.
I will use single-product. Similarly, content-single-product. At this point, I am assuming that you have a live WooCommerce store and are pretty familiar with the process of setting up a product page and product category. There are always cases where you need a custom product page or a custom product category page. This is done by tweaking the custom template of these templates. Now remember that when working with the content-single-product.
Another good practice is to give it a name that makes it stand out and be readily identified. This simple change will make sure that you could identify the correct file for a particular category immediately. This file is used to make all sorts of changes addition or removal of a sidebar, changes in the loop etc.
The next order of business is changes in the single-product. This file contains the loop that decides which templates would be loaded up to display the products. I will add an if condition that checks whether a product belongs to a particular category and then load the related single-product. Now, there is no real need to rename the file. In order to add the code to it, open up the file and find the following code snippet:. In addition, you would need to replace the content-single-product.
At this point the code looks like:. The next step is to upload these files to the WooCommerce store. Remember that both files content-single-product. It is a good practice to change code elements in this folder of the theme so that you could prevent the difficult-to-debug error of overwriting the original WooCommerce files. The final step is to check the product and product category pages to make sure that all the changes made in the code of the custom template have been applied and are showing up perfectly.
Learning to customize WooCommerce product pages and product category pages is a matter of adding and modifying hooks. If you need any help with the code or any other aspect of the idea, do leave a comment and I will get back to you. Customize WooCommerce Product Pages The first thing you might wish to do is to display products in a different template than the default. Conclusion Learning to customize WooCommerce product pages and product category pages is a matter of adding and modifying hooks.