The way to Create Customized Product Web page in WooCommerce?

Hello buddies!, in our final weblog, we discovered how you can make a theme WooCommerce appropriate. Now we are going to learn to create a customized product web page in Woocommerce or override the product web page template in WooCommerce.

First, we have to clone the Woocommerce product web page template in our theme for this merely go to /wp-content/plugins/woocommerce/templates and duplicate these two information/listing.

1. single-product.php (file)
2. single-product (listing)

Then create a listing named woocommerce in our theme and paste it into this, Now product web page template will name from our theme.

#! inside theme listing
woocommerce
|__ single-product.php
|__ single-product
 |__ add-to-cart        // Add to cart button & Variables
 |__ tabs               // Product Element Tabs
 |__ meta.php
 |__ photoswipe.php 
 |__ worth.php
 |__ product-attributes.php
 |__ product-image.php 
 |__ product-thumbnail.php
 |__ ranking.php
 |__ associated.php 
 |__ review-meta.php
 |__ review-rating.php
 |__ overview.php 
 |__ sale-flash.php
 |__ short-description.php 
 |__ inventory.php
 |__ title.php
 |__ up-sells.php

1. single-product.php: This file has outline web page construction and woocommerce hook requires product element web page
2. single-product: This listing has retailer content material information for single product having title, quick description, worth, add to cart button, critiques & scores, gallery and so forth.
   • add-to-cart: This listing has shops Add to cart button for all variants like for easy product, variable product, grouped product, variations, and so forth.
   • tabs: This listing retailer tabs information like extra data, description and tabs label.
   • meta.php: this file print product tags, class and SKU.
   • photoswipe.php: This file present product picture slider when product has greater than 1 picture
   • worth.php: This file is use for present product worth.
   • product-attributes.php: This file reveals product attributes like coloration, dimension, and so forth.
   • product-image.php: This file present Product picture.
   • product-thumbnail.php: This file present thumbnail picture for product picture slider.
   • ranking.php: That is use for complete Product scores .
   • associated.php: It’s use for exhibiting associated product
   • review-meta.php: It’s use for overview meta like date, writer.
   • review-rating.php: It’s use for star scores.
   • overview.php: It’s use for present overview of the product.
   • sale-flash.php: It’s use for present Sale tag on product
   • short-description.php: This file present product quick description.
   • inventory.php: It’s exhibiting product availability.
   • title.php: Present Product title.
   • up-sells.php: It’s exhibiting upsell product.

For altering the positions of content material on the product web page we have to replace hooks precedence in our theme. We’re going to undergo product web page hooks

/**
 * Sale flashes.
 *
 * @see woocommerce_show_product_sale_flash()
 */
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

/**
 * Breadcrumbs.
 *
 * @see woocommerce_breadcrumb()
 */
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );


/**
 * Earlier than Single Merchandise Abstract Div.
 *
 * @see woocommerce_show_product_images()
 * @see woocommerce_show_product_thumbnails()
 */
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

/**
 * After Single Merchandise Abstract Div.
 *
 * @see woocommerce_output_product_data_tabs()
 * @see woocommerce_upsell_display()
 * @see woocommerce_output_related_products()
 */
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

/**
 * Product Abstract Field.
 *
 * @see woocommerce_template_single_title()
 * @see woocommerce_template_single_rating()
 * @see woocommerce_template_single_price()
 * @see woocommerce_template_single_excerpt()
 * @see woocommerce_template_single_meta()
 * @see woocommerce_template_single_sharing()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

/**
 * Evaluations
 *
 * @see woocommerce_review_display_gravatar()
 * @see woocommerce_review_display_rating()
 * @see woocommerce_review_display_meta()
 * @see woocommerce_review_display_comment_text()
 */
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );

/**
 * Product Add to cart.
 *
 * @see woocommerce_template_single_add_to_cart()
 * @see woocommerce_simple_add_to_cart()
 * @see woocommerce_grouped_add_to_cart()
 * @see woocommerce_variable_add_to_cart()
 * @see woocommerce_external_add_to_cart()
 * @see woocommerce_single_variation()
 * @see woocommerce_single_variation_add_to_cart_button()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

We are able to change the positions of components on the product element web page by altering the precedence in WooCommerce hooks. For this primary, we have to take away the motion after which add with new precedence.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 4 );

There we’re shifting star scores earlier than the product title so first we have to remove_action the star scores hook from the only product web page after which add it with a precedence lower than the title precedence.

You can even add your personal capabilities so as to add some completely different performance with default capabilities

That’s all for this dev weblog on how you can create a customized product web page WooCommerce. Thank You! !!Have a Nice Day Forward!!

WooCommerce Help

In the event you want customized WordPress or WooCommerce growth companies then be happy to attain us and in addition discover our unique vary of WooCommerce plugins.

Aakash Mittal
1 Badges

12 June 2023