Your cart is currently empty!
Sub Heading On Single & Shop Page Archives In WooCommerce
โ
by
This code adds a custom field to your single product edit screens enabling you to add custom content like a sub heading on:
- Shop page archives like your shop and product category & tag archive pages
- Single product pages
All you need to do is edit your single product page and enter a sub heading in your new custom field named Sub Heading.
Copy and paste the following PHP code to the end of your child themes functions.php file or code snippets plugin.
add_action('woocommerce_product_options_general_product_data', 'custom_woocommerce_product_fields');
function custom_woocommerce_product_fields() {
woocommerce_wp_text_input([
'id' => '_custom_field',
'label' => __('Sub Heading', 'woocommerce'),
'desc_tip' => 'true',
'description' => __('Enter the value for your Sub Heading.', 'woocommerce'),
]);
}
add_action('woocommerce_process_product_meta', 'save_custom_woocommerce_product_fields');
function save_custom_woocommerce_product_fields($post_id) {
$custom_field_value = isset($_POST['_custom_field']) ? sanitize_text_field($_POST['_custom_field']) : '';
update_post_meta($post_id, '_custom_field', $custom_field_value);
}
add_action('woocommerce_single_product_summary', 'display_custom_field_single_product', 25);
function display_custom_field_single_product() {
global $product;
$custom_field_value = get_post_meta($product->get_id(), '_custom_field', true);
if ($custom_field_value) {
echo '<p class="sub-heading">' . esc_html($custom_field_value) . '</p>';
}
}
add_action('woocommerce_after_shop_loop_item_title', 'display_custom_field_archive_page', 15);
function display_custom_field_archive_page() {
global $product;
$custom_field_value = get_post_meta($product->get_id(), '_custom_field', true);
if ($custom_field_value) {
echo '<p class="sub-heading">' . esc_html($custom_field_value) . '</p>';
}
}
Center Sub Heading On Archive Pages
Use this CSS to center your fields content on shop page archives.
.archive .sub-heading {
text-align: center;
}
You can modify or extend this code to do anything you like.
Need More Coding Help?
Book a Consultation
Free
$0
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Monthly
$75
Access to 10 premium tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Yearly
$500
Access to 15 premium tutorials per month.
Monthly Tutorial Request
Includes code guarantee and priority coding support.
Was This Tutorial Helpful?