Trying to create a conditional CSS snippet

Resolved

(@ashewebmaster)

Basically what I’m trying to do is change or remove the header background on my shop’s homepage. I want the blue header background on all the other shop pages and either no header background or a white header background on the shop’s homepage. Hope that makes sense.

I tried the following snippet, but no joy.


  if( $page_title == 'Shop' ) {
		add_action( 'wp_head', function () { ?>
		<style>

	.store-home-background {
		background-image: url('https://theasheacademy.org/wp-content/uploads/2020/12/homepage-banner2.png');
	}
	
	p.store-home-background-overlay, h2.store-home-background-overlay {
		color: #ffffff !important;
	}

	p.store-home-background-overlay {
		font-weight: bold !important;
		font-size: 1.1em;
	}
	.woocommerce-products-header {
		background: #fff !important;
		/*color: #ffffff;
		padding: 1em;
		border-radius: 4px;*/
	}
		</style>
<?php } );
  }else{
		add_action( 'wp_head', function () { ?>
		<style>

	.woocommerce-products-header {
		background: #06005f;
		color: #ffffff;
		padding: 1em;
		border-radius: 4px;
	}
	
	.woocommerce-products-header h1.page-title {
		color: #ffffff;
	}

		</style>
<?php } );
  }

This topic was modified 5 years ago by ashewebmaster.
This topic was modified 5 years ago by ashewebmaster.

The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

Plugin Author

Shea Bunge

(@bungeshea)

5 years ago

There are two things to take note of here:

It’s far more reliable to place your if/else checks within the hook function itself, rather than placing them before add_action or add_filter.
I’m not sure where the $page_title variable is coming from. You can use is_page() to determine whether the current page title matches.

Here’s an updated version of your code:

add_action( 'wp_head', function () {
	if ( is_page( 'Shop' ) ) { ?>
	<style>

	.store-home-background {
		background-image: url('https://theasheacademy.org/wp-content/uploads/2020/12/homepage-banner2.png');
	}
	
	p.store-home-background-overlay, h2.store-home-background-overlay {
		color: #ffffff !important;
	}

	p.store-home-background-overlay {
		font-weight: bold !important;
		font-size: 1.1em;
	}
	.woocommerce-products-header {
		background: #fff !important;
		/*color: #ffffff;
		padding: 1em;
		border-radius: 4px;*/
	}
	</style>

	<?php } else { ?>
	<style>

	.woocommerce-products-header {
		background: #06005f;
		color: #ffffff;
		padding: 1em;
		border-radius: 4px;
	}
	
	.woocommerce-products-header h1.page-title {
		color: #ffffff;
	}

	</style>
	<?php }
} );

Viewing 1 replies (of 1 total)

The topic ‘Trying to create a conditional CSS snippet’ is closed to new replies.

Tags