Replace WooCommerce Single product short description with custom code

Question

In the code below, I inserted a php block "shop_content" within a WordPress hook. In the output, as it should, the inserted php block shows up before the woocommerce_single_product_summary hook. So, "shop_content" shows up before the h1 title. My goal is to get the title above the shop_content, essentially adding custom html into a WordPress hook. I'm wondering if there is a way I can rearrange this hook without resorting to jQuery to reorder the divs? I'm viewing this hook guide as reference.

        <div class="<?php echo esc_attr($ozark_product_summary_class) ?>">
            <div class="summary entry-summary gs-product-summary">
                <?php
                /**
                 * Product Title
                 */
                if (ozark_inherit_option('general_title', 'general_title_product', '1') == '2') {
                    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
                }?>

                <?php if ( is_active_sidebar( 'shop_content' ) ) : ?>
                    <div id="shop_description" class="shop-description widget-area" role="complementary">
                        <?php dynamic_sidebar( 'shop_content' ); ?>
                    </div>
                <?php endif; ?>

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

                // remove product short description 
                remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
                remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
                add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 6);

                do_action('woocommerce_single_product_summary');
                ?>
                <?php if (get_theme_mod('product_share', '2') == '1') : ?>
                    <?php get_template_part('templates/extra/share') ?>
                <?php endif; ?>
            </div>
        </div>

LoicTheAztec · Accepted Answer · 2023-08-26T17:09:52.080

You are making confusions… When making customizations:

First, try to use available hooks (what you are not doing).
Then, if you have no other choice, you can override WooCommerce templates.

Important: You can not use add_action() or remove_action() on the template itself.

With remove_action() and add_action() you can rearrange the output and also insert custom code, via your child theme functions.php file.

So try the following instead:

add_action( 'woocommerce_single_product_summary', 'custom_single_product_summary_start', 3 );
function custom_single_product_summary_start(){
    if ( ozark_inherit_option('general_title', 'general_title_product', '1') == '2' ) {
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    }
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 6);
    add_action( 'woocommerce_single_product_summary', 'custom_short_description', 20 );
    add_action( 'woocommerce_single_product_summary', 'custom_single_product_summary_end', 100 );
}
function custom_short_description(){
    if ( is_active_sidebar( 'shop_content' ) ) { ?>
        <div id="shop_description" class="shop-description widget-area" role="complementary">
            <?php dynamic_sidebar( 'shop_content' ); ?>
        </div>
    <?php  }
}

function custom_single_product_summary_end(){
    if (get_theme_mod('product_share', '2') == '1') {
        get_template_part('templates/extra/share');
    }
}

Code goes in function.php file of your child theme (or in a plugin).

Then your template code will be instead:

        <div class="<?php echo esc_attr($ozark_product_summary_class) ?>">
            <div class="summary entry-summary gs-product-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>
        </div>

Related: WooCommerce action hooks and overriding templates

I tried the code but I'm still getting the same output. The shop_description div gets placed above the product_title h1 div. — J82, Aug 26 '23 at 16:35
Sorry if my explanations weren't clear. By "shop_description", I was referring to the block of code I inserted into the hook. My goal is to basically remove the existing short description and replace it with my own shop_description div. — J82, Aug 26 '23 at 17:02
No, after the product title. Right below the title and price. — J82, Aug 26 '23 at 17:05
I hope that you learned something, related to hooks and template usage. Happy that it worked. — LoicTheAztec, Aug 26 '23 at 17:15
Sorry, just one question. Can you explain why you put "20" at the end of this line? `add_action( 'woocommerce_single_product_summary', 'custom_short_description', 20 );` — J82, Aug 26 '23 at 17:20
That is the priority… as you can see in the template for this hook, the title is in 5, rating in 10, excerpt in 20 … So we removed excerpt (20) replacing it with your custom block in 20. — LoicTheAztec, Aug 26 '23 at 17:23

Replace WooCommerce Single product short description with custom code

1 Answers1