Woocommerce

Add Woocommerce Product From Frontend With Custom Meta And Display Custom Meta In Backend Product Edit Page

We can add the WooCommerce products from the front end with a custom form. Also, we can add custom meta for products with a custom form. Let’s learn how to add products with product data and custom meta with a custom form.

1. Create one page template named add-new-product.php in your current theme. And add below code in it.

<?php
/*
Template Name: Add New Product
*/?>
<?php get_header(); ?>
  <div id="primary" class="content-area">
    <main id="main" class="site-main">
      <form method="post">
        <div><h4>Product Data</h4></div>
        <div>
          <div><label>Product Name</label></div>
          <div><input type="text" name="proname" class="proname"/></div>
        </div>
        <div>
          <div><label>Product Description</label></div>
          <div><textarea name="prodesc" class="prodesc"></textarea></div>
        </div>
        <div>
          <div><label>Product Price</label></div>
          <div><input type="text" name="proprice" class="proprice"/></div>
        </div>
        <div><h4>Custom Meta</h4></div>
        <div>
          <div><label>Product Custom1</label></div>
          <div><input type="text" name="procust1" class="procust1" /></div>
        </div>
        <div>
          <div><label>Product Custom2</label></div>
          <div><input type="text" name="procust2" class="procust2" /></div>
        </div>
        <div>
          <input type="submit" value="Submit" class="submit" >

Assign this template in your backend page.

Note: Here we have added only two custom meta fields you can add as many as you have a requirement.

2. Create ACF fields for custom meta and make the same name as given in the custom form.

You can see the fields on Add new product page in backend.

3. Now insert below code in add-new-product.php file before the get_footer(); line.

<?php 
if(isset($_POST["submit"]))
{
  global $wpdb;
  $post_data = array(
    'post_title' => $_POST['proname'],
    'post_content'=> $_POST['prodesc'],
    'post_type' => 'product',
    'post_status' => 'publish'
  );
  $post_id = wp_insert_post( $post_data );
  update_post_meta($post_id,'_regular_price',$_POST['proprice']);
  update_post_meta($post_id,'procust1',$_POST['procust1']);
  update_post_meta($post_id,'procust2',$_POST['procust2']);
}

Now your custom form is ready to insert product in backend.

4. Fill the data in the form of the frontend.

Click the submit button to insert the product data.

The product is available in the backend.

Check all product data is as same as entered in the form.

Het Patel

I'm a Professional WordPress Developer with 5+ years of web design and development experience including custom websites for small & enterprise businesses. I also have acquired fame and popularity in API Integration & Development and am responsible for producing high-quality solutions for the company customers, Bringing a deep understanding of Modern HTML, JavaScript, and CSS, Plugin Customization, Theme Customization, Theme Creation, creating websites from scratch, and the software development life cycle, And strong ability to execute and implement standard software architecture patterns.

View Comments

Share
Published by
Het Patel

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

3 years ago