Pages

Monday, September 16, 2019

Adding Custom Fields WooCommerce Products With Meta Box

WooCommerce is an E-commerce plugin based on WordPress and WooCommerce powers more than 23% of the E-commerce websites across the globe. It helps you to create online stores that incorporate all the necessary tools for handling sales and shipment related tasks such as email notifications, shipping, online payment, order management, auto fees collection and tax calculations. To add extra info to a WooCommerce product (post type product), I will create a new meta box called Extra Product Info with 6 custom fields.
/**
 * Learn more about filter hook @ https://docs.metabox.io/creating-meta-boxes/
 * add_filter( 'rwmb_meta_boxes', 'prefix_register_meta_boxes' );
 *
 */
add_filter( 'rwmb_meta_boxes', 'pharmacy_meta_boxes' );
function pharmacy_meta_boxes( $meta_boxes ) {
         $meta_boxes[] = array(
         'title'  => __( 'Extra Product Info', 'pharmacy' ),
         'fields' => array(
                     array(
                      'id'       => 'unit',
                      'name'     => __( 'Unit', 'pharmacy' ),
                      'type'     => 'text',
                      'datalist' => array(
                                  'options' => array(
                                   __( 'Box', 'pharmacy' ),
                                   __( 'Blister pack', 'pharmacy' ),
                                   __( 'Packet', 'pharmacy' ),
                                   __( 'Bottle', 'pharmacy' ),
                                ),
                           ),
                        ),
                      array(
                       'id'   => 'dosage_form',
                       'name' => __( 'Dosage form', 'pharmacy' ),
                       'type' => 'text',
                       'datalist' => array(
                                 'options' => array(
                                  __( 'Capsule', 'pharmacy' ),
                                  __( 'Tablet', 'pharmacy' ),
                                  __( 'Liquid', 'pharmacy' ),
                                        __( 'Ointment', 'pharmacy' ),
                                ),
                            ),
                        ),
                      array(
                      'id'   => 'specification',
                      'name' => __( 'Specification', 'pharmacy' ),
                      'type' => 'text',
                      ),
                      array(
                       'id'   => 'manufacturer',
                       'name' => __( 'Manufacturer', 'pharmacy' ),
                       'type' => 'text',
                      ),
                      array(
                       'id'   => 'distributor',
                       'name' => __( 'Distributor', 'pharmacy' ),
                       'type' => 'text',
                      ),
                      array(
                       'id'   => 'expiry_date',
                       'name' => __( 'Expiry date', 'pharmacy' ),
                       'type' => 'date',
                      ),
                ),
            );

            return $meta_boxes;
    
}

Learn more here WooComemrce Action and Filter Hook Reference

Go to your Dashboard and edit a WooCommerce product, you will see a new meta box below the editor:

Showing Custom Field Values in the Product Page

After adding extra information to products, you need to show it on the frontend. To do that, we need to use a WooCommerce hook in a single product page and the helper function rwmb_meta to get custom field value.
add_action( 'woocommerce_product_meta_end', 'pharmacy_extra_info' );
function pharmacy_extra_info(){
            if ( $meta = rwmb_meta( 'unit' ) ){
            echo '' . __( 'Unit:', 'pharmacy' ) . " $meta";
            }
            if ( $meta = rwmb_meta( 'dosage_form' ) ){
            echo '' . __( 'Dosage form:', 'pharmacy' ) . " $meta";
            }
            if ( $meta = rwmb_meta( 'specification' ) ){
            echo '' . __( 'Specification:', 'pharmacy' ) . " $meta";
            }
            if ( $meta = rwmb_meta( 'manufacturer' ) ){
            echo '' . __( 'Manufacturer:', 'pharmacy' ) . " $meta";
            }
            if ( $meta = rwmb_meta( 'distributor' ) ){
            echo '' . __( 'Distributor:', 'pharmacy' ) . " $meta";
            }
            if ( $meta = rwmb_meta( 'expiry_date' ) ){
            echo '' . __( 'Expiry date:', 'pharmacy' ) . " $meta";
      }
}
To understand how rwmb_meta function works, please follow this documentation. When viewing the single product page, you will see:


I believe these functions will help to create a custom meta box on your WooCommerce website. If you need to be helped with the implementation of your WooCommerce store, do let me know through the services section. To Check: Create a Custome eCommerce website with WooCommerce.

I can make a dropshipping website using WooCommerce.

AliExpress dropshipping website.
SaleHoo dropshipping website.
Doba dropshipping website.
Wholesale2B dropshipping website.
Worldwide Brands dropshipping website.
Wholesale Central dropshipping website.
Dropship Direct dropshipping website.
Sunrise Wholesale dropshipping website.
MegaGoods dropshipping website.
InventorySource dropshipping website.
National Dropshippers dropshipping website.
Dropshipper.com dropshipping website.

So please check my services section. To Check: Create a Custome eCommerce dropshipping website with WooCommerce.

No comments:

Post a Comment