diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
index c5acbe81e..a747e93b3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
@@ -10,7 +10,8 @@ import {
 } from '../Layout';
 
 const LocationSelector = ( { location, setLocation } ) => {
-	const { choices, details } = StylingHooks.useLocationProps( location );
+	const { choices, details, isActive, setActive } =
+		StylingHooks.useLocationProps( location );
 
 	const activateCheckbox = {
 		value: 'active',
@@ -51,7 +52,8 @@ const LocationSelector = ( { location, setLocation } ) => {
 				className="location-activation"
 				separatorAndGap={ false }
 				options={ [ activateCheckbox ] }
-				value={ 'active' }
+				value={ isActive }
+				onChange={ setActive }
 			/>
 		</>
 	);
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
index 6592b0603..dd5b383b8 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
@@ -6,16 +6,36 @@ import {
 	ButtonLabel,
 	ButtonColor,
 } from './Content';
+import { StylingHooks } from '../../../../../data';
 
-const SettingsPanel = ( { location, setLocation } ) => (
-	<div className="settings-panel">
-		<LocationSelector location={ location } setLocation={ setLocation } />
-		<PaymentMethods location={ location } />
-		<ButtonLayout location={ location } />
-		<ButtonShape location={ location } />
-		<ButtonLabel location={ location } />
-		<ButtonColor location={ location } />
-	</div>
-);
+const SettingsPanel = ( { location, setLocation } ) => {
+	const { isActive } = StylingHooks.useLocationProps( location );
+
+	const LocationDetails = () => {
+		if ( ! isActive ) {
+			return null;
+		}
+
+		return (
+			<>
+				<PaymentMethods location={ location } />
+				<ButtonLayout location={ location } />
+				<ButtonShape location={ location } />
+				<ButtonLabel location={ location } />
+				<ButtonColor location={ location } />
+			</>
+		);
+	};
+
+	return (
+		<div className="settings-panel">
+			<LocationSelector
+				location={ location }
+				setLocation={ setLocation }
+			/>
+			<LocationDetails />
+		</div>
+	);
+};
 
 export default SettingsPanel;
diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js
index 3a926439b..79314e18b 100644
--- a/modules/ppcp-settings/resources/js/data/styling/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js
@@ -83,11 +83,14 @@ export const useStylingLocation = () => {
 };
 
 export const useLocationProps = ( location ) => {
+	const { getLocationProp, setLocationProp } = useHooks();
 	const details = STYLING_LOCATIONS[ location ] ?? {};
 
 	return {
 		choices: Object.values( STYLING_LOCATIONS ),
 		details,
+		isActive: getLocationProp( location, 'enabled' ),
+		setActive: ( state ) => setLocationProp( location, 'enabled', state ),
 	};
 };