Custom WooCommerce Hooks in the Astra Theme

Please note some of the links in this post are affiliate links. This means if you click on the link and purchase the item, I will receive a small commission at no extra cost to you.

Core WooCommerce Hooks

If you’re a WooCommerce developer you’ll be very familiar with the various hooks you can use to inject additional data into the WooCommerce shop or product pages.

This is one of those hooks, which adds data to the shop page after the product title on each of the products:

add_action('woocommerce_after_shop_loop_item_title' , 'clario_product_feature_shop_front');

function clario_product_feature_shop_front(){
  echo '<div class="shop-page-custom-product-meta">some custom info</div>';
}

I have put this code in a custom plugin because, later, I am going to make it so that I can switch between themes and use different hooks depending on whether the Astra theme is activated. If I do this in a child theme, that code won’t be accessible when I switch to a new theme.

On the front end on the shop page, this message is showing up on all the products below the product title:

Hooks in the Astra Theme

If you’re using the Astra theme though, you might find the data comes up in funny places. If I activate the Astra theme on my site but keep the above hook in place, the message now comes out below the thumbnail inside the thumbnail’s wrapper div:

That’s because Astra employs its own custom hooks to get that data in place. To make this data come out in the right place on the Astra theme, I need to use a different hook – I can swap the WooCommerce hook call:

add_action('woocommerce_after_shop_loop_item_title' , 'clario_product_feature_shop_front');

For the equivalent Astra one:

add_action('astra_woo_shop_title_after' , 'clario_product_feature_shop_front');

Here I’ve just changed the hook name in the call to add_action, but I’m calling my same clario_product_feature_shop_front function. Now the text is coming up in the right place on the Astra theme:

There’s a whole list of Astra’s custom WooCommerce hooks located here which you can go through and find the ones you need.

Conditionally using the custom Astra hook when the Astra theme is activated

What if you want to be able to switch between Astra and other themes and preserve the position of your custom text? You can call the WooCommerce or the Astra hook conditionally depending on which theme is active.

If you call the wp_get_theme() you can find out which theme is active (this will output the theme name which you could also easily get by going to the Dashboard > Appearance > Themes page in the WordPress admin):

On the Astra theme, this function will output ‘Astra’, so I’ll use that in a conditional:

if (wp_get_theme() == 'Astra') {
  add_action('astra_woo_shop_title_after' , 'clario_product_feature_shop_front'); // use Astra custom hook
} else {
  add_action('woocommerce_after_shop_loop_item_title' , 'clario_product_feature_shop_front'); // use WooCommerce core hook
}

function clario_product_feature_shop_front(){
  echo '<div class="shop-page-custom-product-meta">some custom info</div>';
}

Now I can switch freely between themes and the right hook will be used for each theme.

The featured image for this post is from Scott Webb on Unsplash.