woocommerce default “product” page is great for many online businesses, but you might want something that reflects the unique style and strengths of your products.
With the help of Woocommerce extensions and basic functionality, you don’t have to be a developer to put your own signature on these product pages.
“ADD-ONS” PRODUCTS
The Product Add-Ons extension allows you to add additional fields to your product pages so that buyers can personalize their purchases.
Arrange options using text fields, checkboxes, or drop-down menus and add variations with sample images – include them for individual products or for your entire catalog.
Perfect for: Online stores that offer additional options like gift wrapping and monogramming.
- If you are a clothing store that offers embroidery, offer your customers to customize the clothing
- If you are a store that offers cushions, offer sizes, fabric types, and models as options.
- If you sell jewelry, let your customers choose the message they want engraving on the piece.
- If you distribute gift-giving products, include gift wrapping options or a thank you note.
- If you sell electronics, allow buyers to purchase a warranty that protects their item.
- If you are a non-profit organization, tell people who support you to include a donation in their purchase of merchandise.
You can choose to charge for each add-on or offer free customizations. It’s an effective way to provide buyers with the options they need.
SAMPLES AND PHOTOS OF THE VARIATIONS
If your product has variations of colors or patterns, buyers want to see them in action. The Sample Variations and Photos extension displays the variations – styles, sizes, patterns, colors, etc. – with an image or color swatch to give customers a better idea of what exactly they are buying and improve the presentation of your product pages.
Perfect for: online stores with products that can be declined
- If you sell T Shirts, display your colors as an option.
- If you sell eyeglasses, show your customers all of the possible designs.
- If you are selling jewelry, highlight the pendants that customers can choose from.
- If you sell skateboards, include pictures of the models you offer.
WOOCOMMERCE 360º IMAGE
With Woocommerce 360 ° Image, you can add dynamic rotating 360 ° photos to your product pages so that buyers can see all the details of your product. Add a group of images to a product gallery, and the featured image will be replaced with a beautiful 360º image that customers can rotate to see all aspects of the product. This feature is also completely intuitive, so that buyers on mobile devices have the same experience.
Perfect for: Online that want to make customers feel like businesses they’re physically holding a product.
- If you sell auto parts, customers can take a closer look at the details that matter to them.
- If you sell watches, customers can zoom in on every shade, engravings, and features.
PRODUCT VIDEOS FOR WOOCOMMERCE
Videos are great ways to showcase your products in action. Use the Woocommerce extension to add videos to your product image gallery, or simply to replace featured images with videos. Upload the videos to WordPress’s media library or through third-party services like Vimeo or Youtube.
Perfect for : Online businesses with products that make you better when shown in action
- If you sell clothes, show how an item adapts to different body types and how these pieces can work with other clothes.
- If you sell toys, include videos of kids playing with your products and testimonials from satisfied parents
SIZE CHART FOR WOOCOMMERCE
If you sell products with different sizes, a table helps customers understand which item to buy and helps reduce the number of returns.
Woocommerce Development Agency in Lahore extension allows you to add size charts to your product pages. Upload your own, or create it from your dashboard. You can choose to deploy the tables in the description box of your product or only as a pop-up.
Perfect for: Online stores that sell products in multiple sizes.
- If you are selling T-shirts, add a size chart with shoulder, chest, and waist measurements.
- If you are selling furniture, add a size chart with the length, height, and depth measurements.
- If you are selling stickers, add a size chart with height and width measurements.
PRODUCT RECOMMENDATIONS
Direct sales and cross-selling are effective ways to increase customer basket size and your overall sales. Use product recommendations to show customers what interests them. Add recommended products based on what’s popular, what’s new, what’s on sale, what complements a look, and more. Do not hesitate to display them according to what is already in the basket of your customer.
Perfect for: Online businesses that have more than one product.
- If you sell shoes, recommend socks and / or laces.
- If you sell earrings, we recommend bracelets and necklaces from the same collection.
- If you sell toys, recommend puzzles similar to the one the customer has in their shopping cart.
- If you are selling plants, recommend other popular varieties or potting mixes.
SIMPLE CSS CHANGES, NO EXTENSIONS NEEDED.
CSS is a coding language that controls the design of your website, from fonts and colors to button size and background. If you have basic CSS knowledge, navigate to View → Customize → Additional CSS in your dashboard and make the following changes:
Change the font size of product titles
Use the code below to change the size of your product titles to 36px. Replace the “36” with the number you want.
.woocommerce div.product .product_title {
font-size: 36px;
}
Changing the Color of Product Titles
A hexadecimal code is a six-digit code that represents a specific color online. Use the code below to change the color of your product title to the hexadecimal code # FF5733. Replace the hexadecimal code with whatever you want; you can use the HTML color picker to get the color code you want.
.woocommerce div.product .product_title {
color: #FF5733;
}
Bold Combination Labels
Use the code below to display your combination titles in bold.
.woocommerce div.product form.cart .variations label {
font-weight: bold;
}
Italicize the declination labels
Use the code below to italicize the declination labels.
.woocommerce div.product form.cart .variations label {
font-style: italic;
}
Change the colors of the “Buy Now” button:
Use this code to change the background color of your “Buy Now” button. Again, use the HTML color picker to get the hex code for the color you want to use.
.woocommerce div.product .button {
background: #000000;
}
Start Customizing Your Product Pages
WooCommerce is all about flexibility and customization, which is why it provides all the tools you need to change the design and functionality of product pages. By adding fields, videos, size charts, and more, your pages can be as unique as the products they feature.