Using the debug mode to inspect any missing hooks in WooCommerce product pages

Modified on Fri, 10 Jan 2020 at 11:12 PM

If any of the required hooks or filters are missing in your theme, first try to fix it yourself with the information in this documentation. If you still have problems, please contact the theme author, because its a theme-related issue. We will not fix any issue regarding a missing action or filter hook in your theme.


Debug Mode 

The plugin comes with a helpful debugger to inspect any theme-related issues with the plugin.

  • Go to the General settings of Fancy Product Designer, scroll down to “Debug Mode” and enable it.
  • After that go to a product page with “Fancy Product Designer” enabled.
  • A modal window comes up with information about missing hooks and filters in your theme. This modal window will only come up if you are logged in as administrator and on a product page with “Fancy Product Designer” enabled and on the cart page.


Debug Mode in General settings

debug_mode.png

Theme Check Modal


Solving Missing Hooks

Missing hook: woocommerce_before_single_product_summary

The content-single-product.php in the woocommerce templates of your theme does not include the required:

do_action( 'woocommerce_before_single_product_summary' );

Check out the standard template in plugins/woocommerce/templates/content-single-product.php, to see how it looks properly.

 

<?php
        /**
         * woocommerce_before_single_product_summary hook
         *
         * @hooked woocommerce_show_product_sale_flash - 10
         * @hooked woocommerce_show_product_images - 20
         */
        do_action( 'woocommerce_before_single_product_summary' );
?>

 

Missing hook: woocommerce_single_product_summary

The content-single-product.php in the woocommerce templates of your theme does not include the required:

do_action( 'woocommerce_single_product_summary' );

Check out the standard template in plugins/woocommerce/templates/content-single-product.php, to see how it is supposed to look.

 

<div class="summary entry-summary">

    <?php
        /**
         * woocommerce_single_product_summary hook
         *
         * @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
         */
        do_action( 'woocommerce_single_product_summary' );
    ?>

</div><!-- .summary -->

 

Missing hook: woocommerce_before_add_to_cart_button

The add-to-cart templates does not include the required :

do_action( 'woocommerce_before_add_to_cart_button' );

Check out the standard templates in "plugins/woocommerce/templates/single-product/add-to-cart/", to see how it is supposed to look.

 

<td class="product-thumbnail">
    <?php
        $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

        if ( ! $_product->is_visible() )
            echo $thumbnail;
        else
            printf( '<a href="%s">%s</a>', $_product->get_permalink(), $thumbnail );
    ?>
</td>

 

Missing hook: body_class

If you are seeing this information instead of the Product Designer:

Sorry! But the product designer is not adapted for your device. Please use a device with a larger screen!


It means an important hook is missing in your theme. You need to add following code to the body HTML tag in the header.php your theme.

<body <?php body_class(); ?>>