Related
I'm trying to add a custom settings tab to the WooCommerce settings screen. Basically I want to achieve a similar thing to the Products settings tab, with the subsections/subtabs:
I haven't been able to find any decent documentation on how to do this but I've been able to add a custom tab using this snippet:
class WC_Settings_Tab_Demo {
public static function init() {
add_filter( 'woocommerce_settings_tabs_array', __CLASS__ . '::add_settings_tab', 50 );
}
public static function add_settings_tab( $settings_tabs ) {
$settings_tabs['test'] = __( 'Settings Demo Tab', 'woocommerce-settings-tab-demo' );
return $settings_tabs;
}
}
WC_Settings_Tab_Demo::init();
Based on what I've dug up from various threads/tutorials, I've been trying to add the sections/subtabs to the new settings tab something like this:
// creating a new sub tab in API settings
add_filter( 'woocommerce_get_sections_test','add_subtab' );
function add_subtab( $sections ) {
$sections['custom_settings'] = __( 'Custom Settings', 'woocommerce-custom-settings-tab' );
$sections['more_settings'] = __( 'More Settings', 'woocommerce-custom-settings-tab' );
return $sections;
}
// adding settings (HTML Form)
add_filter( 'woocommerce_get_settings_test', 'add_subtab_settings', 10, 2 );
function add_subtab_settings( $settings, $current_section ) {
// $current_section = (isset($_GET['section']) && !empty($_GET['section']))? $_GET['section']:'';
if ( $current_section == 'custom_settings' ) {
$custom_settings = array();
$custom_settings[] = array( 'name' => __( 'Custom Settings', 'text-domain' ),
'type' => 'title',
'desc' => __( 'The following options are used to ...', 'text-domain' ),
'id' => 'custom_settings'
);
$custom_settings[] = array(
'name' => __( 'Field 1', 'text-domain' ),
'id' => 'field_one',
'type' => 'text',
'default' => get_option('field_one'),
);
$custom_settings[] = array( 'type' => 'sectionend', 'id' => 'test-options' );
return $custom_settings;
} else {
// If not, return the standard settings
return $settings;
}
}
I've been able to add new subsections to the Products tab using similar code to the above, but it isn't working for my new custom tab. Where am I going wrong here?
1) To add a setting tab with sections, you can firstly use the woocommerce_settings_tabs_array filter hook:
// Add the tab to the tabs array
function filter_woocommerce_settings_tabs_array( $settings_tabs ) {
$settings_tabs['my-custom-tab'] = __( 'My custom tab', 'woocommerce' );
return $settings_tabs;
}
add_filter( 'woocommerce_settings_tabs_array', 'filter_woocommerce_settings_tabs_array', 99 );
2) To add new sections to the page, you can use the woocommerce_sections_{$current_tab} composite hook where {$current_tab} need to be replaced by the key slug that is set in the first function:
// Add new sections to the page
function action_woocommerce_sections_my_custom_tab() {
global $current_section;
$tab_id = 'my-custom-tab';
// Must contain more than one section to display the links
// Make first element's key empty ('')
$sections = array(
'' => __( 'Overview', 'woocommerce' ),
'my-section-1' => __( 'My section 1', 'woocommerce' ),
'my-section-2' => __( 'My section 2', 'woocommerce' )
);
echo '<ul class="subsubsub">';
$array_keys = array_keys( $sections );
foreach ( $sections as $id => $label ) {
echo '<li>' . $label . ' ' . ( end( $array_keys ) == $id ? '' : '|' ) . ' </li>';
}
echo '</ul><br class="clear" />';
}
add_action( 'woocommerce_sections_my-custom-tab', 'action_woocommerce_sections_my_custom_tab', 10 );
3) For adding the settings, as well as for processing/saving, we will use a custom function, which we will then call:
// Settings function
function get_custom_settings() {
global $current_section;
$settings = array();
if ( $current_section == 'my-section-1' ) {
// My section 1
$settings = array(
// Title
array(
'title' => __( 'Your title 1', 'woocommerce' ),
'type' => 'title',
'id' => 'custom_settings_1'
),
// Text
array(
'title' => __( 'Your title 1.1', 'text-domain' ),
'type' => 'text',
'desc' => __( 'Your description 1.1', 'woocommerce' ),
'desc_tip' => true,
'id' => 'custom_settings_1_text',
'css' => 'min-width:300px;'
),
// Select
array(
'title' => __( 'Your title 1.2', 'woocommerce' ),
'desc' => __( 'Your description 1.2', 'woocommerce' ),
'id' => 'custom_settings_1_select',
'class' => 'wc-enhanced-select',
'css' => 'min-width:300px;',
'default' => 'aa',
'type' => 'select',
'options' => array(
'aa' => __( 'aa', 'woocommerce' ),
'bb' => __( 'bb', 'woocommerce' ),
'cc' => __( 'cc', 'woocommerce' ),
'dd' => __( 'dd', 'woocommerce' ),
),
'desc_tip' => true,
),
// Section end
array(
'type' => 'sectionend',
'id' => 'custom_settings_1'
),
);
} elseif ( $current_section == 'my-section-2' ) {
// My section 2
$settings = array(
// Title
array(
'title' => __( 'Your title 2', 'woocommerce' ),
'type' => 'title',
'id' => 'custom_settings_2'
),
// Text
array(
'title' => __( 'Your title 2.2', 'text-domain' ),
'type' => 'text',
'desc' => __( 'Your description 2.1', 'woocommerce' ),
'desc_tip' => true,
'id' => 'custom_settings_2_text',
'css' => 'min-width:300px;'
),
// Section end
array(
'type' => 'sectionend',
'id' => 'custom_settings_2'
),
);
} else {
// Overview
$settings = array(
// Title
array(
'title' => __( 'Overview', 'woocommerce' ),
'type' => 'title',
'id' => 'custom_settings_overview'
),
// Section end
array(
'type' => 'sectionend',
'id' => 'custom_settings_overview'
),
);
}
return $settings;
}
3.1) Add settings, via the woocommerce_settings_{$current_tab} composite hook:
// Add settings
function action_woocommerce_settings_my_custom_tab() {
// Call settings function
$settings = get_custom_settings();
WC_Admin_Settings::output_fields( $settings );
}
add_action( 'woocommerce_settings_my-custom-tab', 'action_woocommerce_settings_my_custom_tab', 10 );
3.2) Process/save the settings, via the woocommerce_settings_save_{$current_tab} composite hook:
// Process/save the settings
function action_woocommerce_settings_save_my_custom_tab() {
global $current_section;
$tab_id = 'my-custom-tab';
// Call settings function
$settings = get_custom_settings();
WC_Admin_Settings::save_fields( $settings );
if ( $current_section ) {
do_action( 'woocommerce_update_options_' . $tab_id . '_' . $current_section );
}
}
add_action( 'woocommerce_settings_save_my-custom-tab', 'action_woocommerce_settings_save_my_custom_tab', 10 );
Result:
Based on:
Implement a custom WooCommerce settings page, including page sections
woocommerce/includes/admin/settings/
I'm trying to add this basic code to add a new field to the check out page. However, it seems to disable the place order button. Here is the code:
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Were you assisted with this order?'),
'placeholder' => __('Please enter the name of your rep here'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}
You just need to remember to add the start echo'<div>' tag for your field options div. Otherwise it disables the woo-commerce functionality on the page.
add_action('woocommerce_after_order_notes','my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
//need to remember echo start tag here!
echo '<div id="my_custom_checkout_field">';
woocommerce_form_field( 'name_of_child', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Name of Child'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'name_of_child' ));
echo '</div>';
}
I use the following code to show date input on the checkout page, after additional information:
add_action( 'woocommerce_after_order_notes', 'custom_checkout_field' );
function custom_checkout_field( $checkout ) {
echo '<div id="custom_checkout_field"><h2>' . __('Date picker:') . '</h2>';
woocommerce_form_field(
'custom_field_name', array(
'type' => 'date',
'class' => array( 'my-field-class form-row-wide' ),
'label' => __( 'Custom Additional Field' ),
'placeholder' => __( 'New Custom Field' ),
),
$checkout->get_value( 'custom_field_name' )
);
echo '</div>';
}
But there is a problem with this code, all days are selectable, I am looking for a way to make previous days, and Sundays unclickable. Please give me some tips to solve this problem.
I'm trying to do some custom elements for Visual Composer plugin (WP-Bakery) for wordpress.
I have no problem with simple custom elements, but I'm trying to do some nested elements (a parent containing some child elements). I have no problems creating child elements, and if I create them alome, they are shown on wordpress, but when I try to create parent element, I can see setting elements without problem, but it's no rendered.
I think the problem is the render function (html) on parent class, but I can't get solve it.
PARENT CLASS
<?php
class vcInfoCardContainer extends WPBakeryShortCodesContainer {
// Element Init
function __construct() {
add_action( 'init', array( $this, 'vc_infocardcontainer_mapping' ) );
add_shortcode( 'vc_infocard', array( $this, 'vc_infocardcontainer_html' ) );
}
// Element Mapping
public function vc_infocardcontainer_mapping() {
// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Info Card Container', 'ex5_vc_elements'),
'base' => 'vc_infocardcontainer',
'description' => __('Info Card Container for VC', 'ex5_vc_elements'),
'category' => __('Ex5 Elements', 'ex5_vc_elements'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'as_parent' => array('only' => 'vc_infocard'),
'is_container' => true,
'js_view' => 'VcColumnView',
'params' => array(
array(
'type' => 'textfield',
'heading' => __('Button text','ex5_vc_elements'),
'param_name' => 'button_text',
'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
'group' => 'Button',
)
),
));
}
//render
public function vc_infocard_html( $atts, $content = null ) {
// Params extraction
extract(
shortcode_atts(
array(
),
$atts
)
);
$html = '<div class="ex5-vc-info-card-container">' . do_shortcode($content) . '</div>';
return $html;
}
}
new vcInfoCardContainer();
CHILD CLASS
<?php
class vcInfoCard extends WPBakeryShortCode {
// Element Init
function __construct() {
add_action( 'init', array( $this, 'vc_infocard_mapping' ) );
add_shortcode( 'vc_infocard', array( $this, 'vc_infocard_html' ) );
}
// Element Mapping
public function vc_infocard_mapping() {
// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Info Card', 'ex5_vc_elements'),
'base' => 'vc_infocard',
'description' => __('Info Card for VC', 'ex5_vc_elements'),
'category' => __('Ex5 Elements', 'ex5_vc_elements'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'as_child' => array('only' => 'vc_infocardcontainer'),
'params' => array(
array(
'type' => 'attach_image',
'heading' => __( 'Main image', 'ex5_vc_elements' ),
'param_name' => 'image',
'group' => 'Images',
),
array(
'type' => 'attach_image',
'heading' => __( 'Icon', 'ex5_vc_elements' ),
'param_name' => 'icon',
'group' => 'Images',
),
array(
'type' => 'colorpicker',
'heading' => __( 'Icon background color', 'ex5_vc_elements' ),
'param_name' => 'icon_background_color',
'value' => __( '#000000', 'ex5_vc_elements' ),
'group' => 'Images',
),
array(
'type' => 'textfield',
'heading' => __('Title','ex5_vc_elements'),
'param_name' => 'Title',
'group' => 'Texts',
),
array(
'type' => 'textfield',
'heading' => __( 'Text', 'ex5_vc_elements' ),
'param_name' => 'text',
'group' => 'Texts',
),
array(
'type' => 'checkbox',
'class' => 'one-third',
'heading' => __( 'Show link button', 'ex5_vc_elements' ),
'param_name' => 'show_button',
'value' => 'show',
'description' => __( 'Indicates if link button is shown)', 'ex5_vc_elements' ),
'group' => 'Button',
),
array(
'type' => 'textfield',
'heading' => __('Button text','ex5_vc_elements'),
'param_name' => 'button_text',
'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
'group' => 'Button',
),
array(
'type' => 'vc_link',
'heading' => __( 'Button link', 'ex5_vc_elements' ),
'param_name' => 'button_link',
'group' => 'Button',
),
),
));
}
//render
public function vc_infocard_html( $atts ) {
// Params extraction
extract(
shortcode_atts(
array(
'image' => '',
'icon' => '',
'icon_background_color' => '#000000',
'title' => '',
'text' => '',
'show_button' => '',
'button_text' => 'Más info',
'button_link' => '',
),
$atts
)
);
if (empty($button_text)) $button_text = __( 'Más info', 'ex5_vc_elements' );
if ($show_button === 'true') {
if (!empty($button_link)) {
$button = '<div class="ex5-vcic-button">
<a href="'. $button_link .'" target="_self" class="ex5-vcic-link" title="' . $button_text . '">
<span class="ex5-vcic-button-text">' . $button_text . '</span>
</a>
</div>';
} else {
$button = '<div class="ex5-vcic-button">
<span class="ex5-vcic-button-text">' . $button_text . '</span>
</div>';
}
} else {
$button = '';
}
$image = wp_get_attachment_image_src($image);
$icon = wp_get_attachment_image_src($icon);
//vc_build_link(
$html = '
<div class="ex5-vc-infocard">
<div class="ex5-vcic-content">
<div class="ex5-vcic-image">
<span>
<img src="' . $image[0] . '" title="history_inner_14" alt="http://oxigeno.">
</span>
</div>
<div class="ex5-vcic-icon" style="background-color: ' . $icon_background_color . '">
<img src="' . $icon[0] . '" />
</div>
<header class="ex5-vcic-headline">
<h3>' . $title . '</h3>
</header>
<div class="ex5-vcic-text">
<p>' . $text . '</p>
</div>' .
$button
. '</div>
</div>';
return $html;
}
}
new vcInfoCard();
There was a problem with the name of container shortcode. It had to be
add_shortcode( 'vc_infocardcontainer', array( $this, 'vc_infocardcontainer_html' ) );
But there's still a problem. I have a problem with do_shortcode_tag function
Attempting to parse a shortcode without a valid callback
Anybody knows how can I solve it?
I had solved it. The shortcode call was wrong because it had the wrong function name too.
public function vc_infocard_html( $atts, $content = null ) {
must be
public function vc_infocardcontainer_html( $atts, $content = null ) {
I am using woocommerce for my site. I wanna to add some extra fields in add product page following to SKU, Regular Price, Sale Price.. Extra fields contains default values like 2% or 5%. when user enters Product price it should be calculated with default field values & result should be displayed in another field..
For Example:
SKU : 001
Regular Price(Rs) : 100
Added Text Field1 : 5% (5% of 100 = 5)
Added Text Field2 : 2% (2% of 100 = 2)
Answer Field : 107 (100 + 5 + 2)
Note: Answer field should be automatically calculated from values present in Regular Price/Sale Price + added text field1 + added text field2.
How to do this???
I have created fields using following function...
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Custom fields will be created here...
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'Our Commision', 'woocommerce' ),
'placeholder' => '5%',
'desc_tip' => 'true',
'description' => __( 'Commision will be added to Product Actual Price', 'woocommerce' )
)
);
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'Payment Gateway Charges', 'woocommerce' ),
'placeholder' => '2%',
'desc_tip' => 'true',
'description' => __( 'Payment Gateway Charges will be added to Product Actual Price', 'woocommerce' )
)
);
echo 'Selling Price = Your Price + Our Commision + Payment Gateway Charges.';
echo '</div>';
}
Add below code to your theme's functions.php :
add_action( 'woocommerce_product_options_general_product_data', 'so28712303_rohil_add_custom_general_fields' );
// Save Fields
add_action( 'woocommerce_process_product_meta', 'so28712303_rohil_add_custom_general_fields_save' );
function so28712303_rohil_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
woocommerce_wp_text_input(
array(
'id' => 'field_1',
'label' => __( '<strong>Extra Field 1</strong>', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Please enter a number', 'woocommerce' ),
'type' => 'number',
'custom_attributes' => array(
'step' => 'any',
'min' => '0'
)
)
);
echo '</div>';
echo '<div class="options_group">';
woocommerce_wp_text_input(
array(
'id' => 'field_2',
'label' => __( '<strong>Extra Field 2</strong>', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Please enter a number', 'woocommerce' ),
'type' => 'number',
'custom_attributes' => array(
'step' => 'any',
'min' => '0'
)
)
);
echo '</div>';
echo '<div class="options_group">';
woocommerce_wp_text_input(
array(
'id' => 'result_field',
'label' => __( '<strong style="color:#239804">Result</strong>', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Percentage of Price', 'woocommerce' ),
'type' => 'number',
'readonly' => 'readonly',
'custom_attributes' => array(
'step' => 'any',
'min' => '0',
'readonly' => 'readonly'
)
)
);
echo '</div>';
}//so28712303_rohil_add_custom_general_fields
function so28712303_rohil_add_custom_general_fields_save( $post_id ){
$woocommerce_field_1 = $_POST['field_1']; //Value of Extra field 1
$woocommerce_field_2 = $_POST['field_2']; //Value of Extra field 2
$woocommerce_result_field = $_POST['result_field']; //No use of this..you can delete
$regular_price = $_POST['_regular_price']; //Value of regular price
if( !empty( $woocommerce_field_1 ) || !empty( $woocommerce_field_2 ) ):
update_post_meta( $post_id, 'field_1', esc_attr( $woocommerce_field_1 ) ); //Save value of Extra Field 1
update_post_meta( $post_id, 'field_2', esc_attr( $woocommerce_field_2 ) ); //Save value of Extra Field 2
endif;
$result_field = ( $woocommerce_field_1 * $regular_price ) / 100 ; //Calculation goes here ...
//if(empty($woocommerce_result_field))
update_post_meta( $post_id, 'result_field', esc_attr( $result_field ) ); //Save result here ...
}
Let me know if you have any doubt.
Screen shot :