# Welcome! Create and manage custom product page templates using the WooCommerce Product Template Builder for Avada. WooCommerce Product Page Builder for Avada and Fusion Builder lets you design your single product pages using Fusion Builder elements and make every product look unique. You get pre-designed templates to get started. You can preview the templates below. We are constantly working on adding new templates to the library. If you have any design or layout you think should be added to the library, please feel free to send it our way :) The WooCommerce product template builder provides 15 elements for the single product page design using Fusion Builder. You can use the Fusion Builder core elements to combine and create a stunning product templates. ![](/files/-M0ETFkx8x-7dKqbTehv) # Requirements In order to get this plugin working, you need to meet the following requirements. The plugin requires the following plugins that comes FREE with every purchase of Avada, to be installed and activated on your site along with the Avada WordPress theme in order for it to work - * WooCommerce * Advanced Custom Fields PRO * Fusion Builder You can find all the above plugins under Avada -> Plugins admin page and they all come **FREE** with Avada and you don't need to buy them separately :) Please make sure all the environment variables are GREEN in the system status to avoid any possible issues with using WooCommerce on your site. Our plugin works just fine if WooCommerce is working on your site, so there's no additional configuration required. You can check the system status under Avada -> System Status admin page. # Installation Learn how to install the plugin on your site. There are two different ways for installing your plugin. 1\. Install plugin through WordPress plugin installer, which is provided by WordPress core. 2\. Install the plugin via FTP. In case, you have enabled FTP on your WordPress install, you can still install the plugin via FTP. ### Installing Through Dashboard: 1. Go to Plugins -> Add New -> Upload 2. Choose the installable ZIP file (that you have download in your computer from codecanyon) Upload that file. 3. Now, click on activate link to activate the plugin. ### Installing Through FTP: 1. Extract the installable ZIP file (that you have download in your computer from codecanyon) Upload the extracted folder into wp-content/plugins directory. 2. Activate the plugin through the 'Plugins' menu in WordPress. Once the plugin is activated successfully, please make sure the Fusion Builder is enabled for the templates post type. To do so, please go to Fusion Builder -> Settings and check the box against the Product and Woo Templates, like shown in the following image - ![](/files/-M0EVl3NnttRQkwM_gx5) # Woo Templates Create product templates and assign them globally or at individual product level You can create product templates for all your products or set the template globally for all products from the settings screen. To get you started, we have provided pre-built template designs that you can import with just one click. Designing new templates is pretty much simple as you design your pages. With the product template, you get additional elements for WooCommerce when you try to add a new element. This is how it looks - ![WooCommerce elements](/files/-M0ETFkx8x-7dKqbTehv) While designing the product template layout, make sure you place the correct elements where you need them and also make sure you do not use single element multiple times to avoid the content duplication. Using single element multiple times will override the dynamic styling for that element and the last element styling will be used for all as the dynamic styling is generated based on the elements used in the template. # Template Settings Control the global default options for your templates. The template settings located in the admin menu under Woo Templates controls the default global options for the product templates. When you choose the default option for the product level settings, these settings will be inherited. Here's the settings screen for the templates - ![](/files/-M6qQ_OmlUM7EPvJ4EuS) ### Default Template This template will be used for all your products if you choose to. You can even set individual products different templates by changing the settings for that product. There are options available to choose the template from existing library you created or even you can create the template for individual product from the product edit screen itself. ### Force Woo Templates If you want to set the Woo Product template for all your products, you can simply set this option to "YES" and all your products will inherit the template you selected in the above default template setting. Forcing the template for all product can be overridden by individual product settings. ### Empty Cart Template This will control the design of Empty Cart page on your site. You can design your custom cart template as a regular page with Fusion Builder and then save that page as Fusion Builder Template in the library. The templates will appear in the dropdown of this option and you can choose the template you want to use as your Empty Cart page. ### Template Library This section shows you the list of pre-built templates we designed for you to get started. Just hit the Import button to import the template you want to use. The template will be imported to the Woo Templates and can be edited for your preferences. Once the template is imported, you can set it as default template from the same screen without even refreshing the page :) You can import the same template as many times as you need so you can edit the styling for different pages without affecting the actual template. We are constantly working on adding new product templates and the library is going to increase in future so you can get more designs to choose from. If you have any design in mind or a mockup ready for the template, please send it our way and we will take care of the rest to design and include it in the pre-built library. # Product Level Settings Control the product template settings on individual product level. The default settings does apply for all your product if you force it. However, there are products that you want to present differently, right? Well, we covered that as well. You can set the different product templates for your special products and make them stand out from the others. Here's the product level options - ![Product level template settings](/files/-M0I4Dcxc7a9lMTSanJe) ### **Enable WooCommerce Product Page Builder** This option will enable the product page builder settings for your product. If you haven't set to force the template for all your products and simply want to use the template for one of your products instead, you can do that with just enabling this setting. Once this option is set to "YES", this product will begin displaying the content layout from the product template you set as default, unless you change the next option for the template type. ### **Product Template Type** This option allows you to either inherit the template from the global options, choose different template from existing library or create custom template for this product only. Here are the three options explained - * Plugin Default - It will inherit your default template from the Woo Templates -> Settings page. You can change the global default template anytime you want. * Use Existing - You can choose the template for this product from existing templates if you've created any. You can import the templates from the library and choose them from here as well. * Create Custom - You can create custom template for this product using Fusion Builder. Similar to what the template layout under Woo Template is designed. If you choose this option, the existing product description content will be moved to the custom meta box and will be replaced with Fusion Builder layout. ### Product Template If you choose to use the existing template from the template type, this option is enabled. This option populates the list of all available Woo Templates you've imported or created yourself. The selected template will be used to generate the layout for this product on the frontend. You can change the product template anytime you need. ### Product Description Tab If you choose to create custom template for this product, this option will be enabled. This content will be displayed in the product description tab. The content is copied from the editor so we can use it as the description tab content. You can edit the content here whenever required. # Variation Swatches Convert regular dropdown boxes of product variations to stylish variation swatches ### Configure Product Attributes In order to use the product variation swatches, you need to first configure the product attributes. Here's how you can configure the product attributes and make use of the product variation swatches. ![Product Attributes Screen](/files/-M6qANajCKWwBPpXqp8N) Click on the **Edit** link for the product attribute you want to configure. You can find the product attributes under Products admin menu. Once you click on the edit link, you will be redirected to the attribute edit screen, where you need to set Display Type of the attribute. This option controls how the variation attribute will appear on the frontend. You can choose from 4 different types - ![](/files/-M6qBXOntax05aokc4ea) :arrow\_right: **Select**\ This is the theme default select box that you usually see on the products with variations, which looks similar to the screenshot below - ![](/files/-M6qBr3n1jsICy2CYamN) :arrow\_right: **Label**\ The label type will display your variations in a list of labels like buttons. You can configure the custom label text for each attribute term in the individual attribute term settings. Here's the frontend display of the variations using label type - ![](/files/-M6qDe2VZpAPKCRJ9Qhw) :arrow\_right: **Color**\ The color type says everything about it by it's name. Yeah, you can now display the colors in place of your variation that represents the color of the product. You can configure the color for each attribute term in its settings. Here's the final output on the frontend - ![](/files/-M6qEafc86UUwq9qoNOX) :arrow\_right: Image\ The image type will allow you to upload the image of the attribute that better represents than the word. Displaying the images in place of the regular dropdown variations will increase your chances of selling that product as your user gets the visual idea of the product for that variation. You can set the images for your attribute terms in their respective settings. Here's how it looks on the frontend when you add the image variation swatches - ![](/files/-M6qGQ48D5VXtaOoAS4H) # Product Attribute Options Configure each attribute and upload the image, select color and enter the label text you want to display on the frontend according to the display type. To configure the attribute options, you need to first click on the "Configure Terms" link for the specific attribute and then click on the Edit link for the attribute term you want to configure. When you land on the attribute term edit screen, you will find the section for the Product Attribute Options just at the bottom of the edit screen. Here, you can upload the attribute image, the color and also enter the label you want to display for the attribute on the frontend according to the display type. Here's a quick view of the options - ![](/files/-M6qJ797VvXLjy-rH9Tn) # Cart Page Customize your cart page the way you want with the number of options available. The WooCommerce Product Page Builder allows you to customize your cart page easily. You can create different cart layouts from the number of options available. ### How to customize the cart page? Since the cart page is only one on the site so unlike the product templates, we have created a custom element for the cart page that handles you cart page design and the layout. Here's how you can customize the cart page - * Edit you cart page * Remove the existing \[woocommerce\_cart] shortcode and switch to Fusion Builder * Add a container and then search for the element "Woo Cart Template" and insert it * Click on the Save button in the popup and update the cart page. This is just as simple as above steps. With just replacing the cart shortcode with the new cart element, you can convert your cart page to something like this - ![](/files/-M6qO77_jN0mfaGDU-xI) # Empty Cart Page Yes, you can now customize your empty cart page as well :) Are you looking for a way to customize your Empty Cart page and add some juice to it? Well, you can do it with the WooCommerce Product Page Builder for Avada and Fusion Builder. Once you customize your Cart Page with the Woo Cart Element, it will also set your Empty Cart with the new design. However, if you wish to design the empty cart page yourself, you can simply design it as a regular page, save the page as Fusion Builder template in the library and then Go to the Woo Templates -> Settings and choose the newly created empty cart template. Here's how the default empty cart template with our element looks like - ![](/files/-M6qQ58_Pzi3bE2enWer) # Checkout Page Customize the checkout page that converts the most Do you know? you can customize your checkout pages the way you need and converts your visitors the most using WooCommerce Product Page Builder add-on for Avada and Fusion Builder. Follow the instructions below to customize your checkout page and add another layer of awesomeness to it - * Edit your checkout page and remove the existing WooCommerce shortcode \[woocommerce\_checkout] * Switch to Fusion Builder editor and add a container with a single column * Click the add element button and search for Woo Checkout Page element in the elements list and add it to the page. ![](/files/-MJvjbUcr7v_978MVtmT) * Now, you can customize the checkout page as per your requirements with the different layout possibilities with the element. Let's take a look at the customized design of the checkout page - ![](/files/-MJvjuBMmuk9olnH6F-E) # Breadcrumbs Help your users navigate your website and keep track of their path using the breadcrumbs. You can customize the look and feel of the WooCommerce Breadcrumbs on your single product page using this element. Normal breadcrumbs position on your single product page while using Avada is placed in the Page Title Bar. However, if you don't want to use the page title bar, you just leave the breadcrumbs as well. Even if you get an element within the Fusion Builder core elements, there's no way to customize it and place where you need without the use of WooCommerce Product Template Builder. You can customize the font-size, colors of the breadcrumb text and also can add a nice border around it to make it stand-out and look awesome. Also, you can control the spacing inside and outside the breadcrumb element so there won't be much clutter on your single product page. You can even align the breadcrumbs as per your requirements from Left to Center and Right. Here's the quick preview of the breadcrumbs after adding some colors and borders - ![](/files/-M0EYvRioSmNAZZVLM1y) # Product Image Display the product gallery along with the featured product image. The default WooCommerce single product template shows the Product Images from the featured image set for the product and the gallery uploaded for the product gallery meta. Have you ever wondered if you can change the position of the product gallery? well, you can do that now. Even you can change the position of the product images from left to right or even place them in center of the page and add the information you want to show on the left and right side of the product images. Just like we used in this template layout - ![Product Image with Gallery in center](/files/-M0E_W4S699kFPKwfSgk) With WooCommerce Product Template Builder, you can design the layout you dreamed of. Just like you design your normal pages. We are adding more options for you to customize the product gallery. ### Gallery Thumbnail Position From the version 2.2, you'll be able to set the gallery thumbnail position to be left or right side of the main product image. The default thumbnail position is at the bottom of the main product image. With the ability to customize the product page, you must also have any ability to change the default product gallery layout, which is why we're introducing this awesome feature. Here's how the layout with left and right positions look -
Product Thumbnails at the Left Side
![Product Thumbnails at the Right Side](/files/-M6qUJAYRyzNaTdJCr1K) # Product Title Displays the product title on the single product template where this element is used. The default product title output is controlled by your theme, and you don't have much control on it, and instead, you end us writing the custom css to give it the look and feel it deserves. But still, you can't change the actual product title HTML Tag to meet your SEO requirements, right? Well, the problem is solved now. YES! you can now set which HTML Tag you want to use for your product title, change the color according to your product colors, change the font size without affecting the entire site heading font sizes and much more. You can even place the product title above the product gallery images or create a custom page title bar with container and the product title element and customize the way you want your product title to be displayed. Here's how one of the template we provide utilize the product title element - ![](/files/-M0Ec4130RKxZ9xQa-rw) # Product Rating Displays your product rating with the number of reviews it received. By default, the product ratings are displayed just below the product title and you don't have control over their position unless you know expert level coding. With WooCommerce Product Template Builder, you can now place the ratings element anywhere on the product page you feel is a good place for it. You can customize the ratings star colors, font size and even can add a nice border around the entire reviews block to make it stand-out on the page. Here's an example of how it will look when you change the rating position on the product page - ![Custom positioned rating element](/files/-M0EegOgBnKDRlLoVNQ2) # Product Price Displays the product price with all the customization options. Ever wondered how you can make the product price capture your visitors attention? Make it bigger in size or add the color of your product? The product price element exactly does that, while allowing you to place the price anywhere you need with the help of WooCommerce Product Template Builder. You can adjust the font-size, the price text color, add a background color to make it more beautiful or even can add a nice border to make it stand-out. Placing the product price just above Add to Cart button increases your chances of getting the customer on-boarded. Here's how it looks when you add the product price just above the add to cart buttons - ![](/files/-M0EegOgBnKDRlLoVNQ2) # Product Excerpt Describe your product, its features and more in short description text. Product excerpt element allows you to place the product content text you add in the backend to place anywhere on the product page you want. Product excerpt is the text you usually see just below the price on your single product theme default template. It helps you to add some additional information about the product or add highlight points about the product like the product features etc. # Add to Cart Show Add to Cart buttons with the product quantity box. Product Add to Cart element outputs the form that allows your users to add that product to the cart. The form contains all the options like the product variations with their prices, product quantity and the button that submits that form to add the product to the cart with the users selection. Right now, you can only see the add to cart form below the product excerpt on the single product page. How, if you can add the same at the end of the product page so user can simply click to add the product to the cart instead of scrolling up and getting distracted? With WooCommerce Product Template Builder, you can achieve that easily. Just add the element to the template and boom! Let's see what we can achieve with the customization available - ![Place Add to Cart on right side](/files/-M0E_W4S699kFPKwfSgk) ### Product Variation Swatches From the version 2.2, you'll see two new options added to the Add to Cart element of the WooCommerce Product Page builder plugin. What these options do? They allow you to change how the variable product will display the variations form , which it usually display as a dropdown. #### Option - Variation Style This option will give you choice to whether or not use the product variation swatches for the template you're currently editing. The change will affect all the products that has variations and using that template. :arrow\_right: The theme default option will do nothing and keep the variations form display as per the theme styling. This is useful when you have another plugin installed already that controls the variation swatches for you. :arrow\_right: The Swatches option will convert the normal dropdowns to awesome looking Product Variation Swatches once you've them all configured. You can read [this documentation post](/settings/product-attribute-options) to learn more about how you can configure them. ![](/files/-M6qL5vZv18LV4fhOUI3) # Product Meta Display the links of the product categories and SKU etc. Product Meta element outputs the meta information about the product you usually see after the Add to Cart section on the single product. With WooCommerce Product Template Builder, you can customize the output with some colors, font-size and nice borders around the block. Here's the product meta on your product page - ![Product meta highlighted](/files/-M0EjmlFPsQbtXstmwy9) # Product Sharing Sharing is caring! Add social sharing options to your product Avada provides nice option to share your product on social media. With this element, you can place the social sharing section anywhere on your product template. Within the Core theme options, there's no much customization available, so we added options to customize the colors, borders and the hover colors as well. Now you can make the sharing section, a caring section. Here's how it looks after a small customization - ![](/files/-M0Ekh4HhSgRwTed2heB) # Product Tabs Display more information about the product in tabs. The product tabs element allows you to place the tabs anywhere on the product template, while customizing the look and feel. By default, the product tabs consists tabs like Description, Additional Information and Reviews. The default position of the product tabs is below the section of product gallery and the information such as product title, price and add-to-cart buttons. Since this element only hooks to the default WooCommerce product tabs, all your add-ons for the product tabs works just fine and you can still make more out of it. You can place the tabs just in the place of product excerpt, or divide the enter section to show related products and the product tabs side-by-side and much more. You imagination is the limit. Let's take a look at a customized design template you get within the plugin that utilizes the product tabs element and adds the awesomeness to your single product page - ![](/files/-M0EnyOGHpAcyI5WVKWE) # Product Description Describe your product in detailed description text and images. The Product Description element outputs the product description content you add to your product in admin edit screen. This is the same content you see in the product tab - description. If you do not want to use the default product tabs and instead add the Fusion Builder tabs to your product, you can simply use this element's shortcode to output the product description to your tabs content. You can then customize it the way you want. Here's a quick view of how you can achieve better results with Fusion Builder tabs and the product description element - ![](/files/-M0Eoy1WQqwrjTxizx1z) # Product Information A.K.A Product Additional Information The Additional Product Information element outputs the content from your Additional Information product tab. This content is generated when you have a variable product or you have configured the additional information for the product such as colors, size etc. You can customize the colors, font-size and borders for this element. Also, you have options to adjust the spacing inside and outside the element to make it clean and keep out of the clutter. # Product Reviews Display customer reviews with their ratings and the feedback form. By default, the product reviews can only be accessed from within the product tabs and there's no way to add the reviews outside the tabs unless you know some coding. Well, we have a solution now. You can simply use the Product Reviews element to place the customer reviews and ratings with the feedback form anywhere you need. You can customize the colors, font-sizes and much more. Here's a quick example of how it looks when what you can achieve when you place the reviews outside the tabs on your single product page - ![](/files/-M0Er2qvKqiUOuhtYCRf) # Related Products Displays products related to the current product being viewed. Displaying related products on your single product page will help your users to find more products related to their choice and help you to increase sales. By default, the related products are displayed below the product tabs and you have an option to enable/disable them. With WooCommerce Product Template Builder, you can customize the look and feel of the related products section as per the product styling. You can control the product title font size, colors etc. in the related products section and can also change the color for the star ratings and the product price text to fit your product style guide. Here's a quick example of the related products section with customized colors - ![](/files/-M0Es2o0vg-HayyiWWHf) # Upsell Products Displays products you think the customer should buy. Upsell products are similar to the related products, however, they are configured by you in the product configuration, where the related products are auto generated and they are depend on the categories and tags the product share as common. Upsell products are mostly displayed on the cart page, however, they can be displayed on the single product template as well and you can give a nice headline as "You may also like this" or something like that.