I need to edit the order of elements on the product page in WooCommerce. What I’ve done in the past is copy over the single-product.php from WooCommerce templates folder into my theme into a woocommerce folder. Then I would edit the crap out of it.
The correct way to do this is to look in the content-single-product.php located inside templates folder in Woocommerce plugin and see what order those elements are set to.
content-single-product.php
<div class=”summary entry-summary”>
<?php
/**
* Hook: Woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
* @hooked WC_Structured_Data::generate_product_data() – 60
*/
do_action( ‘woocommerce_single_product_summary’ );
?>
</div>
As you can see, woocommerce_template_single_title is set to 5, woocommerce_template_single_rating is set to 10 and so on.
Your mission is to remove that element and add it back in with the correct order inside your functions.php file.
functions.php
<?php
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 9 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 12 );
?>
This reorders the elements and puts them where you need them so then you can CSS to your heart’s content.
Adding Custom Content Into The Summary Section
To add custom content you just need to create a woocommerce folder in the root directory of your theme and inside create another folder named single-product. Here, copy the code below and paste it into a new file (name it whatever you want, for this tutorial we’ll call it mynewelement.php).
mynewelement.php
<?php
/**
* My New Element
*/
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>
Now edit this file to contain the code for whatever you need. Here is what I did. I needed to separate the SKU from Categories into separate files. So I created 2 files, categories.php and sku.php.
categories.php
<?php
/**
* Product Meta Categories
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
global $product; ?>
<div class=”product_metacats”>
<?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>’ ); ?>
</div>
sku.php
<?php
/**
* Product Meta SKU
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
global $product; ?>
<div class=”product_sku”>
<?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; ?>
</div>
Now you need to add these new elements to the product summary section. To do this, we go back to functions.php and add functions to include these new files and then we will pull them into the summary section and give them an order number.
functions.php
<?php
function woocommerce_template_single_meta_categories() {
wc_get_template( ‘single-product/categories.php’ );
}
function woocommerce_template_single_meta_sku() {
wc_get_template( ‘single-product/sku.php’ );
}
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta_categories’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta_sku’, 11 );
?>
That’s it. Now we just CSS it and bam, it’s done.
Don’t forget to save. haha