How to modify a payment form in a wordpress plugin? - javascript

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/

Related

WooCommerce Bookings - How to trigger ajax recalc with input custom buttons

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>

Changing radio buttons to dropdown

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.

How can I show or hide specific element in Javascript?

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) );
}
});

How to invite friends on wordpress without being logged in to the system [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So I downloaded this great addon for wordpress called Invite Friends to Register - Link
And I wanted to tweak the code so that anyone who sees this page can invite their friends.
Can anyone help please? Much appreciated!
Here is the code
Thanks!
/**
* returns the javascript and form code for an ajax invite form
*/
function invfr_form() {
global $post, $invfr_add_scripts;
$invfr_add_scripts = true;
// only allow the form to be used if the user is logged in.
// Offer a login link that redirects back to the page the form
// was trying to be called on
if ( !is_user_logged_in() )
$output = sprintf( __( 'You must be logged in to invite friends. Log in', 'invfr'), wp_login_url( get_permalink( $post->ID ) ) );
else {
$user = wp_get_current_user();
$user_id = $user->ID;
$user_name = $user->user_firstname ? $user->user_firstname : $user->user_nicename;
$user_email = $user->user_email;
ob_start(); ?>
<script type="text/javascript">
var jQuery = jQuery.noConflict();
jQuery(window).load(function(){
jQuery('#invfr_form').submit(function() {
// change visual indicators
jQuery('td').removeClass('error');
jQuery('.loading').show();
jQuery('.submit input').attr('disabled', 'disabled');
// validate and process form here
var str = jQuery(this).serialize();
jQuery.ajax({
type: 'POST',
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
data: str,
success: function(msg) {
jQuery('#invfr_note').ajaxComplete(function(event, request, settings) {
msg = msg.replace(/(\s+)?.$/, "");
if( msg == 'sent' ) {
result = '<div class="updated"><p><?php _e( 'Your invitation has been sent! Send another?', 'invfr' ); ?></p></div>';
jQuery('#invfr_form input[type=text], #invfr_form input[type=email]').val('');
} else {
//loop through the error items to indicate which fields have errors
msg = msg.replace(/[\[\]']+/g,'');
msg = msg.split(',');
jQuery.each( msg, function ( i, id ) {
id = id.replace(/["']{1}/g, '');
jQuery(id).parent('td').addClass('error');
});
result = '<div class="error"><p><?php _e( '<strong>ERROR:</strong> Check your form for the errors which are highlighted below.', 'invfr' ); ?></p></div>';
//result = msg;
msg = '';
}
jQuery(this).html(result);
// visual indicators
jQuery('.loading').hide();
jQuery('.submit input').removeAttr('disabled');
});
}
});
return false;
});
});
</script>
<div id="invfr_form_container">
<p><?php echo sprintf( __( 'Enter your friend’s name and email address to send them an invitation to register at %s', 'invfr' ), get_option( 'blogname' ) ); ?>
<div id="invfr_note"></div>
<form id="invfr_form" action="">
<table class="form-table">
<thead>
<tr>
<th><?php _e( 'Friend’s Name', 'invfr' ); ?></th>
<th><?php _e( 'Friend’s Email', 'invfr' ); ?></th>
<th><a class="invfr_add button" href="#">+</a></th>
</tr>
</thead>
<tr>
<td valign="top"><label for="friend_name-0" class="screen-reader-text"><?php _e( 'Friend’s Name', 'invfr' ); ?></label>
<input type="text" name="friend_name[0]" id="friend_name-0" value="" />
<span class="error-msg"><?php _e( 'Enter your friend’s name', 'invfr' ); ?></span>
</td>
<td valign="top"><label for="friend_email-0" class="screen-reader-text"><?php _e( 'Friend’s Email', 'invfr' ); ?></label>
<input type="email" name="friend_email[0]" id="friend_email-0" value="" />
<span class="error-msg"><?php _e( 'Enter a valid email address', 'invfr' ); ?></span>
</td>
<td><a class="invfr_remove button" href="#">-</a></td>
</tr>
</table>
<p class="submit"><input type="submit" value="<?php _e( 'Send Invitation', 'invfr' ); ?>" class="button button-primary" />
<img src="<?php echo get_option( 'siteurl'); ?>/wp-admin/images/loading.gif" class="loading" /></p>
<input type="hidden" name="user_id" value="<?php echo $user_id; ?>" />
<input type="hidden" name="user_name" value="<?php echo $user_name; ?>" />
<input type="hidden" name="user_email" value="<?php echo $user_email; ?>" />
<input type="hidden" name="action" value="invfr_process_ajax"/>
</form>
</div>
<?php
$output = ob_get_contents();
ob_clean();
}
return $output;
}
// Template tag
if ( !function_exists( 'invite_friends' ) ) {
function invite_friends( ) {
echo invfr_form();
}
}
// Shortcode
add_shortcode( 'invite_friends', 'invfr_form' );
/**
* callback for the users page that allows you to invite friends from the admin
*/
function invfr_invite_friends_page() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php _e( 'Invite Friends', 'invfr' ); ?></h2>
<?php settings_errors(); ?>
<?php echo invfr_form(); ?>
</div>
<?php
}
It looks like it might be as easy as just removing the conditional statement that checks if the user is logged in:
if ( !is_user_logged_in() )
$output = sprintf( __( 'You must be logged in to invite friends. Log in', 'invfr'), wp_login_url( get_permalink( $post->ID ) ) );
else {
and the closing } wherever it is

Table dropdown menu disappears in Firefox

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>

Categories