How to Customize Product Pages in WooCommerce (3 Methods)

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.

Overview of 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:

1. Product Name: The product’s name is usually displayed prominently at the top.
2. Product Description: A detailed product description, including its features and benefits.
3. Product Images: High-quality images of the product from different angles are essential to help customers visualize the product.
4. Product Price: The product’s price and discounts or promotions are displayed on the page. Check out some hosting coupon by Cloudways.
5. Add to Cart Button: The add to cart button allows customers to add the product to their shopping cart.
6. Product Variations: If the product comes in different sizes, colors, or other variations, these options are usually displayed on the product page.
7. Product Reviews: Customer reviews and ratings can be displayed on the product page to help other customers make informed purchasing decisions.
8. 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.

Customize WooCommerce Product Pages

The following are the three methods to help you customize your WooCommerce product pages.

1. Extensions
2. CSS
3. 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:

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. Social proof: Including customer reviews, ratings, and testimonials can help build trust with potential customers and increase conversions.
7. 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.
8. 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.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

Get Connected on: Twitter Community Forum