添加到购物车后,为每个产品添加一个带有自定义链接的自定义按钮

时间:2019-12-21 作者:Gabriel

假设我需要添加一个自定义按钮,以便访问者可以访问产品的外部站点。这样他们就可以访问产品的网站。

我想实现的目标如下:

在“添加到购物车”按钮后添加自定义按钮

1 个回复
最合适的回答,由SO网友:user3135691 整理而成

欢迎使用WPSE。

您可以使用WordPress WooCommerce挂钩来实现这一点。就像WoodPress本身一样,WooCommerce也允许您使用挂钩和过滤器来定制您的店铺。您需要向函数中添加以下代码。当前主题的php。

这段代码在WooCommerce添加到购物车按钮后添加了一个简单的链接。

// This function gets the value for the the custom fields from the database and adds it to the frontend output function
function wpse_add_custom_link_output() {
    $external_link = get_post_meta(get_the_ID(), \'_custom_product_text_field\', true);
    $html = \'<a href="\'.$external_link.\'" class="custom-button-class" target="_blank" title="\'.__(\'External product link\',\'woocommerce\').\'">\'.$external_link.\'</a>\';
    echo $html;
};
add_action( \'woocommerce_after_add_to_cart_button\', \'wpse_add_custom_link_output\', 10, 0 ); 
// This function creates the field in the backend
function wpse_add_custom_link_field(){
    global $woocommerce, $post;
    echo \'<div class="product_custom_field">\';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            \'id\' => \'_custom_product_text_field\',
            \'placeholder\' => __(\'Paste product link here\', \'woocommerce\'),
            \'label\' => __(\'Custom product link\', \'woocommerce\'),
            \'desc_tip\' => \'true\'
        )
    );
    echo \'</div>\';
}
add_action(\'woocommerce_product_options_general_product_data\', \'wpse_add_custom_link_field\');
// this function saves the link/text field
function wpse_save_custom_link_field($post_id){
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST[\'_custom_product_text_field\'];
    if (!empty($woocommerce_custom_product_text_field))
    update_post_meta($post_id, \'_custom_product_text_field\', 
    esc_attr($woocommerce_custom_product_text_field));
}
add_action(\'woocommerce_process_product_meta\', \'wpse_save_custom_link_field\');
您可能需要添加一些css,如:

a.custom-button-class:link,
a.custom-button-class:visited {
    display: block;
    margin-top: 30px;
}
a.custom-button-class:hover,
a.custom-button-class:focus {
    /* some hover style */
}
如果对你有用,请接受正确的答案。我已经用主题2020测试了这段代码。

相关推荐