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 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 page templates via Theme > Demo Import, by choosing the needed demo site and deactivating all checkboxes except the Page Template before import.
Editing Page Template for Products #
Editing a Page 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 Page Template to apply custom styling options, such as background and text colors, sizes, spacing, appearance animation, and more.
Applying Custom Page Template for Products #
There are several options for the application of your custom Page Template for Products.
Option 1. Globally for All Products
The most common use case is to apply your custom Page Template to all products. To set it up, go to Theme Options > Shop > Product and choose your Page Template from the dropdown list.
Option 2. For Products with specific Category or Tag
You can apply your custom Page 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 Page template dropdown.
Option 3. For separate specific Product(s)
You might also want to apply a custom Page Template for certain product(s) only. You can set it up while editing the product page, via the Page layout > Page Template.
Custom Product Page with Third-Party Plugins #
You might want to use some third-party plugin that modifies the product page by adding extra features/functionality.
To make these extra features work, open the Page Template you use for the Products. Add a Product data element and set it up to show "Actions for plugins compatibility".
Custom Product Pages Examples #
Example 1. Fashion Shop
Example 2. Online Courses
Example 3. Simple Shop