在“添加到购物车”按钮后添加个性化内容？电子商务

Question

Woocommerce：如何在单个产品页面中添加以下添加到购物车中的html代码？我想为每个产品添加不同的代码！

我在metabox上使用了类似的字体，但是在“添加到购物车”之后找不到适应它的方法

---

---- 1.后端----

///向管理产品页面添加自定义Meta容器

add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
    function create_custom_meta_box()
    {
        add_meta_box(
            'custom_product_meta_box',
            __( 'Additional Product text <em>(optional)</em>', 'woocommerce' ),
            'add_custom_product_content_meta_box',
            'product',
            'normal',
            'default'
        );
    }
}

//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_product_content_meta_box' ) ){
    function add_custom_product_content_meta_box( $post ){
        $text_area = get_post_meta($post->ID, '_custom_text', true) ? get_post_meta($post->ID, '_custom_text', true) : '';
        $args['textarea_rows'] = 6;

        echo '<p>'.__( 'Custom text label', 'woocommerce' ).'</p>';

        wp_editor( $text_area, 'custom_text', $args );

        echo '<input type="hidden" name="custom_text_field_nonce" value="' . wp_create_nonce() . '">';
    }
}

//保存“元”字段的数据

add_action( 'save_post', 'save_custom_product_content_meta_box', 20, 3 );
if ( ! function_exists( 'save_custom_product_content_meta_box' ) ){
    function save_custom_product_content_meta_box( $post_id, $post, $update  ) {

        if ( $post->post_type != 'product') return; // Only products

        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_text_field_nonce' ] ) )
            return $post_id;

        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $_POST[ 'custom_text_field_nonce' ] ) )
            return $post_id;

        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
            return $post_id;

        // Check the user's permissions.
        if ( ! current_user_can( 'edit_product', $post_id ) )
            return $post_id;

        // Sanitize user input and update the meta field in the database.
        if ( isset( $_POST[ 'custom_text' ] ) )
            update_post_meta( $post_id, $prefix.'_custom_text', wp_kses_post($_POST[ 'custom_text' ]) );
    }
}

---- 2.前端----

// Add custom text under single product meta
add_action( 'woocommerce_single_product_summary', 'add_custom_product_text', 70 );
function add_custom_product_text() {
    global $product;

    $custom_text = get_post_meta( $product->get_id(), '_custom_text', true );

    if( empty($custom_text) ) return;

    echo '<div class="product-extra-text" style="margin-top:30px;">';

    echo '<h3>' . __( 'Product extras', 'woocommerce' ) . '</h3>';

    // Updated to apply the_content filter to WYSIWYG content
    echo apply_filters( 'the_content', $custom_text );

    echo '</div>';
}

---

我把代码分成几部分，但结合了主题的功能。

后端图片： enter image description here

Answer 1

在主题的function.php中添加代码， add_action（'woocommerce_after_add_to_cart_button'，'show_custom_text'）;

function show_custom_text（）{ 在此函数内调用自定义文本 }