Add Clear Button on Search Forms

[baranozdemir.com]

Hello, I want to add a clear button to search forms. When I click on the button the input value will be removed.

I added this one but it doesn’t work well:

function baran_add_clear_icon_on_search_forms() {
	?>
	<style>
		.clear-icon:before {
			content: "\f112";
			font-family: "woodmart-font";
			color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
		}

		.clear-icon {
			position: absolute;
			right: 30px;
			top: 50%;
			transform: translateY(-50%);
		}
	</style>
	<script type="text/javascript">
		jQuery('form.woodmart-ajax-search').append('<div class="clear-icon"></div>');
		let clearIcon = jQuery('.clear-icon');
		let formInput = jQuery('form.woodmart-ajax-search').find('input[type="text"]');
	
		clearIcon.on('click', function(e) {
			e.preventDefault();
			
			formInput.val('').attr('value','');
			if (formInput.val().length <= 0) {
				jQuery(this).hide();
			}
		});
	
		if (formInput.val().length > 0) {
			clearIcon.show();
		} else {
			clearIcon.hide();
		}
	
		formInput.on('change keydown paste input', function(e) {
			let length = e.target.value.length;
			if (length > 0) {
				clearIcon.show();
			} else {
				clearIcon.hide();
			}
		});
	</script>
	<?php
}
add_action( 'wp_footer', 'baran_add_clear_icon_on_search_forms' );

You can test it on mobile.

• This topic was modified 6 months, 2 weeks ago by baranozdemir.com. Reason: Added new info

Hello,

Sorry but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

Thank you.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts