Add Advanced Custom Field to existing form on Dokan- Add product & edit product page (WordPress/WooCommerce)

Question

I'm using a multi-vendor (Dokan) plugin, and been customizing it. One thing I want to achieve and been struggling is that I want my advanced custom field(also a plugin) for single product to actually appear on the front-end, in one of the Dokan's seller dashboard form (Edit product section).

I want my seller to be able to select a brand (my acf field) on the fron-end page.

Normally when we add a new acf field group, and assign to the archive, the field will appear on the backend.

I found this to be pretty hard to achieve, especially adding the custom field onto an existing front-end form.

I have trying to customize it and I finally get the field to appear on the form I want to, but then another problem came up, which is the save button from the original form isn't clickable anymore.

Please see screenshot: https://gyazo.com/dfb20ed90e773723658979c515581730

and here is the code I attempted to add into my Dokan's single-product-new.php:

<?php acf_form_head(); ?>
<div class=”dokan-form-group”>
<?php
$product_brand = -1;
$term = array();
$term = wp_get_post_terms( $post_id, ‘brand’, array( ‘fields’ => ‘ids’) );

if ( $term ) {
$product_brand = reset( $term );
}
include_once DOKAN_LIB_DIR.’/class.category-walker.php’;
include_once DOKAN_LIB_DIR. ‘acf.php’;
$brand_args = array(
‘hierarchical’ => 1,
‘hide_empty’ => 0,
‘fields’ => array(‘brand’),
‘name’ => ‘brand’,
‘id’ => ‘brand’,
‘taxonomy’ => ‘brand’,
‘title_li’ => ”,
‘class’ => ‘product_brand dokan-form-control dokan-select2’,
‘exclude’ => ”,
‘selected’ => $product_brand,
‘walker’ => new DokanCategoryWalker( $post_id )
);
acf_form($brand_args);

?>
<div class=”dokan-product-cat-alert dokan-hide”>
<?php esc_html_e(‘Please choose a brand!’, ‘dokan-lite’ ); ?>
</div>
</div>

I know this is wrong, but somehow these code helped me to pull the advanced custom field onto the form I want, and it's actually saving the field data to the product when you click update.

I was thinking maybe should of work around this under child-theme's function.php...

Any help will be really appreciated!

Luke

Answer 1

You can use a free plugin named ACF Frontend Form for Elementor to add / edit products from front end for your sellers / vendors. https://wordpress.org/plugins/acf-frontend-form-element/

For this you also need to use elementor plugin and create a product page through elementor