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”>♥ 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.
- WooCommerce Custom Fields: With this plugin, users can create unique fields within WooCommerce product pages, checkout pages, and more.
- WooCommerce Customizer: Dedicated to WooCommerce templates, this plugin offers a variety of additional customization options for your store.
- WooCommerce Single Product Page Customizer: This plugin allows you to modify the appearance of the single product page within WooCommerce.
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:
- 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
- WooCommerce Product Add-ons: Using this plugin, you can add checkboxes, drop-downs, and text boxes to your product pages.
- WooCommerce 360º Image: Using this plugin, you can rotate images to your liking.
- Product Video for WooCommerce: The plugin allows adding product videos.
- Size Chart for WooCommerce: This plugin makes adding size charts to your products easy.
- Product Recommendations: This pluginlets you add a recommendation section to your product page.
Related: 40+ Best WooCommerce Plugins [Free+Paid]
- 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; } |
- 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!
