How to add Extra/Payment Information to Your WooCommerce Product Pages

The Kadence Theme includes the ability to add additional information to your WooCommerce product pages. In this document, we’ll discuss adding Extras and Payments.

Introduction

You may have noticed sections displaying the text “Free shipping on orders over $50!” and/or “Guaranteed Safe Checkout” like the ones highlighted in the screenshot below. These are called Kadence Extras and Kadence Payments respectively in the Kadence Theme settings. You can quickly and easily add these to your site and customize them to meet your needs. Let’s see how!

Kadence Extras

Kadence Payments

Advanced Woo Template Information

Kadence Shop Kit allows you to create custom Woo Templates for your shop. When creating a Single Product Template, the Customizer Product Elements, including Extras and Pricing, are not available for use.

To include these elements in your custom single product template, a PHP code snippet can be used to create blocks to display these items. Please see how to include custom PHP snippets if you’re not familiar with adding custom snippets to your site.

These blocks are very basic and will only render a placeholder on the back-end. On the front-end, the blocks will render properly and the styling is already included in the single product stylesheet. If you were to use these blocks on anything other than a WooCommerce single product page, you would need to add your own custom CSS to style them.

Kadence Woo Extras Block

/**
 * Snippet Name: Kadence Woo Extras Block
 * Description: A simple block that outputs Kadence Woo Extras
 * Version: 1.0
 * Author: Kadence Support
 */

add_action( 'init', function() {
	// Register the block
	register_block_type( 'kadence/woo-extras', array(
		'render_callback' => function() {
			ob_start();
			$kad_woo = new \Kadence\Woocommerce\Component;
			$kad_woo->woocommerce_product_single_extras();
			$output = ob_get_clean();
			return $output;
		},
		'attributes' => array(),
		'editor_script' => 'kad-woo-extras-editor',
	) );

    // Register inline editor script so it shows placeholder in the editor
    wp_register_script(
        'kad-woo-extras-editor',
        '', // no external file, inline JS instead
        array( 'wp-blocks', 'wp-element' ),
        false,
        true
    );

    wp_add_inline_script(
        'kad-woo-extras-editor',
        "wp.blocks.registerBlockType('kadence/woo-extras', {
            title: 'Kadence Woo Extras',
            icon: {
				src: 'block-default',
				foreground: '#0058b0',
			},
            category: 'kadence-blocks',
            edit: function() { return wp.element.createElement('div', null, 'Kadence Woo Extras Placeholder'); },
            save: function() { return null; }
        });"
    );
}, 99 );

Kadence Woo Payments Block

/**
 * Snippet Name: Kadence Woo Payments Block
 * Description: A simple block that outputs Kadence Woo Payments info
 * Version: 1.0
 * Author: Kadence Support
 */

add_action( 'init', function() {
    // Register the block
    register_block_type( 'kadence/woo-payments', array(
        'render_callback' => function() {
			ob_start();
			$kad_woo = new \Kadence\Woocommerce\Component;
			$kad_woo->woocommerce_product_single_payments();
			$output = ob_get_clean();
			return $output;
        },
        'attributes' => array(),
        'editor_script' => 'kad-woo-payments-editor',
    ) );

    // Register inline editor script so it shows "Thanks!" in the editor
    wp_register_script(
        'kad-woo-payments-editor',
        '', // no external file, inline JS instead
        array( 'wp-blocks', 'wp-element' ),
        false,
        true
    );

    wp_add_inline_script(
        'kad-woo-payments-editor',
        "wp.blocks.registerBlockType('kadence/woo-payments', {
            title: 'Kadence Woo Payments',
            icon: {
				src: 'block-default',
				foreground: '#0058b0',
			},
            category: 'kadence-blocks',
            edit: function() { return wp.element.createElement('div', null, 'Kadence Woo Payments Placeholder'); },
            save: function() { return null; }
        });"
    );
}, 99 );

Using Your Custom Kadence Blocks

To use either or both of these blocks in your Shop Kit Woo Template, simply open the template editor and locate and insert the Kadence Woo Extras and/or Kadence Woo Payments blocks.

Shortcode Method

If you prefer to use shortcodes instead of blocks, you can add the following snippet and simply add the shortcode [woo-product-extras] and/or [woo-product-payments] to your template.

add_shortcode( 'woo-product-extras', 'custom_woo_product_extras_shortcode');
function custom_woo_product_extras_shortcode(){
	ob_start();
	$kad_woo = new \Kadence\Woocommerce\Component;
	$kad_woo->woocommerce_product_single_extras();
	$output = ob_get_clean();
	return $output;
}

add_shortcode( 'woo-product-payments', 'custom_woo_product_payments_shortcode');
function custom_woo_product_payments_shortcode(){
	ob_start();
	$kad_woo = new \Kadence\Woocommerce\Component;
	$kad_woo->woocommerce_product_single_payments();
	$output = ob_get_clean();
	return $output;
}