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>
Related
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>
I'm completly newbie with javascript but I was able to get this script that I found to work partially. I mean if I type in the first form field and hit 'Enter' the form perform the http request with my options.
I think the script part at the bottom is not working or missing something. Since is using jQuery.
So I want to make this script more simple, just add a button or link to call a action do the search and show the results page.
?><section class="content-page page-produtos">
<div class="wrp-content">
<div class="container box-content">
<h1>Engates</h1>
<form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" class="src-group">
<label for="pesquisar">
<p>Pesquisar</p>
<input type="text" name="engate" value="<?php echo $_GET['engate']; ?>" />
</label>
<label for="montador">
<p>Montadora</p>
<select name="montadora">
<option value="">Selecione uma Montadora</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'montadora',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$montadoras = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('montadora'), $montadoras) && get_field('montadora') != ""){
array_push($montadoras, get_field('montadora'));
?>
<option value="<?php the_field('montadora'); ?>"<?php if($_GET['montadora'] == get_field('montadora')){ ?> selected="selected"<?php } ?>><?php the_field('montadora'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
<label for="modelo">
<p>Modelo</p>
<select name="modelo">
<option value="">Selecione um Modelo</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'modelo',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$modelos = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('modelo'), $modelos) && get_field('modelo') != ""){
array_push($modelos, get_field('modelo'));
?>
<option value="<?php the_field('modelo'); ?>"<?php if($_GET['modelo'] == get_field('modelo')){ ?> selected="selected"<?php } ?>><?php the_field('modelo'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
</form>
</div>
</div> <!-- fim wrp-content -->
<div class="container box-content">
<?php//do_shortcode('[facetwp template="example"]');?>
<?php
$filtro = array();
if($_GET['montadora'] != ""){
$montadora = array(
'key' => 'montadora',
'value' => $_GET['montadora'],
'compare' => '=',
);
array_push($filtro, $montadora);
}
if($_GET['modelo'] != ""){
$modelo = array(
'key' => 'modelo',
'value' => $_GET['modelo'],
'compare' => '=',
);
array_push($filtro, $modelo);
}
if($_GET['ano'] != ""){
$ano = array(
'key' => 'ano',
'value' => $_GET['ano'],
'compare' => '=',
);
array_push($filtro, $ano);
}
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
query_posts(
array(
'post_type' => 'engates',
'posts_per_page' => 8,
'paged' => $paged,
'meta_query' => array($filtro),
's' => $_GET['engate'],
'orderby' => 'meta_value',
'meta_key' => 'modelo',
'order' => 'ASC'
)
);
if(have_posts()):
while(have_posts()): the_post();
?>
<article>
<img width="270" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" class="attachment-full size-full wp-post-image" alt="" />
<div class="paragraph-group">
<p><em>cod: <?php the_field('codigo'); ?></em></p>
<p><?php the_field('modelo'); ?></p>
<p><?php the_field('montadora'); ?></p>
<p><?php the_field('ano'); ?></p>
<!-- Saiba Mais -->
</div>
</article>
<?php
endwhile;
?>
<div style="clear:both"></div>
<?php
wp_paginate();
else:
echo "<p>Nenhum produto foi encontrado.</p>";
endif;
?>
</div> <!-- fim container -->
</section>
<script>
jQuery(function($){
$('#form_filtro_produto input, #form_filtro_produto select').on('change', function(){
$('#form_filtro_produto').submit();
});
});
</script>
All you need to do is include <button>Submit</button> within the <form> element and it will trigger the form's submit event to your form's action.
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) );
}
});