Jak dodać niestandardowy Meta Box do produktu WooCommerce?
Opublikowany: 2021-07-23
Czy chcesz dodać niestandardowe pole meta, aby dodać dodatkowe informacje na stronie pojedynczego produktu? Następnie trzymaj się końca, ponieważ ten post ma na celu dostarczenie niestandardowego fragmentu kodu, który stworzyliśmy specjalnie w celu rozwiązania tego problemu. Oczywiście oznacza to, że aby wdrożyć to rozwiązanie, musisz mieć pewne doświadczenie w kodowaniu.
WooCommerce został stworzony dla wszystkich rodzajów witryn eCommerce. Zaspokaja jednak tylko podstawowe potrzeby sklepu internetowego. Oznacza to, że jeśli Twoje produkty są specyficzne, może być konieczne dodanie dodatkowych informacji o produkcie, aby pomóc klientom w podjęciu świadomej decyzji.
Jednym ze sposobów na zrobienie tego jest utworzenie niestandardowego pola meta na stronie Edytuj produkt . Następnie, po zapisaniu informacji, zostanie ona wyświetlona na stronie pojedynczego produktu.
Jeśli jednak przeprowadzisz szybkie wyszukiwanie, znajdziesz wiele wtyczek, które rozwiążą ten problem. Jeśli jednak masz wiele wtyczek, spowodują one rozdęcie Twojej witryny. W rezultacie negatywnie wpłynie to na szybkość ładowania witryny. Dlatego postanowiliśmy stworzyć dla Ciebie ten samouczek.
Dodaj niestandardowy Meta Box w produkcie WooCommerce
W dzisiejszym krótkim samouczku pokażemy Ci, jak dodać niestandardowe metabox w Twoim sklepie WooCommerce. Używanie niestandardowych fragmentów kodu to zalecany sposób wprowadzania zmian w WordPressie.
Zanim przejdziesz dalej, zainstaluj lub utwórz motyw potomny. Zapewni to, że Twoje zmiany nie zostaną utracone podczas aktualizacji.
Nie tracąc dużo czasu, przejdźmy od razu.
Kroki, aby dodać niestandardowy Meta Box w produkcie WooCommerce
Oto proste kroki, które musisz wykonać:
- Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
- Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, aby dodać funkcję dodawania niestandardowego pola meta w produkcie WooCommerce.
- Dodaj następujący kod do pliku php :
## ---- 1. Backend ---- ##
// Adding a custom Meta container to admin products pages
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 Information <em>(optional)</em>', 'cmb' ),
'add_custom_content_meta_box',
'product',
'normal',
'default'
);
}
}
// Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
function add_custom_content_meta_box( $post ){
$prefix = '_bhww_'; // global $prefix;
$ingredients = get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) : '';
$benefits = get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) : '';
$args['textarea_rows'] = 6;
echo '<p>'.__( 'Ingredients', 'cmb' ).'</p>';
wp_editor( $ingredients, 'ingredients_wysiwyg', $args );
echo '<p>'.__( 'Benefits', 'cmb' ).'</p>';
wp_editor( $benefits, 'benefits_wysiwyg', $args );
echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
}
}
//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{
function save_custom_content_meta_box( $post_id ) {
$prefix = '_bhww_'; // global $prefix;
// We need to verify this with the proper authorization (security stuff).
// Check if our nonce is set.
if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
return $post_id;
}
$nonce = $_REQUEST[ 'custom_product_field_nonce' ];
//Verify that the nonce is valid.
if ( ! wp_verify_nonce( $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 ( 'product' == $_POST[ 'post_type' ] ){
if ( ! current_user_can( 'edit_product', $post_id ) )
return $post_id;
} else {
if ( ! current_user_can( 'edit_post', $post_id ) )
return $post_id;
}
// Sanitize user input and update the meta field in the database.
update_post_meta( $post_id, $prefix.'ingredients_wysiwyg', wp_kses_post($_POST[ 'ingredients_wysiwyg' ]) );
update_post_meta( $post_id, $prefix.'benefits_wysiwyg', wp_kses_post($_POST[ 'benefits_wysiwyg' ]) );
}
}
## ---- 2. Front-end ---- ##
// Create custom tabs in product single pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );
function custom_product_tabs( $tabs ) {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_ingredients ) )
$tabs['ingredients_tab'] = array(
'title' => __( 'Ingredients', 'woocommerce' ),
'priority' => 45,
'callback' => 'ingredients_product_tab_content'
);
if ( ! empty( $product_benefits ) )
$tabs['benefits_tab'] = array(
'title' => __( 'Benefits', 'woocommerce' ),
'priority' => 50,
'callback' => 'benefits_product_tab_content'
);
return $tabs;
}
// Add content to custom tab in product single pages (1)
function ingredients_product_tab_content() {
global $post;
$product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
if ( ! empty( $product_ingredients ) ) {
echo '<h2>' . __( 'Product Ingredients', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_ingredients );
}
}
// Add content to custom tab in product single pages (2)
function benefits_product_tab_content() {
global $post;
$product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
if ( ! empty( $product_benefits ) ) {
echo '<h2>' . __( 'Product Benefits', 'woocommerce' ) . '</h2>';
// Updated to apply the_content filter to WYSIWYG content
echo apply_filters( 'the_content', $product_benefits );
}
}
- Oto wynik końcowy:
- Oto wynik w interfejsie:
Wniosek
W dzisiejszym samouczku widziałeś, jak łatwo jest dodać niestandardowe metabox w WooCommerce. Pomoże Ci to dostosować witrynę do konkretnych produktów i zaoferować klientom więcej informacji.
Jeśli nie znasz obsługi kodu, zalecamy użycie wtyczki takiej jak Meta Box. Mamy nadzieję, że ten post dostarczył Ci rozwiązania.
Podobne artykuły
- Jaka jest najlepsza bramka płatnicza dla WooCommerce
- Jak ukryć wyróżniony obraz na stronie pojedynczego produktu
- Jak wyświetlić odmiany produktów w WooCommerce?
- Jak zdobyć aktualny produkt WooCommerce
- Jak zmienić szablon wiadomości e-mail w WooCommerce?
- Jak dodać niestandardowe tło dla WooCommerce?
- Jak korzystać z WooCommerce do założenia sklepu internetowego?
- Jak przesłać obraz na stronę produktu w WooCommerce?
- Jak dodać ocenę gwiazdkową do produktu WooCommerce?
- WooCommerce Utwórz niestandardową stronę pojedynczego produktu
- Jak dostosować strony produktów WooCommerce za pomocą Elementor Pro
- Jak dodać informacje do strony sklepu WooCommerce
- Jak dodać przycisk Wyświetl koszyk w WooCommerce?
- Jak ukryć galerię produktów w WooCommerce
- Jak dodać niestandardową taksonomię do produktów WooCommerce?
- Jak dodać nową kolumnę na stronie zamówień WooCommerce
- Jak przenieść produkty WooCommerce do nowej witryny?