How to Customize WooCommerce Product Pages

Customize WooCommerce Product PagesAre you looking for some ways to customize your product pages? The design and user experience of your product pages can impact your sales positively. These pages display your products in their best light, motivating shoppers to press the “Add to Cart” button.

A good product page should be informative and should have a clutter-free design. This page should also express your unique brand.

There are very many different ways to customize the shop page. You can use the built-in options, custom code snippets, and plugins.

Customize WooCommerce Product Pages

The two main pages where most customization occur in WooCommerce are the shop page and the products page. You need to customize them to boost your sales and optimize the beginning of the purchase process.

We recommend having a neat design the focuses on providing the best customer experience to improve conversion rates.

In this post, we will share some solutions to edit the product page programmatically.

First, let us look at the default product page layout.

WooCommerce Product Page Layout

This is how the product page is displayed:page layout

There are 2  main WooCommerce files responsible for the product page’s output.

  • single-product.php: It builds the required template for the current layout
  • content-single-product.php: This file prints the content in the template

You can overwrite the template files using a child theme. You can also use WooCommerce hooks instead of overwriting template files where possible. This is one of the best practices recommended by WordPress.

Let us see some practical examples of how you can customize the product page.

Edit the WooCommerce Product Page Using Hooks

In this section, we will use hooks to customize the product page.

1.    Remove Elements

There are several hooks to remove different elements on the products page. Hooks work with specific elements.

This means that you have to use the right hook, function, and priority value.

Here are some scripts to remove different elements and customize the product page. Copy and paste it to the functions.php file:

[php] // remove title

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );

// remove  rating  stars

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10 );

// remove product meta

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );

// remove  description

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );

// remove images

remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );

// remove related products

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

// remove additional information tabs

remove_action(‘woocommerce_after_single_product_summary ‘,’woocommerce_output_product_data_tabs’,10);

[/php]

2.Add New Elements

You can add new content to the product page by creating your own function. You should copy and paste it to the functions.php file:

[php]

add_action(‘woocommerce_after_single_product_summary’,’njengah_callback_function’);

function njengah_callback_function(){    
printf(‘    
<h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>’);
}

[/php]

This is the outcome:add element

3.    Edit Product Tabs

You can use the woocommerce_product_tabs filter hook to remove, add, reorder, or add a new tab in the Additional Information section.

Here is an example of a script that will remove the Description tab and its content, rename the Reviews tab, and change the priority of Additional information to the first place. You should copy and paste it to the functions.php file:

[php] add_filter( ‘woocommerce_product_tabs’, ‘njengah_remove_product_tabs’, 98 );

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs[‘description’] );           // Remove the Description tab

    $tabs[‘reviews’][‘title’] = __( ‘Ratings’ );     // Rename the Reviews tab

    $tabs[‘additional_information’][‘priority’] = 5;       // Additional information at first

    return $tabs;

}

[/php]

This is the outcome:edit product tabs

You can create a new tab by using the following code. You should copy and paste it to the functions.php file:

[php]

add_filter( ‘woocommerce_product_tabs’, ‘njengah_new_product_tab’ );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs[‘test_tab’] = array(

                        ‘title’    => __( ‘New Tab Here!’, ‘woocommerce’ ),

                        ‘priority’ => 50,

                        ‘callback’  => ‘njengah_new_product_tab_content’

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo ‘<h2>New Tab Here!</h2><p>Here\’s your new product tab content</p>.’;

}
[/php]

This is the outcome:new tab

Customize the Product Page Overriding WooCommerce Template Files

You can also edit the WooCommerce product page programmatically by overriding the template files.

However, it is important to note that this method is riskier than the previous one. Therefore, we recommend that you create a full backup of your site before proceeding.

This process is similar to overriding any other file in your child theme.

We recommend creating a child theme or a plugin to make the changes.

1.    Edit the Meta-information

In this section, we will edit the meta-information. This means that we have to the template file responsible to print the corresponding data. It is the meta.php file.

This file is located in the WooCommerce plugin follows this path: woocommerce/templates/single-product/meta.php.

The next step is to edit your child theme files directory and create a WooCommerce folder.

Create another folder inside it called single-product and paste the meta.php file: Child_theme/woocommerce/single-product/meta.php

This will allow you to edit the meta.php file and see your changes in the frontend.

The following meta.php sample file will:

  • Change the label of SKU to ID
  • Change the tags to Published under
  • Remove the category label
[php] 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( ‘ID:’, ‘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( ”, ”, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?>

            <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class="tagged_as">’ . _n( ‘Published under:’, ‘Published under:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?>

            <?php do_action( ‘woocommerce_product_meta_end’ ); ?>

</div>
[/php]

This is the outcome:change meta description

2.    Customize the Product Page with CSS Script

You can easily edit the WooCommerce product page programmatically is by using CSS code.

It will help you style the product page and give it the look and feel of your business.

The first thing you need to do is create a new file in your child theme with the .css extension so you can add your CSS scripts there. You can name it single-product.css.

Place the file in the child theme main folder at the same level as functions.php and style.css files.

Paste the following script in the functions.php file of your child theme and replace the name of your CSS file if necessary.

[php] add_action( ‘wp_enqueue_scripts’, ‘njengah_custom_product_style’ );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( ‘product_css’, get_stylesheet_directory_uri() . ‘/single-product.css’, false, ‘1.0.0’, ‘all’ );

wp_enqueue_style(‘product_css’);

}

}
[/php]

The if(is_product()) conditional will check if the current page is a product page. This prevents unnecessarily loading the CSS file when it’s not a product page.

By now, you should be able to edit the style of the product pages using custom CSS rules.

Conclusion

In this post, we’ve shared some of the ways you can customize your product page. However, before you make any changes, we recommend using a tool like Hotjar that provides you with data on how visitors interact with your page.

You can also check out what online retailers like Amazon and Walmart are doing. You can mimic their look and feel by including common features.

If you need any help customizing this page, please contact a qualified WordPress developer.

Similar Articles

  1. 100+ Tips, Tricks & Snippets Ultimate WooCommerce Hide Guide
  2. WooCommerce Hooks List » Global, Cart, Checkout, Product
  3. How to Set WooCommerce Storefront Thumbnail Sizes