How to customize WooCommerce product pages

The product pages that highlight your products should reflect this. While the default WooCommerce product pages template is great for most online stores, you might prefer something that reflects your product’s unique style and benefits.

WooCommerce extensions and one core WooCommerce feature allow you to add your own stamp to product pages without having to be a programmer.

Product Add-Ons

The Product Extension extension allows shoppers to customize their purchase by adding more fields to product pages. Add variations to your product pages with sample images.

Ideal for:eCommerce shops that offer additional options such as gift wrapping or monogramming.

  • If your clothing store offers embroidery, let customers type in the text they would like embroidered before they checkout so that you don’t have any to do after they’ve paid.
  • Offer options for fabric, size and style if you are selling accent pillows
  • Customers can choose the quote they want engraved on jewelry if you are selling it.
  • Include options for gift wrapping and a thank-you note if you offer giftable products.
  • Allow customers to buy a warranty if you sell electronic products.
  • Donate to a charity if you are a non-profit.

You can charge extra for add-ons or give customizations free of charge. This flexible approach allows shoppers to have the choices they want.


See our services : Blockchain services, Backbase Vietnam


Find out more about Product Add-Ons.

Photos and Variation Swatches

Customers want to see your product in action if it has color variations or patterns. The Variation Swatches & Photos extension shows variations — styles and sizes, patterns, colors, and so on. • An image or color sample to help customers understand what you’re selling and enhance the design of your product pages.

Ideal for:eCommerce shops with variable products

  • Display color options if you sell T-shirts.
  • Show all frames if you are selling eyeglasses.
  • Highlight the options for pendants if you are selling jewelry.
  • Include images of your skateboard patterns if you are selling them.

Read more about Variation Swatches, Photos and to see it in action.

WooCommerce 360o image

WooCommerce 360o Images allows you to add a 360o rotation to product pages. This will allow shoppers to focus on specific product details. When you add a collection of images to a product gallery the featured image will be replaced by a 360o photo that customers can rotate to view all aspects of the product. The gallery is also fully responsive so that mobile shoppers have the same amazing experience.

Ideal for:eCommerce shops that offer customers the opportunity to hold a product in their hands.

  • Customers can see the style of furniture you sell from every angle.
  • Customers can inspect the details of car parts that you are selling.
  • Customers can zoom in on any nuance, engraving, or feature of watches you sell.

Find out more about WooCommerce 360o image.

Learn more:

WooCommerce Product Video

Videos can be a powerful tool to show your products in action. To add videos to your WooCommerce product gallery or replace featured images with videos, use the ProductVideo for WooCommerce extension. Upload the videos to WordPress media library, or embed them from YouTube or Vimeo.

Ideal for: eCommerce shops with products that look best in action

  • Demonstrate the dimensions of power tools and the way it works if you are selling them.
  • Show how the item fits different body types.
  • Include clips of children playing with toys and testimonials from parents.

Get more information about WooCommerce Product Video.

Size Chart for WooCommerce

A chart can help customers decide which size product to buy if you offer products in different sizes. It also reduces returns. The Size chart for WooCommerce extension allows you to add size charts to product pages. You can upload your own or create one from your dashboard. Charts can be displayed in product details or pop-ups.

Ideal for: eCommerce shops that sell products in multiple sizes


  • Add a size chart to your T-shirts if you are selling them.
  • Add a size chart to your furniture sales listing with length, height and depth.
  • Add a size chart to your sticker shop with the height and width measurements.

Get more information about the Size Chart for WooCommerce.

Recommendations for Product

Cross-sells and upsells can increase your customers’ cart sizes and overall sales. To show your customers more information, use Product Recommendations. You can add recommended products based upon what’s hot, what’s new and what completes a look. You can also display them based upon what is in the customer’s basket.

Ideal for:eCommerce shops with more than one product

  • Consider selling socks or laces if you are selling shoes.
  • You can recommend necklaces and bracelets to go with earrings.
  • Sell toys? Recommend puzzles that are similar to the one your customer has.
  • Recommendations for popular varieties and soil additives are good ideas if you’re selling plants.

Find out more about Product Recommendations.

Simple CSS changes, no extension required

CSS is a programming language that controls how your website looks. It can control everything from the fonts and colors you use to make your site look great, as well as button sizes and background. You should have basic CSS knowledge. Navigate to Appearance– Customize– Additional in your dashboard. Make the following changes:

Change font size for product titles

To change the size of product titles from 36px to 36px, use the code below. You can replace the number 36 with any number you like.

.woocommerce div.product .product_title  font-size: 36px; 

Change product title colors

A hexcode is a six-digit number that is used to identify a particular color online. To change the color of your product title to #FF5733, use the code below. You can replace the hex code below with any color; the HTML colour picker will give you the code for any color.

.woocommerce div.product .product_title  color: #FF5733; 

Make variations labels bold

To display your variations titles in bold text, use the code below.

.woocommerce div.product form.cart .variations label  font-weight: bold; 

Italicize variation labels

To italicize variations labels, use the code below

.woocommerce div.product form.cart .variations label  font-style: italic; 

Colors for the Buy Now button:

This code can be used to change the background color for your Buy Now button. To get the hex code of the color you want, again use the HTML Color Picker.

.woocommerce div.product .button  background: #000000; 

Get started customizing your product pages

WooCommerce is all in flexibility and customization. This is why it offers all the tools necessary to modify the design and functionality for product pages. Your pages can be as unique and individual as the products they showcase by adding dimensions charts, videos, and other fields.

Cloud Pos Software - A product of

- Partners : | Fintech | | Blockchain solutions