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.
Contents
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.
See more products : Magento pos, Pos shopify, bigcommerce pos, woocommerce pos
- 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.
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:
- Magento Pos
- Shopify Pos
- Bigcommerce Pos
- Woocommerce Pos
- Netsuite pos
- MSI
- Bigcommerce automation
- Shopify automation
- Backorder
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
Examples:
- 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.