Astra Themes WooCommerce Hooks Practical Guide: Building Flexible Ecommerce Pages

in using Astra Theme Development WooCommerce Store when the hook (Hooks) is a powerful means to enable feature extensions, interface optimization, and front-end behavioral adjustments. This article summarizes commonly used hooks in Astra and WooCommerce for developers looking to enhance the performance of their websites. All code is recommended to be placed in the functions.php Documentation.

How to create eCommerce website in WordPress using Astra Theme & WooCommerce plugin?

Basic Hooks: Optimizing Ecommerce Components

Modify the sidebar title tag to <h4>

Change the sidebar widget title label to <h4>, which helps to improve the clarity of the page structure and facilitates SEOThe

Store page use:

add_filter( 'astra_woocommerce_shop_sidebar_init', 'widget_title_tag', 10, 1 );
function widget_title_tag( $atts ) {
    $atts['before_title'] = '<h4 class="widget-title">';
    $atts['after_title'] = '</h4>';
    return $atts;
}

Product page use:

add_filter( 'astra_woocommerce_single_sidebar_init', 'widget_title_tag', 10, 1 );

recessed (lighting)cartQuantity Display

When the cart is empty, display the quantity as blank.

add_filter('astra_woo_header_cart_total', 'remove_cart_count');
function remove_cart_count( $default ) {
    return WC()->cart->get_cart_contents_count() == 0 ? false : $default ;
}
Image [2]-Astra Theme WooCommerce Hook Usage Book: Front-end Functionality and Structural Flexible Controls

Modify shopping cart display text and style

Change the mobile shopping cart text:

add_filter( 'astra_header_cart_flyout_shopping_cart_text', function() {
    return 'My Shopping Cart';
}).
Image [3]-Astra Theme WooCommerce Hooks Usage Book: Front-End Functionality and Structural Flexibility Controls

Disable cart quantity display:

add_filter( 'astra_header_cart_count', '__return_false' );

Customize the cart title:

add_filter( 'astra_header_cart_title', function() {
    return 'Customized title';
});
Image [4]-Astra Theme WooCommerce Hook Usage Book: Front-end Functionality and Structural Flexible Controls

Adds a shopping cart style class name:

add_filter( 'astra_cart_in_menu_class', function( $args ){
    return array_merge($args, ['custom-class-1', 'custom-class-2']);
});

Disable the default shopping cart icon:

add_filter( 'astra_woo_default_header_cart_icon', '__return_false' );
Image [5]-Astra Theme WooCommerce Hooks Usage Book: Flexible Control of Front-End Functionality and Structure

WooCommerce Page Hooks

Disabling Astra's WooCommerce Integration

For recovery WooCommerce Native page structure.

add_filter( 'astra_enable_woocommerce_integration', '__return_false' );

Hide store page parent category

add_filter( 'astra_woo_shop_parent_category', '__return_false' );
Image [6]-Astra Theme WooCommerce Hooks Usage Book: Front-end Functionality and Structural Flexibility Controls

Replacement"unavailable goods"Cue Text

add_filter( 'astra_woo_shop_out_of_stock_string', function() {
    return 'Not in stock at this time';
}).

Astra Pro Plug-in Hooks (needs to be installed)

Customize the "No more products" message.

add_filter( 'astra_shop_no_more_product_text', function() {
    return 'There are no more products available';
});

Replace the address of the jump page after adding to the shopping cart

add_filter( 'astra_woocommerce_add_to_cart_redirect', function() {
    return 'https://yourdomain.com/custom-cart/';
});

Replacing the text of the "Load More" button

add_filter( 'astra_load_more_text', function() {
    return 'View More';
});

Front-end behavioral hooks

Merchandise links open in a new tab

remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item', function() {
    echo '<a target="_blank" href="/en/' . get_the_permalink() . '/" class="woocommerce-LoopProduct-link">';
}, 10 );

Show stock quantity above the add to cart button

add_action( 'astra_woo_shop_add_to_cart_before', function() {
    global $product; echo wc_get_stock_html( $product ); }
    echo wc_get_stock_html( $product );
}).
Image [7]-Astra Theme WooCommerce Hooks Usage Book: Front-end Functionality and Structural Flexibility Controls

Page Content Extension

Add customized content to store pages

Add before summary:

add_action( 'astra_woo_shop_before_summary_wrap', function() {
    echo '<div>Pre-summary content</div>';
});
Image [8]-Astra Theme WooCommerce Hook Usage Book: Front-end Functionality and Structural Flexible Controls

Added after summary:

add_action( 'astra_woo_shop_after_summary_wrap', function() {
    echo '<div>post-summary content</div>';
});
Image [9]-Astra Theme WooCommerce Hook Usage Book: Front-end Functionality and Structural Flexible Controls

Add a "Continue Shopping" button to the shopping cart and checkout page.

add_action( 'woocommerce_after_cart_table', function() {
    $url = get_permalink( wc_get_page_id( 'shop' ) );
    echo '<div><a href="/en/'.$url.'/" class="button">Keep shopping.</a></div>';
});
add_action( 'woocommerce_before_checkout_form', function() {
    $url = get_permalink( wc_get_page_id( 'shop' ) );; add_action( 'woocommerce_before_checkout_form', function(); echo '
    echo '<div class="woocommerce-message"><a href="/en/'.$url.'/" class="button">Keep shopping.</a> Want to see other items?</div>';
});
Image [10]-Astra Theme WooCommerce Hooks Usage Book: Front-end Functionality and Structural Flexibility Controls

Product Field Display Extension

Show SKUs in the product list

add_action( 'woocommerce_after_shop_loop_item_title', function() {
    global $product.
    echo "<p style='color:#444;'>SKU: " . $product-&gt;get_sku() . "</p>";
}, 20 );

Add fields before and after the store page title

add_action( 'astra_woo_shop_title_before', function() {
    echo '<div>Pre-title field</div>';
});
add_action( 'astra_woo_shop_title_after', function() {
    echo '<div>Post-title field</div>';
});

Add fields before and after the title of the product detail page

add_action( 'astra_woo_single_title_before', function() {
    echo '<div>Pre-title field</div>';
});
add_action( 'astra_woo_single_title_after', function() {
    echo '<div>Product title followed by a field</div>';
});

summarize

Through the rational use of Astra Hooks provided for easy adjustment WooCommerce Store display content and functional structure. These hooks cover page style, button text, behavioral control, field display and other aspects , developers can be used in combination as needed to create an efficient mall page that fits the needs of the project. Code is recommended to be maintained in the child theme , easy to manage and upgrade.

Latest Articles


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
If you like it, support it.
kudos122 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments