How can i style custom text fields on cart page? - woocommerce

Hope someone can help me.
i have a custom text field at my cart page with the ID _shipping_field - how can i style this text if i eg. want the text to be green and bold writing.
function product_create_field() {
echo '<div class="product_custom_field">';
woocommerce_wp_text_input( array(
'id' => '_shipping_field',
'placeholder' => 'Skriv kort beskrivelse her',
'label' => __('kort beskrivelse', 'woocommerce'),
'desc_tip' => 'true'
)
);
echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'product_create_field', 10, 0 );
function woo_add_custom_general_fields_supplier_save( $product ) {
if( isset($_POST['_shipping_field']) ) {
$product->update_meta_data( '_shipping_field', esc_html( $_POST['_shipping_field'] ) );
}
}
add_action( 'woocommerce_admin_process_product_object', 'woo_add_custom_general_fields_supplier_save', 10, 1 );
function delivery_time_in_cart_display( $item_data, $cart_item ) {
$shipping_field = $cart_item['data']->get_meta('_shipping_field');
if ( ! empty( $shipping_field ) ) {
$item_data[] = array(
'name' => $shipping_field,
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'delivery_time_in_cart_display', 10, 2 );

You can use custom style in admin area like this -
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
#_shipping_field {
color: green;
font-weight: bold;
}
</style>';
}

Related

Add custom field as item meta data on the Order

I have added a custom field to the woocommerce products, it is working well with the following code. But my problem is how to add it to the cart_item_data
// Display Text in Admin Panel
add_action('woocommerce_product_options_general_product_data', 'product_custom_text_field');
function product_custom_text_field()
{
// Custom Product Text Field ( para Tex Area -> woocommerce_wp_textarea_input )
woocommerce_wp_text_input(
array(
'id' => '_optional_text_field',
'label' => __('Customize title', 'woocommerce'),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __('Customizable title for the field that the user must fill out.', 'woocommerce')
)
);
}
Save Fields
add_action('woocommerce_process_product_meta', 'product_custom_text_field_save');
function product_custom_text_field_save($post_id)
{
if (!empty($_POST['_optional_text_field'])) {
update_post_meta($post_id, '_optional_text_field', esc_attr($_POST['_optional_text_field']));
}
}
Display The Text in Product Page
add_action('woocommerce_single_variation', 'display_text_field');
function display_text_field()
{
global $post;
if (get_post_meta($post->ID, '_optional_text_field', true)) {
echo "<div class='titulo-c'><label>";
echo get_post_meta($post->ID, '_optional_text_field', true);
echo "</label></div>";
return;
}
echo __('FREE LOCAL SHIPPING', 'woocommerce');
}
So far it works without problems, now I want to add it to the cart_item_data, with the following code, but it does not work for me.
add_filter( 'woocommerce_add_cart_item_data', 'add_cart_item_data', 25, 2 );
function add_cart_item_data( $cart_item_meta, $product_id ) {
$custom_data = array() ;
$custom_data[ "_optional_text_field"] = isset( $_POST['_optional_text_field'] ) ? sanitize_text_field ( $_POST['_optional_text_field'] ) : "" ;
$cart_item_meta ['custom_data'] = $custom_data ;
return $cart_item_meta;
}
Display custom data on cart and checkout page.
add_filter( 'woocommerce_get_item_data', 'get_item_data' , 25, 2 );
function get_item_data ( $other_data, $cart_item ) {
if ( isset( $cart_item [ 'custom_data' ] ) ) {
$custom_data = $cart_item [ 'custom_data' ];
$other_data[] = array( 'name' => 'Title',
'display' => $custom_data['_optional_text_field'] );
}
return $other_data;
}
As a result, it only appears to me: Title: ________
I will appreciate any suggestions to make my code work.
Make the following changes to your code as below, this should work.
/**
* Add data to cart item
*/
add_filter( 'woocommerce_add_cart_item_data', 'add_cart_item_data', 25, 2 );
function add_cart_item_data( $cart_item_meta, $product_id ) {
global $woocommerce;
$mytitle_form_data = get_post_meta($product_id, '_optional_text_field', true);
$custom_data = array() ;
$custom_data[ "_optional_text_field"] = $mytitle_form_data;
$cart_item_meta ['custom_data'] = $custom_data ;
return $cart_item_meta;
}

Save and display product selected custom data in WooCommerce

I use the code, that on the product editing page shows the checkbox "Roast Level". When the manager clicks on this checkbox, a select box appears on the page of a single product, allowing the customer to select "Roast Level".
When selecting and adding a product to the cart, the selected value appears in the cart itself. This value is also shown on the checkout page, on the "Thank You" page, in the order, on the email notification, and on the order editing page in the admin panel.
Here is the code:
// Display Checkbox Field
add_action('woocommerce_product_options_general_product_data', 'roast_custom_field_add');
function roast_custom_field_add() {
global $post;
// Checkbox
woocommerce_wp_checkbox(
array(
'id' => '_roast_checkbox',
'label' => __('Roast Level', 'woocommerce'),
'description' => __('Enable roast level!', 'woocommerce')
)
);
}
// Save Checkbox Field
add_action('woocommerce_process_product_meta', 'roast_custom_field_save');
function roast_custom_field_save($post_id) {
// Custom Product Checkbox Field
$roast_checkbox = isset($_POST['_roast_checkbox']) ? 'yes' : 'no';
update_post_meta($post_id, '_roast_checkbox', esc_attr($roast_checkbox));
}
// Display Select Box
add_action('woocommerce_before_add_to_cart_button', 'add_roast_custom_field', 0);
function add_roast_custom_field() {
global $product;
// If is single product page and have the "roast_checkbox" enabled we display the field
if (is_product() && $product->get_meta('_roast_checkbox') === 'yes') {
echo '<div>';
woocommerce_form_field('roast_custom_options', array(
'type' => 'select',
'class' => array('my-field-class form-row-wide'),
'label' => __('Roast Level'),
'required' => false,
'options' => array(
'' => 'Please select',
'Blue' => 'Blue',
'Rare' => 'Rare',
'Medium Rare' => 'Medium Rare',
'Medium' => 'Medium',
'Medium Well' => 'Medium Well',
'Well Done' => 'Well Done'
)
), '');
echo '</div>';
}
}
// Add as custom cart item data
add_filter('woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 10, 3);
function add_custom_cart_item_data($cart_item_data, $product_id, $variation_id) {
if (isset($_POST['roast_custom_options'])) {
$cart_item_data['roast_option'] = wc_clean($_POST['roast_custom_options']);
}
return $cart_item_data;
}
// Add custom fields values under cart item name in cart
add_filter('woocommerce_cart_item_name', 'roast_custom_field', 10, 3);
function roast_custom_field($item_name, $cart_item, $cart_item_key) {
if (!is_cart())
return $item_name;
if (isset($cart_item['roast_option'])) {
$item_name. = '<br /><div class="my-custom-class"><strong>'.__("Roast Level", "woocommerce").
':</strong> '.$cart_item['roast_option'].
'</div>';
}
return $item_name;
}
// Display roast custom fields values under item name in checkout
add_filter('woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 3);
function roast_custom_checkout_cart_item_name($item_qty, $cart_item, $cart_item_key) {
if (isset($cart_item['roast_option'])) {
$item_qty. = '<br /><div class="my-custom-class"><strong>'.__("Roast Level", "woocommerce").
':</strong> '.$cart_item['roast_option'].
'</div>';
}
return $item_qty;
}
// Save chosen slelect field value to each order item as custom meta data and display it everywhere
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4);
function save_order_item_product_fitting_color($item, $cart_item_key, $values, $order) {
if (isset($values['_roast_option'])) {
$key = __('Roast Level', 'woocommerce');
$value = $values['_roast_option'];
$item->update_meta_data($key, $value);
}
}
This code works well in the Storefront theme, but for some reason, it does not work in the theme I bought on Themeforest. Developers can not help, they say that I need to contact the person who wrote this code. And that's why...
I also use code that works in the Storefront and in the purchased theme. Here it is - Show custom fields on the order editing page in WooCommerce
, those. It works great in these two themes.
As I understand it, this is due to the syntax "echo". In the form of "Roast Level" this syntax is, therefore the form is shown. When displaying selected data in the cart or on the checkout page, this syntax is not.
UPDATE
Here is the code that doesn't work without "echo":
// Add custom fields values under cart item name in cart
add_filter('woocommerce_cart_item_name', 'roast_custom_field', 10, 3);
function roast_custom_field($item_name, $cart_item, $cart_item_key) {
if (!is_cart())
return $item_name;
if (isset($cart_item['roast_option'])) {
$item_name. = '<br /><div class="my-custom-class"><strong>'.__("Roast Level", "woocommerce").
':</strong> '.$cart_item['roast_option'].
'</div>';
}
return $item_name;
}
// Display roast custom fields values under item name in checkout
add_filter('woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 3);
function roast_custom_checkout_cart_item_name($item_qty, $cart_item, $cart_item_key) {
if (isset($cart_item['roast_option'])) {
$item_qty. = '<br /><div class="my-custom-class"><strong>'.__("Roast Level", "woocommerce").
':</strong> '.$cart_item['roast_option'].
'</div>';
}
return $item_qty;
}
// Save chosen slelect field value to each order item as custom meta data and display it everywhere
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 4);
function save_order_item_product_fitting_color($item, $cart_item_key, $values, $order) {
if (isset($values['_roast_option'])) {
$key = __('Roast Level', 'woocommerce');
$value = $values['_roast_option'];
$item->update_meta_data($key, $value);
}
}
I ask to change my code so that it has the syntax "echo", so that the selected data is output using "echo". I will be glad for your help!
Following Code should Work
/*---------------------------------------------------------------
*Display Select Box
---------------------------------------------------------------*/
add_action( 'woocommerce_before_add_to_cart_button', 'add_roast_custom_field', 0 );
function add_roast_custom_field() {
global $product;
// If is single product page and have the "roast_checkbox" enabled we display the field
if ( is_product() && $product->get_meta( '_roast_checkbox' ) === 'yes' ) {
echo '<div class="roast_select">';
$select = woocommerce_form_field( 'roast_custom_options', array(
'type' => 'select',
'class' => array('my-field-class form-row-wide'),
'label' => __('Roast Level'),
'required' => false,
'return' => false,
'options' => array(
'' => 'Please select',
'Blue' => 'Blue',
'Rare' => 'Rare',
'Medium Rare' => 'Medium Rare',
'Medium' => 'Medium',
'Medium Well' => 'Medium Well',
'Well Done' => 'Well Done'
)
), '' );
echo $select;
echo '</div>';
}
}
/*---------------------------------------------------------------
* Add as custom cart item data
---------------------------------------------------------------*/
add_filter( 'woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 10, 21 );
function add_custom_cart_item_data($cart_item_data, $product_id, $variation_id ){
if( isset( $_POST['roast_custom_options'] ) ) {
$cart_item_data['roast_option'] = wc_clean( $_POST['roast_custom_options'] );
}
return $cart_item_data;
}
/*---------------------------------------------------------------
* Add custom fields values under cart item name in cart
---------------------------------------------------------------*/
add_filter( 'woocommerce_cart_item_name', 'roast_custom_field', 10, 21 );
function roast_custom_field( $item_name, $cart_item, $cart_item_key ) {
if( ! is_cart() )
return $item_name;
if( isset($cart_item['roast_option']) ) {
$item_name .= '<br /><div class="my-custom-class"><strong>' . __("Roast Level", "woocommerce") . ':</strong> ' . $cart_item['roast_option'] . '</div>';
}
return $item_name;
}
/*---------------------------------------------------------------
* Display roast custom fields values under item name in checkout
---------------------------------------------------------------*/
add_filter( 'woocommerce_checkout_cart_item_quantity', 'roast_custom_checkout_cart_item_name', 10, 21 );
function roast_custom_checkout_cart_item_name( $item_qty, $cart_item, $cart_item_key ) {
if( isset($cart_item['roast_option']) ) {
$item_qty .= '<br /><div class="my-custom-class"><strong>' . __("Roast Level", "woocommerce") . ':</strong> ' . $cart_item['roast_option'] . 'гр.</div>';
}
return $item_qty;
}
/*---------------------------------------------------------------
* Save chosen slelect field value to each order item as custom meta data and display it everywhere
---------------------------------------------------------------*/
add_action('woocommerce_checkout_create_order_line_item', 'save_order_item_product_fitting_color', 10, 21 );
function save_order_item_product_fitting_color( $item, $cart_item_key, $values, $order ) {
if( isset($values['roast_option']) ) {
$key = __('Roast Level', 'woocommerce');
$value = $values['roast_option'];
$item->update_meta_data( $key, $value ,$item->get_id());
}
}
/*--------------------------------------------------------------------
The following code played the important role in your theme
Your add to cart form takes the values when user clicks on add to cart button
After it ajax runs and takes the values from the butoons custom attribute
like data-product_id, data-roast_custom_options So i have added it using jquery
check the code and your site. All the codesprovided by me working now.
--------------------------------------------------------------------*/
add_action('wp_footer','add_footer_script');
function add_footer_script(){
?>
<script>
jQuery('#roast_custom_options').on('change',function(){
var roast_level = jQuery(this).val();
/*console.log(roast_level); */
var button = jQuery(this).closest('form').find('.add_to_cart_button'); console.log(button);
jQuery(button).attr('data-roast_custom_options',roast_level);
});
</script>
<?php
}

How to display woocommerce PRICE on product's BODY text - using SHORTCODE?

I'm writing some details of each prodcuts (short/long description) on woocommerce.
i'd like to insert a SHORTCODE inside the description that shows the current PRICE (sale / regular).
it should look something like that on the backend:
"Buy it now, for only [wc_price] $"
is there any shortcode i can use for that?
This is one the most simple snippet that does what you want without the need of inputting the id manually:
function my_shortcode_product_price() {
$html = '';
global $product;
$price = wc_get_price_to_display( $product, array( 'price' => $product->get_price() ) );
$args = array(
'ex_tax_label' => false,
'currency' => 'USD',
'decimal_separator' => '.',
'thousand_separator' => ' ',
'decimals' => 2,
'price_format' => '%2$s %1$s',
);
$html = "<span>" . wc_price( $price, $args ) . "</span>";
return $html;
}
add_shortcode( 'product_price', 'my_shortcode_product_price' );
The above code goes in the functions.php file of your active theme. After that you can use the shortcode like this:
[product_price]
Here You Go: add this code in your function.php
function short_code_woo_comm_desc( $atts ) {
$atts = shortcode_atts( array(
'id' => null
), $atts, 'tag_for_short_code_price' );
if ( empty( $atts[ 'id' ] ) ) {
return '';
}
$product = wc_get_product( $atts['id'] );
if ( ! $product ) {
return '';
}
return $product->get_price_html();
}
add_shortcode( 'tag_for_short_code_price', 'short_code_woo_comm_desc' );
Use:
[tag_for_short_code_price id="101"]

Display custom fields in variations product page WooCommerce

I've created two custom fields in variations with the following code (Thanks Remi Corso):
functions.php
Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
Create new fields for variations
function variation_settings_fields( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input(
array(
'id' => '_pdf_ficha_tecnica[' . $variation->ID . ']',
'label' => __( 'PDF FICHA TÉCNICA', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'aqui', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pdf_ficha_tecnica', true )
)
);
woocommerce_wp_text_input(
array(
'id' => '_pdf_ficha_caracteristicas[' . $variation->ID . ']',
'label' => __( 'PDF FICHA CARACTERÍSTICAS', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'aqui', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_pdf_ficha_caracteristicas', true )
)
);
}
Save new fields for variations
function save_variation_settings_fields( $post_id ) {
$text_field = $_POST['_pdf_ficha_tecnica'][ $post_id ];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_pdf_ficha_tecnica', esc_attr( $text_field ) );
}
$text_field = $_POST['_pdf_ficha_caracteristicas'][ $post_id ];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_pdf_ficha_caracteristicas', esc_attr( $text_field ) );
}
}
These custom fields store URLs and will be displayed as links <a href>. I looking to display these fields but I'm having a lot of trouble finding the right solution.
Can anyone guide me?
Should I focus on file "variable.php"?
And the JS?
Or can I render the fields by hooks?
The following code I created works perfectly. I am new to JS and I'm sure can be improved. I hope that will be helpful. To create Custom Fields reads the post of REMI.
Explanation: With "WC_Product Variable" object can display the Custom Fields of product variation,
To display these fields I used jquery, the contents of the span "sku" will be our reference as shown on the product page. This code in the "variations.php" file.
<?php
// With "WC_Product Variable" object I get the Custom Fields variations.
$product_id = $product->id;
$variation = new WC_Product_Variable( $product_id );
$arrvariations = $variation->get_children ();
// With foreach construct the div that will contain the Custom Fields
foreach ($arrvariations as $varid) {
$cfvalone = get_post_meta( $varid, '_custom_field_one', true );
$cfvaltwo = get_post_meta( $varid, '_custom_field_two', true );
// Check the Custom Fields are not empty
if (!empty($cfvalone) or !empty($cfvaltwo) ) {
$cfonecont = get_post_meta( $varid, '_custom_field_one', true );
$cftwocont = get_post_meta( $varid, '_custom_field_two', true );
$varsku = get_post_meta( $varid, '_sku', true );
// Built the DIV and embed SKU of the variation to be processed later by JS.
?>
<div class="varskudiv" data-varskudiv="<? echo $varsku;?>" style="display:none;">
<?php if (!empty($cfonecont)) {?>
CUSTOM FIELD ONE
<?php } ?>
<?php if (!empty($cftwocont)) {?>
CUSTOM FIELD TWO
<?php } ?>
</div>
<? }}?>
<br/>
<script>
jQuery(document).ready(function( $ ) {
// As we will take the contents of SPAN "sku" to create the JS
//we must consider that this SPAN is complete once the screen is loaded.
$(window).bind("load", function() {
woosku = $(".sku").text();
// Now we map the DIV we created "varskudiv" and load those values in an ARRAY
wooarrsku = $('div.varskudiv').map(function(){
return $(this).data('varskudiv');
}).get();
// Now we make loop, if the values match show the DIV.
var indexsku;
for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
if (woosku == wooarrsku[indexsku]) {
$('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
}
}
});
// Once loaded the screen, if the SPAN "sku" changes, start the process again and hide the previous DIV displayed.
$('.sku').bind("DOMSubtreeModified",function(){
woosku = $(".sku").text();
wooarrsku = $('div.varskudiv').map(function(){
return $(this).data('varskudiv');
}).get();
var indexsku;
for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
if (woosku == wooarrsku[indexsku]) {
$('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
}
else {$('.varskudiv[data-varskudiv="'+ wooarrsku[indexsku] +'"]').css( "display", "none" );
}
}
});
});
</script>

Delete metadata in WP admin custom columns

I want to delete metadata from the admin panel of my custom post in WP. I created my custom column and display the desired metadata inside but when I try to create a button to delete the metadata nothing happens.
My code tries to delete the metadata and user post with foreach.
Any help would be much appreciated.
code Done! 05/05/15:
Change Admin Columns:
add_action( "manage_favor_posts_columns", "change_columns" );
function change_columns( $cols ) {
$cols = array(
'cb' => '<input type="checkbox" />',
'title' => __( 'Título del favor', 'trans' ),
'usuarios_registrados' => __('Usuarios Registrados', 'trans'),
'date' => __( 'Fecha publicación', 'trans' ),
);
return $cols;
}
add_action( "manage_posts_custom_column", "custom_columns_phi", 10, 2 );
Add output metas and delete link in columns:
function custom_columns_phi( $column, $post_id ) {
switch ( $column ) {
case "usuarios_registrados":
$favor_post_meta_datos = get_post_meta ($post_id, 'usuarios_favores');
foreach($favor_post_meta_datos as $term_post){
$user_phi_name = get_userdata ($term_post);
?>
<li><?echo $user_phi_name->first_name;?> | Cancelar</li>
<?
}
break;
}
}
Add init function in admin screen:
function phi_admin_preload_get () {
if ( isset($_GET['value_phi_user'] )) {
$phi_get_post = $_GET['value_phi_post'];
$phi_get_user = $_GET['value_phi_user'];
delete_post_meta ($phi_get_post, 'usuarios_favores', $phi_get_user);
delete_user_meta ($phi_get_user, 'favores', $phi_get_post );
}
}
add_action ('admin_init', 'phi_admin_preload_get');
Done!
Change Admin Columns:
add_action( "manage_favor_posts_columns", "change_columns" );
function change_columns( $cols ) {
$cols = array(
'cb' => '<input type="checkbox" />',
'title' => __( 'Título del favor', 'trans' ),
'usuarios_registrados' => __('Usuarios Registrados', 'trans'),
'date' => __( 'Fecha publicación', 'trans' ),
);
return $cols;
}
add_action( "manage_posts_custom_column", "custom_columns_phi", 10, 2 );
Add output metas and delete link in columns:
function custom_columns_phi( $column, $post_id ) {
switch ( $column ) {
case "usuarios_registrados":
$favor_post_meta_datos = get_post_meta ($post_id, 'usuarios_favores');
foreach($favor_post_meta_datos as $term_post){
$user_phi_name = get_userdata ($term_post);
?>
<li><?echo $user_phi_name->first_name;?> | Cancelar</li>
<?
}
break;
}
}
Add init function in admin screen:
function phi_admin_preload_get () {
if ( isset($_GET['value_phi_user'] )) {
$phi_get_post = $_GET['value_phi_post'];
$phi_get_user = $_GET['value_phi_user'];
delete_post_meta ($phi_get_post, 'usuarios_favores', $phi_get_user);
delete_user_meta ($phi_get_user, 'favores', $phi_get_post );
}
}
add_action ('admin_init', 'phi_admin_preload_get');

Resources