如何将自定义按钮添加到 WooCommerce 产品档案
How to add custom button to WooCommerce product archives
我想在产品存档中添加自定义按钮 ("SEE ALL")。我已经在单个产品页面上显示了这个自定义按钮。
我想要的是将其从单个产品页面中删除并将其添加到 WooCommerce 产品档案中。
已编辑:
此代码还有另一个问题。当我从后端删除 link 并将该字段清空,然后单击更新按钮时。 link 保留在那里。意味着如果我用另一个替换 link 它工作正常但是一旦填充了一些东西该字段就不会变空。如果我用空字段保存产品,页面加载后之前的值仍然存在。
相关代码如下:
// 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').'">SEE ALL</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');
要在循环存档而不是单个产品页面上使用此自定义按钮,只需在您的代码中替换以下行:
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 );
以下代码行:
add_action( 'woocommerce_after_shop_loop_item', 'wpse_add_custom_link_output', 20 );
应该可以。
要在循环存档而不是单个产品页面上使用此自定义按钮,只需在您的代码中替换以下行:
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 );
以下代码行:
add_action( 'woocommerce_after_shop_loop_item_title', 'wpse_add_custom_link_output', 20 );
它正在工作。我测试了
我想在产品存档中添加自定义按钮 ("SEE ALL")。我已经在单个产品页面上显示了这个自定义按钮。
我想要的是将其从单个产品页面中删除并将其添加到 WooCommerce 产品档案中。
已编辑: 此代码还有另一个问题。当我从后端删除 link 并将该字段清空,然后单击更新按钮时。 link 保留在那里。意味着如果我用另一个替换 link 它工作正常但是一旦填充了一些东西该字段就不会变空。如果我用空字段保存产品,页面加载后之前的值仍然存在。
相关代码如下:
// 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').'">SEE ALL</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');
要在循环存档而不是单个产品页面上使用此自定义按钮,只需在您的代码中替换以下行:
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 );
以下代码行:
add_action( 'woocommerce_after_shop_loop_item', 'wpse_add_custom_link_output', 20 );
应该可以。
要在循环存档而不是单个产品页面上使用此自定义按钮,只需在您的代码中替换以下行:
add_action( 'woocommerce_after_add_to_cart_button', 'wpse_add_custom_link_output', 10, 0 );
以下代码行:
add_action( 'woocommerce_after_shop_loop_item_title', 'wpse_add_custom_link_output', 20 );
它正在工作。我测试了