I'm trying to customize the input buttons, but when I update the amount by the custom buttons, the value doesn't update.
I'm copying overwriting the file in the path: woocommerce-booking/booking-form/number.php
This is another file template that I believe is useful to understand my need: woocommerce-booking/templates/single-product/add-to-cart/booking.php
<p class="form-field form-field-wide <?php echo esc_attr( implode( ' ', $class ) ); ?>">
<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?>:</label>
<!-- Custom Input Button -->
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus">-</button>
<input type="number" value="<?php echo ( ! empty( $min ) ) ? esc_attr( $min ) : 0; ?>"
step="<?php echo ( isset( $step ) ) ? esc_attr( $step ) : ''; ?>"
min="<?php echo ( isset( $min ) ) ? esc_attr( $min ) : ''; ?>"
max="<?php echo ( isset( $max ) ) ? esc_attr( $max ) : ''; ?>" name="<?php echo esc_attr( $name ); ?>"
id="<?php echo esc_attr( $name ); ?>" /> <?php echo ( ! empty( $after ) ) ? esc_html( $after ) : ''; ?>
<!-- Custom Input Button -->
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">+</button>
</p>
Related
I'm trying to create a food delivery web page with the wordpress restropress plugin,
the page looks like this: https://restropress.magnigenie.com/demo/food-items/
And the problem I have is that in the checkout form I want to remove the city field
since being a delivery I obviously only make deliveries in my city
and I don't want my customers to go through that redundancy.
I would also like to change the postcode field from text to a drop-down.
I have tried with some action hooks setting as "unset" the field "city" but nothing.
In the html of the page I managed to make the changes directly
but when I updated the plug-in changes were lost.
Can you help me? This is the plugins code that I'm trying to modify:
<fieldset id="rpress_checkout_order_details">
<legend><?php echo apply_filters( 'rpress_checkout_order_details_text', esc_html__( 'Order Details', 'restropress' ) ); ?></legend>
<?php do_action( 'rpress_purchase_form_before_order_details' ); ?>
<?php
if( rpress_selected_service() == 'delivery' ) :
$customer = RPRESS()->session->get( 'customer' );
$customer = wp_parse_args( $customer, array( 'delivery_address' => array(
'address' => '',
'flat' => '',
'city' => '',
'postcode' => '',
) ) );
$customer['delivery_address'] = array_map( 'sanitize_text_field', $customer['delivery_address'] );
if( is_user_logged_in() ) {
$user_address = get_user_meta( get_current_user_id(), '_rpress_user_delivery_address', true );
foreach( $customer['delivery_address'] as $key => $field ) {
if ( empty( $field ) && ! empty( $user_address[ $key ] ) ) {
$customer['delivery_address'][ $key ] = $user_address[ $key ];
} else {
$customer['delivery_address'][ $key ] = '';
}
}
}
$customer['delivery_address'] = apply_filters( 'rpress_delivery_address', $customer['delivery_address'] );
?>
<p id="rpress-street-address" class="rp-col-md-6 rp-col-sm-12">
<label class="rpress-street-address" for="rpress-street-address">
<?php esc_html_e('Street Address', 'restropress') ?>
<span class="rpress-required-indicator">*</span>
</label>
<input class="rpress-input" type="text" name="rpress_street_address" id="rpress-street-address" placeholder="<?php esc_html_e('Street Address', 'restropress'); ?>" value="<?php echo $customer['delivery_address']['address']; ?>" />
</p>
<p id="rpress-apt-suite" class="rp-col-md-6 rp-col-sm-12">
<label class="rpress-apt-suite" for="rpress-apt-suite">
<?php esc_html_e('Apartment, suite, unit etc. (optional)', 'restropress'); ?>
</label>
<input class="rpress-input" type="text" name="rpress_apt_suite" id="rpress-apt-suite" placeholder="<?php esc_html_e('Apartment, suite, unit etc. (optional)', 'restropress'); ?>" value="<?php echo $customer['delivery_address']['flat']; ?>" />
</p>
<p id="rpress-city" class="rp-col-md-6 rp-col-sm-12">
<label class="rpress-city" for="rpress-city">
<?php _e('Town / City', 'restropress') ?>
<span class="rpress-required-indicator">*</span>
</label>
<input class="rpress-input" type="text" name="rpress_city" id="rpress-city" placeholder="<?php _e('Town / City', 'restropress') ?>" value="<?php echo $customer['delivery_address']['city']; ?>" />
</p>
<p id="rpress-postcode" class="rp-col-md-6 rp-col-sm-12">
<label class="rpress-postcode" for="rpress-postcode">
<?php _e('Postcode / ZIP', 'restropress') ?>
<span class="rpress-required-indicator">*</span>
</label>
<input class="rpress-input" type="text" name="rpress_postcode" id="rpress-postcode" placeholder="<?php _e('Postcode / ZIP', 'restropress') ?>" value="<?php echo $customer['delivery_address']['postcode']; ?>" />
</p>
<?php endif; ?>
<p id="rpress-order-note" class="rp-col-sm-12">
<label class="rpress-order-note" for="rpress-order-note"><?php echo sprintf( __('%s Instructions', 'restropress'), rpress_selected_service( 'label' ) ); ?></label>
<textarea name="rpress_order_note" class="rpress-input" rows="5" cols="8" placeholder="<?php echo sprintf( __('Add %s instructions (optional)', 'restropress'), strtolower( rpress_selected_service( 'label' ) ) ); ?>"></textarea>
</p>
<?php do_action( 'rpress_purchase_form_order_details' ); ?>
<?php do_action( 'rpress_purchase_form_order_details_fields' ); ?>
</fieldset>
I put this following hook in the functions.php file and it didn't work:
function wp_edit_checkout_fields($fields){
unset($fields['delivery_adress']['city']);
return $fields;
}
add_filter('rpress_purchase_form_order_details_fields', 'wp_edit_checkout_fields');
Note that, there is do_action( 'rpress_purchase_form_order_details_fields' ); in the plugin code. It is usually used with add_action, but not with add_filter.
Maybe you could take advantage of this filter call:
$customer['delivery_address'] = apply_filters( 'rpress_delivery_address', $customer['delivery_address'] );
Try something like this (put in your function.php file):
function your_custom_function($delivery_address) {
// Try to somehow process the city field here...
// First, you could output a variable
// to understand the data structure
print_r($delivery_address);
// and return the changed address
return $delivery_address;
}
add_filter( 'rpress_delivery_address', 'your_custom_function' );
Docs - https://developer.wordpress.org/reference/functions/add_filter/
I'm trying to change radio buttons to dropdowns using css. The site is built on wordpress but is it possible to change the radio buttons to dropdowns using only css or do i need to add javascript somewhere?
So my end game is to change "delivery" radio buttons to a dropdown. They have their own class.
When i search it keeps coming back to this code. Am i missing something here or is it a case of i should forget about the dropdown?
<div class="wcsatt-options-wrapper" <?php echo count( $options ) === 1 ? 'style="display:none;"' : '' ?>><?php
if ( $prompt ) {
echo $prompt;
} else {
?><h3><?php
_e( 'Choose a subscription plan:', 'woocommerce-subscribe-all-the-things' );
?></h3><?php
}
?><ul class="wcsatt-options-product"><?php
foreach ( $options as $option ) {
?><li class="<?php echo esc_attr( $option[ 'class' ] ); ?>">
<label>
<input type="radio" name="convert_to_sub_<?php echo absint( $product_id ); ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php checked( $option[ 'selected' ], true, true ); ?> />
<?php echo '<span class="' . esc_attr( $option[ 'class' ] ) . '-details">' . $option[ 'description' ] . '</span>'; ?>
</label>
</li><?php
}
?></ul>
Try replacing the "ul" tag with following code.
<select class="anyting-you-wish" name="convert_to_sub_<?php echo absint( $product_id ); ?>">
<?php foreach ( $options as $option ) { ?>
$selected = ($option[ 'selected' ] == true ? 'selected="selected"' : null);
<option data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php echo($selected); ?> >
<?php echo($option[ 'description' ]); ?>
</option>
<?php } ?>
</select>
Kindly let me know if this works.
i work on a project with woo.
On the mobile version of the site, the cart is a popup window.
When the customer adds many different products he must scroll down to see the buttons "view cart" "pay".
I try to add an autoscroll js code. When someone opens the cart it must scroll down automatically and stops at buttons "view cart" "pay".
I found some codes for "autoscroll to div" but none of them worked for me.
One simple js code i play with is this
$('#start').click(function() {
$('html,body').animate({
scrollTop: $('#bodycontainer').position().top
}, 1000 );});
but nothing happened.
Any help?
Thanks
You are trying to scroll the wrong thing, if it is the container that has the scroll. Replace it with this:
$('#start').click(function() {
$('#bodycontainer').animate({
scrollTop: 10000
}, 1000 );});
Now if you aren't using a container, then you may wish to add one.
I totally confused
My code for mini-cart is this
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
global $woocommerce;
?>
<?php do_action( 'woocommerce_before_mini_cart' ); ?>
<div class="cart_list <?php echo esc_attr( $args['list_class'] ); ?>">
<?php if ( ! WC()->cart->is_empty() ) : ?>
<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );
if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
$product_name = apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key );
$thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
$product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
$product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
?>
<div class="media widget-product">
<div class="media-left">
<a href="<?php echo esc_url( $product_permalink ); ?>" class="image pull-left">
<?php echo trim($thumbnail); ?>
</a>
</div>
<div class="cart-main-content media-body">
<h3 class="name">
<a href="<?php echo esc_url( $product_permalink ); ?>">
<?php echo trim($product_name); ?>
</a>
</h3>
<p class="cart-item">
<?php echo wc_get_formatted_cart_item_data( $cart_item ); ?>
<?php echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s × %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?>
</p>
<?php
echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
'×',
esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
__( 'Remove this item', 'opal_drop' ),
esc_attr( $product_id ),
esc_attr( $cart_item_key ),
esc_attr( $_product->get_sku() )
), $cart_item_key );
?>
</div>
</div>
<?php
}
}
?>
<?php else : ?>
<div class="empty"><?php esc_html_e( 'No products in the cart.', 'opal_drop' ); ?></div>
<?php endif; ?>
</div><!-- end product list -->
<?php if ( ! WC()->cart->is_empty() ) : ?>
<p class="total"><strong><?php esc_html_e( 'Subtotal', 'opal_drop' ); ?>:</strong> <?php echo WC()->cart->get_cart_subtotal(); ?></p>
<?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?>
<p class="buttons clearfix">
<?php esc_html_e( 'View Cart', 'opal_drop' ); ?>
<?php esc_html_e( 'Checkout', 'opal_drop' ); ?>
</p>
<?php endif; ?>
<?php do_action( 'woocommerce_after_mini_cart' ); ?>
and i try this
jQuery(document).ready(function($){
if ( $(window).width() < 768 || window.Touch) {
$('html, body').animate({
scrollTop: $("#cart-main-content .media-body").offset().top
}, 2000);
}
});
With no luck. Now i practise with jquery
i have wp theme that im modifying to add children age to it each room would have adults , kids & kid age
screenshot
this code below is the table fetch how many room there is & show each input type for each room
<tbody>
<?php foreach ( $room_ids as $room_id => $available_rooms ) :
$max_adults = get_post_meta( $room_id, '_room_max_adults', true );
$max_kids = get_post_meta( $room_id, '_room_max_kids', true );
if ( empty( $max_adults ) || ! is_numeric( $max_adults ) ) $max_adults = 0;
if ( empty( $max_kids ) || ! is_numeric( $max_kids ) ) $max_kids = 0;
?>
<tr>
<td>
<div class="thumb_cart">
<?php echo get_the_post_thumbnail( $room_id, 'thumbnail' ); ?>
</div>
<span class="item_cart"><?php echo esc_html( get_the_title( $room_id ) ); ?></span>
<input type="hidden" name="room_type_id[]" value="<?php echo esc_attr( $room_id ) ?>">
</td>
<td>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms ) ?>">
<input type="text" class="qty2 form-control room-quantity" name="rooms[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'rooms' ) ) ?>">
</div>
</td>
<td>
<div class="numbers-row" data-min="0" <?php if ( ! empty( $max_adults ) ) echo 'data-max="' . esc_attr( $max_adults * $available_rooms ) . '" data-per-room="' . esc_attr( $max_adults ) . '"'; ?>>
<input type="text" class="qty2 form-control room-adults" name="adults[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'adults' ) ) ?>">
</div>
</td>
<td>
<?php if ( ! empty( $max_kids ) ) : ?>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms * $max_kids ) ?>" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-kids" name="kids[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'kids' ) ) ?>">
</div>
<td>
<div class="numbers-row" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" id="kid1" class="qty2 form-control room-child_ages1" name="child_ages1[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages1' ) ) ?>">
</div>
<div class="numbers-row" id="kid2" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages2" name="child_ages2[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages2' ) ) ?>">
</div>
<div class="numbers-row" id="kid3" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages3" name="child_ages3[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages3' ) ) ?>">
</div>
<div class="numbers-row" id="kid4" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages4" name="child_ages4[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages4' ) ) ?>">
</div>
<?php endif; ?>
</td>
<td><strong><?php $total = $cart->get_room_field( $uid, $room_id, 'total' ); if ( ! empty( $total ) ) echo ct_price( $cart->get_room_field( $uid, $room_id, 'total' ) ) ?></strong></td>
</tr>
<?php endforeach; ?>
</tbody>
what im trying to add is an way on how to show/hide children age depending on how many kids there is i made this javascript
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids >= 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids >= 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids >= 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids >= 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});
my problem is when i change kids on any other row it affect children age of the first row instead of it's own row
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids == 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids == 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids == 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids == 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});
When you click on the drop-down menu next to "size" or "gender" in Firefox, the menu appears for a split second and then disappears. This happens on all of the individual product pages for this site. It seems to be working fine in other browsers.
I cannot figure out for the life of me why this is occurring.
Any ideas??
Here's the link:
http://chathamivy.com/shop/the-coastal-collection/catch-of-the-day/
This is the PHP for the form:
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
<?php if ( ! empty( $available_variations ) ) : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php $loop = 0; foreach ( $attributes as $name => $options ) : $loop++; ?>
<tr>
<td class="label"><label for="<?php echo sanitize_title($name); ?>"><?php echo wc_attribute_label( $name ); ?></label></td>
<td class="value"><select id="<?php echo esc_attr( sanitize_title( $name ) ); ?>" name="attribute_<?php echo sanitize_title( $name ); ?>">
<option value=""><?php echo __( 'Choose an option', 'woocommerce' ) ?>…</option>
<?php
if ( is_array( $options ) ) {
if ( isset( $_REQUEST[ 'attribute_' . sanitize_title( $name ) ] ) ) {
$selected_value = $_REQUEST[ 'attribute_' . sanitize_title( $name ) ];
} elseif ( isset( $selected_attributes[ sanitize_title( $name ) ] ) ) {
$selected_value = $selected_attributes[ sanitize_title( $name ) ];
} else {
$selected_value = '';
}
// Get terms if this is a taxonomy - ordered
if ( taxonomy_exists( $name ) ) {
$orderby = wc_attribute_orderby( $name );
switch ( $orderby ) {
case 'name' :
$args = array( 'orderby' => 'name', 'hide_empty' => false, 'menu_order' => false );
break;
case 'id' :
$args = array( 'orderby' => 'id', 'order' => 'ASC', 'menu_order' => false, 'hide_empty' => false );
break;
case 'menu_order' :
$args = array( 'menu_order' => 'ASC', 'hide_empty' => false );
break;
}
$terms = get_terms( $name, $args );
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) )
continue;
echo '<option value="' . esc_attr( $term->slug ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $term->slug ), false ) . '>' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '</option>';
}
} else {
foreach ( $options as $option ) {
echo '<option value="' . esc_attr( sanitize_title( $option ) ) . '" ' . selected( sanitize_title( $selected_value ), sanitize_title( $option ), false ) . '>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</option>';
}
}
}
?>
</select> <?php
if ( sizeof( $attributes ) == $loop )
echo '<a class="reset_variations" href="#reset">' . __( 'Clear selection', 'woocommerce' ) . '</a>';
?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap" style="display:none;">
<?php do_action( 'woocommerce_before_single_variation' ); ?>
<div class="single_variation"></div>
<div class="variations_button">
<?php woocommerce_quantity_input(); ?>
<button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
</div>
<input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
<input type="hidden" name="variation_id" value="" />
<?php do_action( 'woocommerce_after_single_variation' ); ?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php else : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php endif; ?>
do you use any other language to generate these dropdown menus?
As it written on your page it works fine for me.
Check this fiddle.
<select id="size" name="attribute_size">
<option value="">Choose an option…</option>
<option class="active" value="extra-small">Extra Small</option>
<option class="active" value="small">Small</option>
<option class="active" value="medium">Medium</option>
<option class="active" value="large">Large</option>
<option class="active" value="extra-large">Extra Large</option>
</select>
<select id="gender" name="attribute_gender">
<option value="">Choose an option…</option>
<option class="active" value="womens">Womens</option>
<option class="active" value="youth">Youth</option>
</select>