WooCommerce hooks for customization in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom message after the product title using a WooCommerce hook.

Wordpress

<?php
add_action('[1]', 'custom_message_after_title');
function custom_message_after_title() {
    echo '<p>Thank you for checking this product!</p>';
}
?>

Drag options to blanks, or click blank then click option'

Awoocommerce_before_shop_loop_item_title

Bwoocommerce_single_product_summary

Cwoocommerce_after_shop_loop_item_title

Dwoocommerce_before_main_content

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hook that runs before the title instead of after.

Choosing a hook that runs on the single product page instead of the product list.

The hook woocommerce_after_shop_loop_item_title runs right after the product title in the product list, perfect for adding a message there.

2fill in blank

medium

Complete the code to change the number of products displayed per page using a WooCommerce filter.

Wordpress

<?php
add_filter('[1]', 'custom_products_per_page');
function custom_products_per_page($cols) {
    return 12;
}
?>

Drag options to blanks, or click blank then click option'

Aloop_shop_per_page

Bwoocommerce_product_query

Cwoocommerce_loop_shop_columns

Dwoocommerce_products_per_page

Attempts:

3 left

💡 Hint

Common Mistakes

Using a filter that changes columns instead of products per page.

Trying to use an action hook instead of a filter.

The filter loop_shop_per_page lets you set how many products show on shop pages.

3fill in blank

hard

Fix the error in the code to correctly remove the default WooCommerce breadcrumb.

Wordpress

<?php
remove_action('woocommerce_before_main_content', [1], 20);
?>

Drag options to blanks, or click blank then click option'

A'woocommerce_breadcrumb'

B'woocommerce_breadcrumbs'

C'woocommerce_default_breadcrumb'

D'woocommerce_breadcrumb_function'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plural form like 'woocommerce_breadcrumbs' which does not exist.

Adding quotes incorrectly or missing them.

The correct function to remove is woocommerce_breadcrumb, which is hooked to woocommerce_before_main_content at priority 20.

4fill in blank

hard

Fill both blanks to add a custom text before the add to cart button on single product pages.

Wordpress

<?php
add_action('[1]', '[2]');
function custom_text_before_add_to_cart() {
    echo '<p><strong>Special offer:</strong> Free shipping today!</p>';
}
?>

Drag options to blanks, or click blank then click option'

Awoocommerce_before_add_to_cart_button

Bwoocommerce_after_add_to_cart_button

Ccustom_text_before_add_to_cart

Dcustom_text_after_add_to_cart

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong hook that runs after the button.

Mismatching the function name in add_action and the function definition.

The hook woocommerce_before_add_to_cart_button runs before the add to cart button. The function name must match the callback added.

5fill in blank

hard

Fill all three blanks to create a filter that changes the 'Add to cart' button text on product archives.

Wordpress

<?php
add_filter('[1]', '[2]');
function [3]($text) {
    return 'Buy Now';
}
?>

Drag options to blanks, or click blank then click option'

Awoocommerce_product_add_to_cart_text

Bcustom_add_to_cart_text

Dwoocommerce_add_to_cart_text

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent filter name.

Mismatching function names between add_filter and function definition.

The filter woocommerce_product_add_to_cart_text changes the button text. The function name must match the callback added.