If you’re running an online store using WooCommerce, you may have found that the default product pages don’t always fit your specific needs or branding. Fortunately, WooCommerce makes it easy to customize your product pages to create a more unique and personalized shopping experience for your customers.
In this article, I’ll give you an overview of WooCommerce product pages and how you can customize them using three different methods, i.e., extensions, CSS, and custom code.
Experience Superior & Hands-Off WooCommerce Hosting with Autonomous
Keep your online store ready for all the unexpected traffic spikes with Cloudways Autonomous. Stay ahead of the curve with advanced scalability and cutting-edge technology.
What Are WooCommerce Product Pages
– An example of a WooCommerce product page.
A product page in WooCommerce is a page where a single product is displayed. This page includes all the product details, such as its name, description, price, images, and variations (if any).
Here are some key components on a WooCommerce product page:
- Product Name: The product’s name is usually displayed prominently at the top.
- Product Description: A detailed product description, including its features and benefits.
- Product Images: High-quality images of the product from different angles are essential to help customers visualize the product.
- Product Price: The product’s price and discounts or promotions are displayed on the page. Check out some hosting coupon by Cloudways.
- Add to Cart Button: The add to cart button allows customers to add the product to their shopping cart.
- Product Variations: If the product comes in different sizes, colors, or other variations, these options are usually displayed on the product page.
- Product Reviews: Customer reviews and ratings can be displayed on the product page to help other customers make informed purchasing decisions.
- Related Products: Additional products related to the product being viewed can be displayed on the product page to encourage customers
Advantages of Customized Product Pages
Here are a few reasons why you might want to consider customizing your WooCommerce product pages:
- To differentiate your store from competitors who may be using the same default WooCommerce product page layout.
- To attract and retain customers looking for a unique shopping experience.
- To reinforce your brand identity by incorporating brand colors, fonts, and design elements into your product pages.
- Improve the user experience by making it easier for customers to find the information they need and make informed purchasing decisions. For example, you might add product images, including customer reviews or related display products.
- To increase your sales and revenue.
Ready to take your WooCommerce store to the next level with customized product pages?
Install WooCommerce on your server in a few clicks on an optimized managed cloud server.
How To Customize WooCommerce Product Pages
The following are the three methods to help you customize your WooCommerce product pages.
- Extensions
- CSS
- Custom Code
Method 1: Customize WooCommerce Product Pages via Extensions
WooCommerce is a powerful ecommerce platform allowing you to build an online store easily. It offers a wide range of extensions that allow you to add new features and functionality to your store, including customizing product pages.
Some popular WooCommerce extensions can help you customize product pages:
Extensions | Functionality |
WooCommerce Product Add-ons | This extension allows you to add custom fields to your product pages, such as checkboxes, drop-downs, and text areas. |
WooCommerce 360º Image | This extension allows you to perform custom image rotation. |
Product Video for WooCommerce | This extension allows you to add videos to the product pages. |
Size Chart for WooCommerce | This extension allows you to add size charts to your products. |
Product Recommendations | This extension allows you to add a recommendation section to your product page. |
Method 2: Customize WooCommerce Product Pages via CSS
Customizing WooCommerce products using CSS can be a great way to make your online store stand out and create a unique look and feel for your customers. If you have CSS knowledge, you can simply write the code to make changes to your product pages.
After logging into WooCommerce Dashboard, go to Appearance → Customize.
- Then go to Additional CSS to add custom CSS.
CSS Code for Black CTA
If you want to change the CTA color from default to black, add the following code in Additional CSS.
button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; }
Here’s how the CTA will look.
CSS Code for Blue CTA
Similarly, if you want to change the CTA color from black to blue, add the following code in Additional CSS.
button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; }
Here’s how the CTA will look.
This is how you can play with the design elements of the product pages in WooCommerce.
Method 3: Customize WooCommerce Product Pages via Custom Code
If you’ve got good technical skills, you can customize WooCommerce product pages via custom code.
Step 1: Create a Global Template
The first step is to create a global template, which will be the same for all product pages.
- Write an opening PHP comment at the top of the file that states the template’s name.
- Create a template file under the activated theme folder named template-custom-product.php
<?php /*Template Name: Customize Product*/ ?>
The template is based on the default WooCommerce product page. It will have the following code.
<?php $params = array('posts_per_page' => 5, 'post_type' => 'product'); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( 'No Products'); ?> </p> <?php endif; ?>
As you can see, it is a very basic template. While it does get the job done, you could further extend the functionality of this page through several built-in WooCommerce functions.
The following list is a limited selection of WooCommerce functions that include a wide range of information on your custom product display pages:
- the_permalink() – Displays the product URL.
- the_content() – Displays the full description of the product.
- the_excerpt() – Displays a brief description of the product.
- the_ID() – Displays the product’s ID.
- the_title() – Displays the name of the product.
- the_post_thumbnail() – Displays the product image.
Step 2: Add Functionalities in the functions.php of the Activated Theme
2.1. Display Category Of WooCommerce Product
Categories are an essential way of categorizing multiple products in the store. If you wish to display the category of the product on the page, place this snippet in the functions.php file of the activated theme.
<?php if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> <div class="product_meta"> <?php do_action( 'woocommerce_product_meta_start' ); ?> <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?> <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span> <?php endif; ?> <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?> <?php do_action( 'woocommerce_product_meta_end' ); ?> </div>
2.2. Display Thumbnail of Product Category
Every product category has its own thumbnail. If you need to include it in your custom product display, place this snippet in the functions.php or template.php file of the activated theme.
<?php function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( 'tax_query' => array( array( 'taxonomy' => 'product_cat', 'field' => 'slug' ) ) ); $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div> <?php endforeach; wp_reset_postdata(); } } add_action('wp_footer', 'cwresponse_get_thumbnail');
2.3. Remove Description Heading
If you want to remove the description heading from Woocommerce single product tabs, add the following code in the functions.php file of the activated theme.
add_filter( 'woocommerce_product_description_heading', '__return_null' );
2.4. Remove Product Title
If you want to remove the product title from Woocommerce single product tabs, add the following code in the functions.php of the activated theme.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' );
Step 3: Customize Woocommerce Template in WooCommerce Plugin
Go to the woocommerce\templates directory and insert the following code into the content-single-product.php or single product folder. However, it’s recommended to use the functions.php file.
<div class="images"> <?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )->post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID ); } ?> <?php do_action( 'woocommerce_product_thumbnails' ); ?> </div>
If you don’t wish to do the coding, just write the simple CSS code.
.images { float: right !important; }
And that’s it.
Key Considerations for Product Pages
Customizing product pages is crucial for improving the user experience and driving sales on ecommerce websites. Here are some key considerations to remember when customizing product pages:
- User experience: The most important consideration when customizing product pages is the user experience. The pages should be easy to navigate and provide all the necessary information about the product. Ensure the pages are visually appealing, load quickly, and have a clear call to action.
- Product information: Product information is a key product page element. It should be detailed and accurate and include images, videos, and reviews to help customers make an informed purchasing decision.
- Mobile optimization: More and more customers shop online using mobile devices. It is essential to ensure that your product pages are optimized for mobile devices, with easy navigation, large images, and clear calls to action.
- SEO optimization: Optimizing product pages for search engines is important to ensure your products are visible to potential customers. Ensure your product pages have relevant and descriptive titles, meta descriptions, and keywords.
- Personalization: Personalizing product pages can help increase engagement and sales. Use customer data to show personalized product recommendations, related products, and promotions based on the customer’s browsing and purchase history.
- Social proof: Including customer reviews, ratings, and testimonials can help build trust with potential customers and increase conversions.
- Clear pricing and shipping information: Customers need to know the product’s price and any shipping costs before making a purchasing decision. Ensure that this information is displayed clearly on the product page.
- Upselling and cross-selling: Customizing product pages with upsell and cross-sell options can help increase the average order value. Display related products or complementary products that customers may be interested in purchasing.
Summary
Customizing your product pages in WooCommerce can help you create a unique shopping experience for your customers and improve your sales. With WooCommerce’s built-in features and flexibility, you can easily modify the layout, add new elements, and tweak the CSS and HTML code to make your product pages stand out.
Q. Can I customize a WooCommerce product page?
A) Yes, you can customize it using themes, plugins like Elementor, or by editing template files and using WooCommerce hooks.
Q. How to change the product list page layout in WooCommerce?
A) Modify it via theme customizer, use page builder plugins, apply custom CSS, or edit the archive-product.php template.
Q) How to customize WooCommerce single product page programmatically?
A) To customize a WooCommerce single product page programmatically, follow these steps:
First, create a child theme to ensure your changes are not overwritten during theme updates.
Copy the single-product.php file from the WooCommerce plugin directory to your child theme’s woocommerce folder.
add_action( 'woocommerce_after_single_product_summary', 'custom_function', 10 ); function custom_function() { echo '<p>Custom text or HTML here</p>'; }
Add or remove elements using WooCommerce action hooks and filters.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'woocommerce_single_product_summary', 'custom_title_function', 5 ); function custom_title_function() { echo '<h1>Custom Title</h1>'; }
Customize product data (price, description, etc.) by modifying functions in your functions.php file.
Use custom CSS to further tweak the appearance of the product page.
Q) How do I edit a single product page in WooCommerce?
A) You can use page builders, custom fields, WooCommerce hooks, or override the single-product.php template.
Owais Khan
Owais works as a Marketing Manager at Cloudways (managed hosting platform) where he focuses on growth, demand generation, and strategic partnerships. With more than a decade of experience in digital marketing and B2B, Owais prefers to build systems that help teams achieve their full potential.