How to customize Product pages
Updated 1 month ago
Default Product Pages #
Once you install and set up the WooCommerce plugin for your site, your product pages will use a default WooCommerce Content template.
You can adjust basic elements and options of this template at Theme Options > Shop > General Settings section:
Custom Product Pages #
Copying Product Page Template from the Demo Sites #
We designed pre-build demonstration sites with the WooCommerce shop. You can copy their content templates via Theme > Demo Import, by choosing the needed demo site and deactivating all checkboxes except the Content Template before import.
Partial Copying of the Product Page Template from the Demo Sites #
Instead of copying the whole Content template, you can copy its part from the demo site.
Start with creating a Content Template at Theme > Content Templates > Add Content Template.
Next, open the product page of the demonstration site you choose and activate the “Enable sections copying” button in the right toolbar.
After this, you can copy a section of the product page template by pressing the “Copy Section” button.
To paste copied section, return to your Content Template page and use the relevant button to insert copied shortcodes of the needed section.
If you edit your Content Template with WP Bakery page builder, the needed “Paste Row/Section” button is located at the top.
If you edit your Content Template using the Theme’s Live Builder, the needed “Paste Row/Section” button is located in the menu, at the top left corner of the sidebar.
Editing Content Template for Product Pages #
Editing a Content Template is similar to editing a regular page. You can use WP Bakery Page Builder or Theme’s Live Builder to add rows, columns, and other structure and content elements.
We’ll take a closer look at elements that are commonly used and are more specific for the Product Pages, which are:
1. Product Gallery – shows a gallery of the product preview image(s). Its appearance could be adjusted at the Theme Options > Shop > Global Settings. You can also use the “Design” tab of the element to apply custom colors, spacing, and other styling features.
2. Product Data – shows one of the product data table elements (price on the screenshot below).
Available options to show via the Product Data are:
- Sale Badge;
- List of attributes;
- Stock status;
- Actions for plugins compatibility.
You can add the Product Data element multiple times to show different options.
3. “Add to cart” Button – shows a button that adds items to the cart. If the product is set up as quantitive and/or if it has multiple attribute options (such as different sizes or color options) – “Add to Cart” Button element will add relevant dropdowns and inputs to choose the exact option(s) and number of items to be added to cart.
4. Post Content – shows a full text description of the product (Post Content > Full Content) or a short description (Post Content > Excerpt). If you need both short and full descriptions in your template, you can add this element multiple times. If the description is taking too much space, you can hide part of it with the “Show more” link. To set it up, use the Post Content settings > More options > Hide part of a content with the "Show More" link.
5. Grid / Carousel – as a rule of thumb, you want to interest a potential customer with more products of the same category, while he browses the current product page. To set it up, add the Grid (or Carousel) element with the settings Show > Items with the same taxonomy of current post > Product <taxonomy> (Product categories on the screenshot below).
Similar to pages, you can use the “Design” tab of elements you add to your Content Template to apply custom styling options, such as background and text colors, sizes, spacing, appearance animation, and more.
Applying Custom Content Template for Product Pages #
There are several options for the application of your custom Content Template for Product Pages.
Option 1. Globally for All Products
The most common use case is to apply your custom Content Template to all products. To set it up, go to Theme Options > Shop > Product and choose your Content Template from the dropdown list.
Option 2. For Products with specific Category or Tag
You can apply your custom Content Template only to the products of certain taxonomy (tags, categories). To set it up, open the relevant taxonomy name page, and specify your custom template in the Pages Content template dropdown.
Option 3. For separate specific Product(s)
You might also want to apply a custom Content Template for certain product(s) only. You can set it up while editing the product page, via the Page layout > Content template.
Custom Product Pages Examples #
Example 1. Fashion Shop
Example 2. Online Courses
Example 3. Simple Shop