diff --git a/assets/js/base/components/filter-reset-button/index.tsx b/assets/js/base/components/filter-reset-button/index.tsx
new file mode 100644
index 00000000000..17bbb3434b3
--- /dev/null
+++ b/assets/js/base/components/filter-reset-button/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import Label from '@woocommerce/base-components/label';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface FilterResetButtonProps {
+	className?: string;
+	label?: string;
+	onClick: () => void;
+	screenReaderLabel?: string;
+}
+
+const FilterResetButton = ( {
+	className,
+	/* translators: Reset button text for filters. */
+	label = __( 'Reset', 'woo-gutenberg-products-block' ),
+	onClick,
+	screenReaderLabel = __( 'Reset filter', 'woo-gutenberg-products-block' ),
+}: FilterResetButtonProps ): JSX.Element => {
+	return (
+		<button
+			className={ classNames(
+				'wc-block-components-filter-reset-button',
+				className
+			) }
+			onClick={ onClick }
+		>
+			<Label label={ label } screenReaderLabel={ screenReaderLabel } />
+		</button>
+	);
+};
+
+export default FilterResetButton;
diff --git a/assets/js/base/components/filter-reset-button/style.scss b/assets/js/base/components/filter-reset-button/style.scss
new file mode 100644
index 00000000000..3375f7c77e9
--- /dev/null
+++ b/assets/js/base/components/filter-reset-button/style.scss
@@ -0,0 +1,14 @@
+.wc-block-components-filter-reset-button {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: inherit;
+
+	&:not([disabled]):hover {
+		text-decoration: underline;
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
diff --git a/assets/js/base/components/filter-submit-button/index.tsx b/assets/js/base/components/filter-submit-button/index.tsx
index 3dc739eb2d2..4a320aa68e2 100644
--- a/assets/js/base/components/filter-submit-button/index.tsx
+++ b/assets/js/base/components/filter-submit-button/index.tsx
@@ -22,7 +22,7 @@ const FilterSubmitButton = ( {
 	className,
 	disabled,
 	/* translators: Submit button text for filters. */
-	label = __( 'Go', 'woo-gutenberg-products-block' ),
+	label = __( 'Apply', 'woo-gutenberg-products-block' ),
 	onClick,
 	screenReaderLabel = __( 'Apply filter', 'woo-gutenberg-products-block' ),
 }: FilterSubmitButtonProps ): JSX.Element => {
@@ -30,6 +30,7 @@ const FilterSubmitButton = ( {
 		<button
 			type="submit"
 			className={ classNames(
+				'wp-block-button__link',
 				'wc-block-filter-submit-button',
 				'wc-block-components-filter-submit-button',
 				className
diff --git a/assets/js/base/components/filter-submit-button/style.scss b/assets/js/base/components/filter-submit-button/style.scss
index 5f35f8407db..8d05eb31ebf 100644
--- a/assets/js/base/components/filter-submit-button/style.scss
+++ b/assets/js/base/components/filter-submit-button/style.scss
@@ -1,4 +1,5 @@
 .wc-block-components-filter-submit-button {
+	border: none;
 	display: block;
 	margin-left: auto;
 	white-space: nowrap;
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index d1f31432c94..372d46927a0 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -12,6 +12,7 @@ import {
 import classnames from 'classnames';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { Currency, isObject } from '@woocommerce/types';
+import { useDebouncedCallback } from 'use-debounce';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
+import FilterResetButton from '../filter-reset-button';
 
 export interface PriceSliderProps {
 	/**
@@ -62,6 +64,10 @@ export interface PriceSliderProps {
 	 * Whether to show input fields for the values or not.
 	 */
 	showInputFields?: boolean;
+	/**
+	 * Whether to show input fields inline with the slider or not.
+	 */
+	inlineInput?: boolean;
 	/**
 	 * What step values the slider uses.
 	 */
@@ -78,6 +84,7 @@ const PriceSlider = ( {
 	currency,
 	showInputFields = true,
 	showFilterButton = false,
+	inlineInput = true,
 	isLoading = false,
 	onSubmit = () => void 0,
 }: PriceSliderProps ): JSX.Element => {
@@ -274,6 +281,8 @@ const PriceSlider = ( {
 		[ onChange, stepValue, minPriceInput, maxPriceInput ]
 	);
 
+	const debouncedUpdateQuery = useDebouncedCallback( onSubmit, 600 );
+
 	const classes = classnames(
 		'wc-block-price-filter',
 		'wc-block-components-price-slider',
@@ -301,133 +310,149 @@ const PriceSlider = ( {
 		maxPriceInput / 10 ** currency.minorUnit
 	);
 
+	const slider = (
+		<div
+			className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
+			onMouseMove={ findClosestRange }
+			onFocus={ findClosestRange }
+		>
+			{ hasValidConstraints && (
+				<div aria-hidden={ showInputFields }>
+					<div
+						className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
+						style={ progressStyles as React.CSSProperties }
+					/>
+					<input
+						type="range"
+						className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
+						aria-label={ __(
+							'Filter products by minimum price',
+							'woo-gutenberg-products-block'
+						) }
+						aria-valuetext={ ariaReadableMinPrice }
+						value={
+							Number.isFinite( minPrice )
+								? minPrice
+								: minConstraint
+						}
+						onChange={ rangeInputOnChange }
+						step={ minRangeStep }
+						min={ minConstraint }
+						max={ maxConstraint }
+						ref={ minRange }
+						disabled={ isLoading && ! hasValidConstraints }
+						tabIndex={ showInputFields ? -1 : 0 }
+					/>
+					<input
+						type="range"
+						className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
+						aria-label={ __(
+							'Filter products by maximum price',
+							'woo-gutenberg-products-block'
+						) }
+						aria-valuetext={ ariaReadableMaxPrice }
+						value={
+							Number.isFinite( maxPrice )
+								? maxPrice
+								: maxConstraint
+						}
+						onChange={ rangeInputOnChange }
+						step={ maxRangeStep }
+						min={ minConstraint }
+						max={ maxConstraint }
+						ref={ maxRange }
+						disabled={ isLoading }
+						tabIndex={ showInputFields ? -1 : 0 }
+					/>
+				</div>
+			) }
+		</div>
+	);
+
 	return (
 		<div className={ classes }>
-			<div
-				className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
-				onMouseMove={ findClosestRange }
-				onFocus={ findClosestRange }
-			>
-				{ hasValidConstraints && (
-					<div aria-hidden={ showInputFields }>
-						<div
-							className="wc-block-price-filter__range-input-progress wc-block-components-price-slider__range-input-progress"
-							style={ progressStyles as React.CSSProperties }
-						/>
-						<input
-							type="range"
-							className="wc-block-price-filter__range-input wc-block-price-filter__range-input--min wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--min"
-							aria-label={ __(
-								'Filter products by minimum price',
-								'woo-gutenberg-products-block'
-							) }
-							aria-valuetext={ ariaReadableMinPrice }
-							value={
-								Number.isFinite( minPrice )
-									? minPrice
-									: minConstraint
+			{ ( ! inlineInput || ! showInputFields ) && slider }
+			{ showInputFields && (
+				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
+					<FormattedMonetaryAmount
+						currency={ currency }
+						displayType="input"
+						className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
+						aria-label={ __(
+							'Filter products by minimum price',
+							'woo-gutenberg-products-block'
+						) }
+						allowNegative={ false }
+						isAllowed={ isValidMinValue( {
+							minConstraint,
+							minorUnit: currency.minorUnit,
+							currentMaxValue: maxPriceInput,
+						} ) }
+						onValueChange={ ( value ) => {
+							if ( value === minPriceInput ) {
+								return;
 							}
-							onChange={ rangeInputOnChange }
-							step={ minRangeStep }
-							min={ minConstraint }
-							max={ maxConstraint }
-							ref={ minRange }
-							disabled={ isLoading }
-							tabIndex={ showInputFields ? -1 : 0 }
-						/>
-						<input
-							type="range"
-							className="wc-block-price-filter__range-input wc-block-price-filter__range-input--max wc-block-components-price-slider__range-input wc-block-components-price-slider__range-input--max"
-							aria-label={ __(
-								'Filter products by maximum price',
-								'woo-gutenberg-products-block'
-							) }
-							aria-valuetext={ ariaReadableMaxPrice }
-							value={
-								Number.isFinite( maxPrice )
-									? maxPrice
-									: maxConstraint
+							setMinPriceInput( value );
+						} }
+						onBlur={ priceInputOnBlur }
+						disabled={ isLoading || ! hasValidConstraints }
+						value={ minPriceInput }
+					/>
+					{ inlineInput && slider }
+					<FormattedMonetaryAmount
+						currency={ currency }
+						displayType="input"
+						className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
+						aria-label={ __(
+							'Filter products by maximum price',
+							'woo-gutenberg-products-block'
+						) }
+						isAllowed={ isValidMaxValue( {
+							maxConstraint,
+							minorUnit: currency.minorUnit,
+						} ) }
+						onValueChange={ ( value ) => {
+							if ( value === maxPriceInput ) {
+								return;
 							}
-							onChange={ rangeInputOnChange }
-							step={ maxRangeStep }
-							min={ minConstraint }
-							max={ maxConstraint }
-							ref={ maxRange }
-							disabled={ isLoading }
-							tabIndex={ showInputFields ? -1 : 0 }
-						/>
-					</div>
-				) }
-			</div>
-			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
-				{ showInputFields && (
-					<>
+							setMaxPriceInput( value );
+						} }
+						onBlur={ priceInputOnBlur }
+						disabled={ isLoading || ! hasValidConstraints }
+						value={ maxPriceInput }
+					/>
+				</div>
+			) }
+
+			{ ! showInputFields &&
+				! isLoading &&
+				Number.isFinite( minPrice ) &&
+				Number.isFinite( maxPrice ) && (
+					<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
 						<FormattedMonetaryAmount
 							currency={ currency }
-							displayType="input"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--min"
-							aria-label={ __(
-								'Filter products by minimum price',
-								'woo-gutenberg-products-block'
-							) }
-							allowNegative={ false }
-							isAllowed={ isValidMinValue( {
-								minConstraint,
-								minorUnit: currency.minorUnit,
-								currentMaxValue: maxPriceInput,
-							} ) }
-							onValueChange={ ( value ) => {
-								if ( value === minPriceInput ) {
-									return;
-								}
-								setMinPriceInput( value );
-							} }
-							onBlur={ priceInputOnBlur }
-							disabled={ isLoading || ! hasValidConstraints }
-							value={ minPriceInput }
+							value={ minPrice }
 						/>
 						<FormattedMonetaryAmount
 							currency={ currency }
-							displayType="input"
-							className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input wc-block-components-price-slider__amount wc-block-components-price-slider__amount--max"
-							aria-label={ __(
-								'Filter products by maximum price',
-								'woo-gutenberg-products-block'
-							) }
-							isAllowed={ isValidMaxValue( {
-								maxConstraint,
-								minorUnit: currency.minorUnit,
-							} ) }
-							onValueChange={ ( value ) => {
-								if ( value === maxPriceInput ) {
-									return;
-								}
-								setMaxPriceInput( value );
-							} }
-							onBlur={ priceInputOnBlur }
-							disabled={ isLoading || ! hasValidConstraints }
-							value={ maxPriceInput }
+							value={ maxPrice }
 						/>
-					</>
+					</div>
+				) }
+			<div className="wc-block-components-price-slider__actions">
+				{ ( minPrice !== minConstraint ||
+					maxPrice !== maxConstraint ) && (
+					<FilterResetButton
+						onClick={ () => {
+							onChange( [ minConstraint, maxConstraint ] );
+							debouncedUpdateQuery();
+						} }
+						screenReaderLabel={ __(
+							'Reset price filter',
+							'woo-gutenberg-products-block'
+						) }
+					/>
 				) }
-				{ ! showInputFields &&
-					! isLoading &&
-					Number.isFinite( minPrice ) &&
-					Number.isFinite( maxPrice ) && (
-						<div className="wc-block-price-filter__range-text wc-block-components-price-slider__range-text">
-							{ __( 'Price', 'woo-gutenberg-products-block' ) }
-							: &nbsp;
-							<FormattedMonetaryAmount
-								currency={ currency }
-								value={ minPrice }
-							/>
-							&nbsp;&ndash;&nbsp;
-							<FormattedMonetaryAmount
-								currency={ currency }
-								value={ maxPrice }
-							/>
-						</div>
-					) }
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-price-filter__button wc-block-components-price-slider__button"
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index bbf259c7cfe..11960131c13 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -2,17 +2,18 @@
 @mixin thumb {
 	background-color: transparent;
 	background-position: 0 0;
-	width: 28px;
-	height: 23px;
-	border: 0;
+	box-sizing: content-box;
+	width: 12px;
+	height: 12px;
+	border: 2px solid $gray-900;
+	border-radius: 100%;
 	padding: 0;
 	margin: 0;
 	vertical-align: top;
 	cursor: pointer;
 	z-index: 20;
 	pointer-events: auto;
-	background-image: url("data:image/svg+xml,%3Csvg width='56' height='46' viewBox='0 0 56 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M25.3176 9.9423L16.9013 3.7991C15.1953 2.5706 13.2618 1.9003 11.2146 2.0121H11.1009C6.21029 2.3471 2.11589 6.3681 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.9423V9.9423Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 9.94227L16.9013 3.79907C15.1953 2.57057 13.2618 1.90027 11.2146 2.01207H11.1009C6.21029 2.34707 2.11589 6.36807 2.00219 11.2827C1.88849 16.644 6.21019 21 11.6696 21H11.7833C13.603 21 15.4228 20.3298 16.9013 19.213L25.3176 12.958C26.2275 12.0645 26.2275 10.7242 25.3176 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M13 7V16M10 7V16V7Z' stroke='%23B8B8B8'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M25.3176 32.9423L16.9013 26.7991C15.1953 25.5706 13.2618 24.9003 11.2146 25.0121H11.1009C6.21029 25.347 2.11589 29.368 2.00219 34.2827C1.88849 39.644 6.21019 44 11.6696 44H11.7833C13.603 44 15.4228 43.3298 16.9013 42.213L25.3176 35.958C26.2275 35.0645 26.2275 33.7242 25.3176 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M13 30V39M10 30V39V30Z' stroke='%23757575'/%3E%3Cpath d='M30.6824 9.94227L39.0987 3.79907C40.8047 2.57057 42.7382 1.90027 44.7854 2.01207H44.8991C49.7897 2.34707 53.8841 6.36807 53.9978 11.2827C54.1115 16.644 49.7898 21 44.3304 21H44.2167C42.397 21 40.5772 20.3298 39.0987 19.213L30.6824 12.958C29.7725 12.0645 29.7725 10.7242 30.6824 9.94227V9.94227Z' fill='white' stroke='%23757575'/%3E%3Cpath d='M43 6.99997V16M46 6.99997V16V6.99997Z' stroke='%23B8B8B8'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' fill='%23F8F3F7' stroke='white' stroke-opacity='0.75' stroke-width='3'/%3E%3Cpath d='M30.6824 32.9423L39.0987 26.7991C40.8047 25.5706 42.7382 24.9003 44.7854 25.0121H44.8991C49.7897 25.347 53.8841 29.368 53.9978 34.2827C54.1115 39.644 49.7898 44 44.3304 44H44.2167C42.397 44 40.5772 43.3298 39.0987 42.213L30.6824 35.958C29.7725 35.0645 29.7725 33.7242 30.6824 32.9423V32.9423Z' stroke='%23757575'/%3E%3Cpath d='M43 30V39M46 30V39V30Z' stroke='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='56' height='46' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-
+	background: $white;
 	transition: transform .2s ease-in-out;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -23,8 +24,7 @@
 	}
 }
 @mixin thumbFocus {
-	background-position-y: -23px;
-	transform: scale(1.1);
+	background: $gray-900;
 }
 /* stylelint-enable */
 @mixin track {
@@ -52,24 +52,17 @@
 .wc-block-components-price-slider {
 	margin-bottom: $gap-large;
 
-	&.wc-block-components-price-slider--has-filter-button {
-		.wc-block-components-price-slider__controls {
-			justify-content: flex-end;
-
-			.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
-				margin-left: 0;
-				margin-right: 10px;
-			}
-		}
-	}
-
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
-		.wc-block-components-price-slider__amount,
-		.wc-block-components-price-slider__button {
+		.wc-block-components-filter-reset-button,
+		.wc-block-components-filter-submit-button {
 			@include placeholder();
 			box-shadow: none;
 		}
+
+		.wc-block-components-price-slider__amount {
+			display: none;
+		}
 	}
 
 	&.is-disabled:not(.is-loading) {
@@ -83,44 +76,63 @@
 
 .wc-block-components-price-slider__range-input-wrapper {
 	@include reset;
-	height: 9px;
+	background: $gray-300;
+	border-radius: 4px;
 	clear: both;
-	position: relative;
-	box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
-	background: #e1e1e1;
+	flex-grow: 1;
+	height: 4px;
 	margin: 15px 0;
+	position: relative;
 }
 
 .wc-block-components-price-slider__range-input-progress {
-	height: 9px;
-	width: 100%;
-	position: absolute;
+	height: 4px;
 	left: 0;
+	position: absolute;
 	top: 0;
+	width: 100%;
 	--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
-	--range-color: #{$studio-woocommerce-purple-30};
+	--range-color: #{$gray-900};
 	/*rtl:ignore*/
 	background: var(--track-background);
 }
 
 .wc-block-components-price-slider__controls {
+	align-items: center;
 	display: flex;
+	gap: $gap-smaller;
+	justify-content: space-between;
+	margin: $gap-large 0;
 
 	.wc-block-components-price-slider__amount {
 		margin: 0;
 		border-radius: 4px;
+		border-width: 1px;
 		width: auto;
 		max-width: 100px;
 		min-width: 0;
+		padding: $gap-smaller;
+	}
+}
 
-		&.wc-block-components-price-slider__amount--min {
-			margin-right: 10px;
-		}
-		&.wc-block-components-price-slider__amount--max {
-			margin-left: auto;
-		}
+.wc-block-components-price-slider__range-text {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	margin: $gap-large 0;
+}
+
+.wc-block-components-price-slider__actions {
+	align-items: center;
+	display: flex;
+	gap: $gap;
+	justify-content: flex-end;
+
+	.wc-block-components-filter-submit-button {
+		margin-left: 0;
 	}
 }
+
 .wc-block-components-price-slider__range-input {
 	@include reset;
 	width: 100%;
@@ -138,7 +150,7 @@
 	}
 	&::-webkit-slider-thumb {
 		@include thumb;
-		margin: -6px 0 0 0;
+		margin: -5px 0 0 0;
 	}
 	&::-webkit-slider-progress {
 		@include reset;
@@ -182,7 +194,7 @@
 		}
 		&::-moz-range-thumb {
 			background-position-x: left;
-			transform: translate(-2px, 4px);
+			transform: translate(-2px, 2px);
 		}
 		&::-ms-thumb {
 			background-position-x: left;
@@ -198,7 +210,7 @@
 		}
 		&::-moz-range-thumb {
 			background-position-x: right;
-			transform: translate(2px, 4px);
+			transform: translate(2px, 2px);
 		}
 		&::-ms-thumb {
 			background-position-x: right;
diff --git a/assets/js/blocks/price-filter/block.json b/assets/js/blocks/price-filter/block.json
index 3219b673952..d22b929c524 100644
--- a/assets/js/blocks/price-filter/block.json
+++ b/assets/js/blocks/price-filter/block.json
@@ -1,8 +1,8 @@
 {
 	"name": "woocommerce/price-filter",
 	"version": "1.0.0",
-	"title": "Filter Products by Price",
-	"description": "Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.",
+	"title": "Filter by Price",
+	"description": "Allow customers to filter products by price range.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {
@@ -27,6 +27,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"inlineInput": {
+			"type": "boolean",
+			"default": true
+		},
 		"showFilterButton": {
 			"type": "boolean",
 			"default": false
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
index cb75ad62689..87c5df5cb2d 100644
--- a/assets/js/blocks/price-filter/block.tsx
+++ b/assets/js/blocks/price-filter/block.tsx
@@ -318,6 +318,7 @@ const PriceFilterBlock = ( {
 					maxPrice={ maxPrice }
 					currency={ currency }
 					showInputFields={ attributes.showInputFields }
+					inlineInput={ attributes.inlineInput }
 					showFilterButton={ attributes.showFilterButton }
 					onChange={ onChange }
 					onSubmit={ () => onSubmit( minPrice, maxPrice ) }
diff --git a/assets/js/blocks/price-filter/edit.tsx b/assets/js/blocks/price-filter/edit.tsx
index df830023625..4e2fbbb7187 100644
--- a/assets/js/blocks/price-filter/edit.tsx
+++ b/assets/js/blocks/price-filter/edit.tsx
@@ -32,8 +32,13 @@ export default function ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) {
-	const { heading, headingLevel, showInputFields, showFilterButton } =
-		attributes;
+	const {
+		heading,
+		headingLevel,
+		showInputFields,
+		inlineInput,
+		showFilterButton,
+	} = attributes;
 
 	const blockProps = useBlockProps();
 
@@ -41,14 +46,11 @@ export default function ( {
 		return (
 			<InspectorControls key="inspector">
 				<PanelBody
-					title={ __(
-						'Block Settings',
-						'woo-gutenberg-products-block'
-					) }
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				>
 					<ToggleGroupControl
 						label={ __(
-							'Price Range',
+							'Price Range Selector',
 							'woo-gutenberg-products-block'
 						) }
 						value={ showInputFields ? 'editable' : 'text' }
@@ -57,6 +59,7 @@ export default function ( {
 								showInputFields: value === 'editable',
 							} )
 						}
+						className="wc-block-price-filter__price-range-toggle"
 					>
 						<ToggleGroupControlOption
 							value="editable"
@@ -73,9 +76,27 @@ export default function ( {
 							) }
 						/>
 					</ToggleGroupControl>
+					{ showInputFields && (
+						<ToggleControl
+							label={ __(
+								'Inline input fields',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ inlineInput }
+							onChange={ () =>
+								setAttributes( {
+									inlineInput: ! inlineInput,
+								} )
+							}
+							help={ __(
+								'Show input fields inline with the slider.',
+								'woo-gutenberg-products-block'
+							) }
+						/>
+					) }
 					<ToggleControl
 						label={ __(
-							'Filter button',
+							"Show 'Apply filters' button",
 							'woo-gutenberg-products-block'
 						) }
 						help={
@@ -120,10 +141,7 @@ export default function ( {
 		<Placeholder
 			className="wc-block-price-slider"
 			icon={ <Icon icon={ currencyDollar } /> }
-			label={ __(
-				'Filter Products by Price',
-				'woo-gutenberg-products-block'
-			) }
+			label={ __( 'Filter by Price', 'woo-gutenberg-products-block' ) }
 			instructions={ __(
 				'Display a slider to filter products in your store by price.',
 				'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/price-filter/editor.scss b/assets/js/blocks/price-filter/editor.scss
index 44c62d27dea..238b9cd7404 100644
--- a/assets/js/blocks/price-filter/editor.scss
+++ b/assets/js/blocks/price-filter/editor.scss
@@ -15,6 +15,19 @@
 	}
 }
 
+.wc-block-price-filter__price-range-toggle {
+	width: 100%;
+
+	> div {
+		flex-grow: 1;
+	}
+}
+
+.components-base-control__label {
+	text-transform: uppercase;
+	@include font-size(small);
+}
+
 .wc-block-price-slider {
 	.components-placeholder__instructions {
 		border-bottom: 1px solid #e0e2e6;
diff --git a/assets/js/blocks/price-filter/frontend.ts b/assets/js/blocks/price-filter/frontend.ts
index ac4e2badb83..6d38ed17078 100644
--- a/assets/js/blocks/price-filter/frontend.ts
+++ b/assets/js/blocks/price-filter/frontend.ts
@@ -14,6 +14,7 @@ const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			showInputFields: el.dataset.showinputfields === 'true',
+			inlineInput: el.dataset.inlineInput !== 'false',
 			showFilterButton: el.dataset.showfilterbutton === 'true',
 			heading: el.dataset.heading || blockAttributes.heading.default,
 			headingLevel: el.dataset.headingLevel
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 407c62b3d13..b8e5ded64db 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import classNames from 'classnames';
 import { Icon, currencyDollar } from '@wordpress/icons';
-import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -16,9 +15,9 @@ import metadata from './block.json';
 import { blockAttributes } from './attributes';
 
 registerBlockType( metadata, {
-	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
+	title: __( 'Filter by Price', 'woo-gutenberg-products-block' ),
 	description: __(
-		'Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.',
+		'Allow customers to filter products by price range.',
 		'woo-gutenberg-products-block'
 	),
 	icon: {
@@ -29,16 +28,6 @@ registerBlockType( metadata, {
 			/>
 		),
 	},
-	supports: {
-		...metadata.supports,
-		...( isFeaturePluginBuild() && {
-			__experimentalBorder: {
-				radius: true,
-				color: true,
-				width: false,
-			},
-		} ),
-	},
 	attributes: {
 		...metadata.attributes,
 		...blockAttributes,
@@ -62,6 +51,7 @@ registerBlockType( metadata, {
 								'woo-gutenberg-products-block'
 							),
 						headingLevel: 3,
+						inlineInput: true,
 					} ),
 			},
 		],
diff --git a/assets/js/blocks/price-filter/style.scss b/assets/js/blocks/price-filter/style.scss
index daf012103e1..03784801a34 100644
--- a/assets/js/blocks/price-filter/style.scss
+++ b/assets/js/blocks/price-filter/style.scss
@@ -1,4 +1,6 @@
 .wp-block-woocommerce-price-filter {
+	border-color: $gray-700;
+	border-radius: 4px;
 	border-style: none !important;
 }
 
@@ -17,6 +19,7 @@
 	border-radius: inherit;
 	border-color: inherit;
 
+	// Force inherting style is required for global style.
 	input {
 		border-radius: inherit !important;
 		border-color: inherit !important;
diff --git a/assets/js/blocks/price-filter/types.ts b/assets/js/blocks/price-filter/types.ts
index 429c298998c..bb574ff6638 100644
--- a/assets/js/blocks/price-filter/types.ts
+++ b/assets/js/blocks/price-filter/types.ts
@@ -1,6 +1,7 @@
 export interface Attributes {
 	showFilterButton: boolean;
 	showInputFields: boolean;
+	inlineInput: boolean;
 	heading: string;
 	headingLevel: number;
 	className?: string;
diff --git a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
index 8f24b78b474..cff704e558c 100644
--- a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
+++ b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap
@@ -95,13 +95,13 @@ exports[`Testing stock filter renders the stock filter block with the filter but
       </li>
     </ul>
     <button
-      class="wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
+      class="wp-block-button__link wc-block-filter-submit-button wc-block-components-filter-submit-button wc-block-stock-filter__button"
       type="submit"
     >
       <span
         aria-hidden="true"
       >
-        Go
+        Apply
       </span>
       <span
         class="screen-reader-text"
diff --git a/docs/designers/theming/all-products-and-filters.md b/docs/designers/theming/all-products-and-filters.md
index c13f5efe641..222cbe403fc 100644
--- a/docs/designers/theming/all-products-and-filters.md
+++ b/docs/designers/theming/all-products-and-filters.md
@@ -2,7 +2,7 @@
 
 ## Price slider accent color
 
-The Filter Products by Price block includes a price slider which uses an accent color to show the selected range.
+The Filter by Price block includes a price slider which uses an accent color to show the selected range.
 
 ![Price filter screenshot](https://user-images.githubusercontent.com/3616980/96570001-2053f900-12ca-11eb-8a75-8a54f243bda3.png)
 
diff --git a/readme.txt b/readme.txt
index c834b932a30..b9fff04313b 100644
--- a/readme.txt
+++ b/readme.txt
@@ -34,7 +34,7 @@ Use this plugin if you want access to the bleeding edge of available blocks for
 - **All Reviews**
 - **Product Search**
 - **All Products**
-- **Filter Products by Price**
+- **Filter by Price**
 - **Filter Products by Attribute**
 - **Filter Products by Stock**
 - **Active Product Filters**
diff --git a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
index 3cd1ab1387c..d63544f4f19 100644
--- a/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
+++ b/tests/e2e/specs/backend/__fixtures__/filter-products-by-price.fixture.json
@@ -1 +1 @@
-{"title":"Filter Products by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}
+{"title":"Filter by Price Block","pageContent":"<!-- wp:woocommerce/price-filter -->\n<div class=\"wp-block-woocommerce-price-filter is-loading\" data-showinputfields=\"true\" data-showfilterbutton=\"false\" data-heading=\"Filter by price\" data-heading-level=\"3\"><span aria-hidden=\"true\" class=\"wc-block-product-categories__placeholder\"></span></div>\n<!-- /wp:woocommerce/price-filter -->"}
diff --git a/tests/e2e/specs/backend/price-filter.test.js b/tests/e2e/specs/backend/price-filter.test.js
index 6acd0887d0e..2f26a88d3e8 100644
--- a/tests/e2e/specs/backend/price-filter.test.js
+++ b/tests/e2e/specs/backend/price-filter.test.js
@@ -17,7 +17,7 @@ import {
 import { insertBlockDontWaitForInsertClose } from '../../utils.js';
 
 const block = {
-	name: 'Filter Products by Price',
+	name: 'Filter by Price',
 	slug: 'woocommerce/price-filter',
 	class: '.wp-block-woocommerce-price-filter',
 };
@@ -91,15 +91,15 @@ describe( `${ block.name } Block`, () => {
 				);
 			} );
 
-			it( 'allows you to toggle go button', async () => {
+			it( 'allows you to toggle filter button', async () => {
 				await expect( page ).toClick( 'label', {
-					text: 'Filter button',
+					text: "Show 'Apply filters' button",
 				} );
 				await expect( page ).toMatchElement(
 					'button.wc-block-filter-submit-button.wc-block-price-filter__button'
 				);
 				await expect( page ).toClick( 'label', {
-					text: 'Filter button',
+					text: "Show 'Apply filters' button",
 				} );
 			} );
 		} );
diff --git a/tests/e2e/specs/shopper/active-filters.test.ts b/tests/e2e/specs/shopper/active-filters.test.ts
index e6b07dd3ded..ee9b2577ce5 100644
--- a/tests/e2e/specs/shopper/active-filters.test.ts
+++ b/tests/e2e/specs/shopper/active-filters.test.ts
@@ -59,7 +59,7 @@ const FILTER_CAPACITY_PROPERTY = '128gb';
 const { selectors } = block;
 
 const insertBlocks = async () => {
-	await insertBlock( 'Filter Products by Price' );
+	await insertBlock( 'Filter by Price' );
 	await insertBlock( 'Filter Products by Stock' );
 	await insertBlock( 'Filter Products by Attribute' );
 	await insertBlock( block.name );
diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
index 87062c4e5f7..0add2ce3064 100644
--- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -24,12 +24,13 @@ import {
 import { clickLink } from '../../../utils';
 
 const block = {
-	name: 'Filter Products by Price',
+	name: 'Filter by Price',
 	slug: 'woocommerce/price-filter',
 	class: '.wc-block-price-filter',
 	selectors: {
 		editor: {
-			filterButtonToggle: "//label[text()='Filter button']",
+			filterButtonToggle:
+				'//label[text()="Show \'Apply filters\' button"]',
 		},
 		frontend: {
 			priceMaxAmount: '.wc-block-price-filter__amount--max',