Backed by Awesome Motive.
Learn more on our Seahawk Blog.

Customize WooCommerce Templates & Product Pages

Updated on
Written By: author image Komal Bothra
author image Komal Bothra
customize woocommerce template

Today Woocommerce has taken the eCommerce industry by storm with its groundbreaking flexibility and customization options. In the e-commerce world, it ranks highly. As of now, it holds 27% of the e-commerce market share.

But prebuilt templates and product pages don’t meet every business’s needs. There are a lot of customization options in WooCommerce. 

To perform well, your store must follow the best customization practices. A key component of customization lies within product pages and templates. A well-implemented customization strategy can reduce abandoned carts.

Since most customers visit your online store, you should make navigating and customizing products and templates easier to ensure success.

This article shows you how to customize WooCommerce templates, edit product templates and customize product pages.

Why is it Important for Store Owners to Customize WooCommerce Templates?

WooCommerce has tons of customization options. You can customize anything, from checkout to shop pages, category pages, thank you pages, etc. This helps your store stand out from the crowd, but to be truly distinctive, customizing WooCommerce templates might help.

It is essential to edit your site’s default pages to have a different look and feel from your competition. You can also customize the default templates to give your business an edge.

The templates you use can be customized to add functionality and details to your online store. With these features, you can provide shoppers with a better customer experience. Therefore, you must keep your eCommerce store up to date by getting in- depth into the WooCommerce template editing. Read on to explore ways to edit WooCommerce Templates. 

Read: How Do I Update My Debit Card On WooCommerce

Customizing WooCommerce Templates with PHP

Plugins and code snippets enable you to edit almost any aspect of your website. Using WooCommerce, you can edit templates programmatically.

The following are two ways to customize templates programmatically:

  • Overwriting Templates
  • With Hooks

Both methods will work, so pick which is easiest for you. You should understand the principle differences between these methods to determine when to use each.

Hooks vs Overwriting Templates

With hooks, simple modifications can be made using actions and filters. By overwriting template files, you can perform more complex customizations.

Additionally, note not to overwrite a template file with a hook if used in a specific template file. Overwriting the template will result in the hooks used in that file being replaced and no longer being effective.

Select the method that suits your needs after figuring out your needs.

Modifying WooCommerce templates by overwriting them

When making complex customizations, overwriting your templates is better than using hooks.

Similarly, editing functions.php is very similar. The main WooCommerce template files must be edited instead of the theme files.

Click Plugins > Plugin Editor, choose WooCommerce from the drop-down menu, and choose templates to see the template files.

This section contains all the main files you need to edit, namely archive-product.php, content-product-cat.php, and content-product.php. It is also possible to edit template files in multiple places, such as the cart, checkout, and email.

The WooCommerce template files have a lot of things you can change. This lets you customize both the subdirectories and folders.

The next step is to see customized WooCommerce templates.

Add shortcodes to WooCommerce templates.

Shortcodes are a common way to customize WooCommerce code. For editing templates, WordPress and WooCommerce give you a bunch of shortcodes.

Below is a script that displays the WooCommerce My Account dashboard on every product page. Add it to the single-product.php file and update it.

<?php
if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly
}
get_header( ‘shop’ );
while ( have_posts() ) :
the_post();
wc_get_template_part( ‘content,’ ‘single-product’ );
endwhile; // end of the loop.
do_action( ‘woocommerce_sidebar’ );
$t= ‘<div id=”myacc”><h4>My Account</h4>’;
$t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ );

The dashboard will appear after you preview the product pages.

Ensure the customer knows they bought this before

WooCommerce templates can also be modified to offer discounts to loyal customers. Here again, copy and paste the code onto the single-product.php page.

get_header( ‘shop’ );
while ( have_posts() ) :
the_post();
wc_get_template_part( ‘content’, ‘single-product’ );
endwhile; // end of the loop.
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo ‘<div class=”user-bought”>&hearts; Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’;
endif;
get_footer( ‘shop’ );

Customers will see the checkout message after viewing a product that they have already purchased.

Explore: Magento Vs. WooCommerce: What’s The Better Choice In 2023?

Editing WooCommerce templates using hooks

Hooks are also helpful in customizing WooCommerce templates if overwriting template files is not your thing. You can add hooks as actions or filters to your website to increase its functionality quickly and make simple changes.

Additionally, you can edit your store’s templates through WooCommerce hooks. This approach is only recommended for simple customizations. It’s better to overwrite templates for complex modifications.

Open your functions.php file in the Appearance > Theme Editor and copy and paste the code snippet with your action or filter hooks.

Here are some examples of hooks available for editing WooCommerce templates.

Adding information to a single product image

If you wish to display additional information about the product above the image, insert the following code in functions.php.

// Add custom function
function quadlayers_before_single_product() {
echo ‘<h2>Everything is 25% off for this week!</h2>’;
}
// Add the action
add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 );

On single product pages, this message will appear.

Customizing WooCommerce Template with Plugins

Struggling with coding aspects? Not a problem. You can still customize WooCommerce templates with plugins. As the industry grows, there comes endless plugins to customize your templates.

Here comes the most efficient plugin: Edit WooCommerce Templates. It is an easy-to-use free plugin that lets you customize your theme’s templates. With a few clicks, you can swap templates and restore defaults anytime.

Here are some of the additional WooCommerce plugin that allows you to customize templates and enhance the performance of your store.

Know: How To Setup WooCommerce Bookings?

Customizing WooCommerce Product Pages: Why is it Essential?

Customizing WooCommerce product pages is crucial, so you cannot miss out. The benefits and advantages of customizing WooCommerce product pages are endless. With this, it is possible to eliminate customer concerns, establish a distinctive presentation, and enhance customer satisfaction.

Here are some crucial benefits of putting customization to work on product pages:

Conversion-optimized pages

A customized product page can increase conversion rates. Many options can be implemented, including search and filtering options. Therefore, customers will find and purchase products more easily with fewer friction points.

Make it more appealing

The goal of customization is often to design and layout product pages that engage and appeal to customers. Customer interest can be sparked by appealing imagery, enticing product descriptions, and aesthetically pleasing elements.

UX could be enhanced

Make sure your design choices are clear and intuitive, loading speeds are fast, navigation is easy, and your customers will have a great experience. This will boost conversions and get you to repeat customers.

Know: Best WooCommerce Product Add-ons         

Ways to Customize Product Pages

To stay current with the visual appeal of your store, you need to customize your product pages. Here’s three crucial method to customize product pages successfully:

  1. Enhance WooCommerce Product Pages with Plugins

Using WooCommerce, you can easily create an online store. Various plugins are available to enhance your store, including those that customize product pages.

Customizing product pages with WooCommerce plugins is easy:

Plugins

Related: 40+ Best WooCommerce Plugins [Free+Paid]

  1. Customizing WooCommerce Product Pages with CSS

Using CSS to customize WooCommerce products can make your online store stand out and give customers a unique experience. To change your product pages, write the CSS code.

When you’re logged in, go to Appearance → Customize.

CSS Code for Black CTA

Adding this code to Additional CSS will change the default CTA color to black.

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;
}

CSS Code for Blue CTA

Furthermore, to convert black into blue, use the following CSS code.

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;
}
  1. Add custom code to WooCommerce product pages

If you are loaded up with technical understanding, you can conveniently implement product page customization via custom code.

Learn: Why FAQs Are Essential For Your WooCommerce Store?

Step 1: Establish a global template

To begin, it is necessary to establish a global template that will be used for all product pages.

Start with a PHP comment stating the template’s name at the top.

Make a template-custom-product.php file and put it in the activated theme.

<?php /*Template Name: Customize Product*/ ?>

This template uses the WooCommerce default product page. Here’s the 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; ?>

It’s a basic template. Though it does the trick, you can do more with WooCommerce.

WooCommerce offers several functions to customize your product display pages that include a broad range of information:

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

Display categories of WooCommerce products

The categories are where you categorize your products. Activate the theme and import this snippet into the functions.php file to indicate a product’s category.


<?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>

Display thumbnails of product categories

A thumbnail is available for every product category. When you are ready to set up your custom product display, add this code to the template.php or functions.php of your 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’);

Dispose of the description heading.

When using Woocommerce, simply uncheck the description field for every product tab, and edit the functions.php file to include the following code.

add_filter( ‘woocommerce_product_description_heading’, ‘__return_null’ );

Remove Product Title

Here’s how to eliminate the title in woocommerce single product tabs: put this code in functions.php.

remove_action( ‘woocommerce_single_product_summary’,
‘woocommerce_template_single_title’ );

Step 3: Changing WooCommerce Templates 

Put the code below in the content-single-product.php file or the single product directory under woocommerce/templates. You’re better off using functions.php.

<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>

Alternatively, you can simply write CSS code.

.images { float: right! important; }

Finally! You are done.

Know More: How To Add Shipping To WooCommerce?

Conclusion

Creating unique and visually appealing WooCommerce product pages and templates enhances the shopping experience for customers. 

Utilizing overrides, hooks, filters, and CSS customization will allow you to customize your product pages to address your customers’ expectations and align with your brand identity. 

Optimize your WooCommerce-powered online store’s mobile responsiveness and customize it to enhance the overall user experience. Start implementing customization practices and put your store to gain the best value. 

Looking for professional help in customizing WooCommerce? Contact us today!

Related Posts

Switching from Figma to WooCommerce can be a lucrative move for online stores. WooCommerce, a

Building a multi-vendor marketplace like Amazon, eBay, or Etsy can be a lucrative niche for

If you are an e-commerce entrepreneur new to running your freshly brewed online store, you

Komal Bothra July 22, 2024

How to Build a Successful White Label Partnership?

White label partnerships have emerged as a strategic way for companies to expand their product

Agency
Komal Bothra July 22, 2024

Fixing the ‘This Site is Experiencing Difficulties’ Error in WordPress

We've all been there. You're happily managing your WordPress site, posting content, checking stats, and

WordPress

Get started with Seahawk

Sign up in our app to view our pricing and get discounts.