You can modify the HTML output of any SureCart block using WordPress’s render_block filter combined with the HTML Tag Processor—a safe, performant way to manipulate HTML without regex or string replacement.
To target a specific block, you need its name. SureCart blocks use the surecart/ namespace (e.g., surecart/product-title). Here are ways to find a block’s name:
Inspect the block on the frontend. The wrapper element’s class follows the pattern wp-block-{namespace}-{block-name}. For example, wp-block-surecart-product-title means the block name is surecart/product-title.
In the block editor, switch to the Code Editor view (⇧⌘⌥M or via Options menu). Block names appear in HTML comments like <!-- wp:surecart/product-title -->.
Common SureCart blocks include surecart/product-title, surecart/product-price, surecart/buy-button, surecart/product-image, surecart/product-description, and surecart/product-collection.
The render_block filter runs after a block is rendered, giving you access to the final HTML output. You can target specific blocks by checking $block['blockName'].
Copy
add_filter( 'render_block', function( $block_content, $block ) { // Only modify SureCart product title blocks if ( 'surecart/product-title' !== $block['blockName'] ) { return $block_content; } // Modify the block content return $block_content;}, 10, 2 );
Append a warning badge next to the product title when stock is low. This uses SureCart’s built-in .sc-tag component classes for consistent styling.
Copy
add_filter( 'render_block_surecart/product-title', function( $block_content, $block, $instance ) { $product = sc_get_product(); // this product does not use stock. if ( empty( $product->stock_enabled ) ) { return $block_content; } // Check if stock is low (e.g., less than 5 remaining) if ( $product->available_stock >= 5 ) { return $block_content; } // Create the warning badge using SureCart's tag component classes $badge = sprintf( '<span class="sc-tag sc-tag--warning sc-tag--small sc-tag--pill">Only %d left!</span>', $product->available_stock ); // Append the badge after the title content return $block_content . $badge;}, 10, 3 );
SureCart’s .sc-tag component supports variants like --warning, --success, --danger, --info, and --primary, plus sizes --small, --medium, --large, and a --pill modifier for rounded corners.
The HTML Tag Processor is available in WordPress 6.2+. For older versions, consider using DOMDocument or carefully crafted string replacements.
The page data used to create the page including title, content, and template.
Copy
add_action( 'surecart/post_created', function( $page_id, $page_data ) { // Add custom meta to the page update_post_meta( $page_id, '_custom_template', 'full-width' ); // Set page to full-width if using a theme that supports it update_post_meta( $page_id, '_genesis_layout', 'full-width-content' );}, 10, 2 );