Targeting Woocommerce shop page menu - php

Question

I'm attempting to hide/swap the logo and menu item color in Woocommerce, but to no avail. Basically most of my site uses the standard nav but i would like for a different logo and different navigation color to appear on all the shop related pages. So hide one and then show another, depending on the page.
As my navigation is transparent I only want this on the shop pages. I understand that I can target pages through conditional tags, (for example
is_product_category()
but not sure how to write it all to target those pages and swap/hide the above too. I'm using Divi theme. I can supply images for clarification if necessary...
Appreciate the help from Wordpress heads!! thanks
Edit >
<?php
// This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
if ( is_front_page( )) {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
//This is targeting the page with the slug page-name-slug.
} elseif ( is_page( 'botanical-collection' ) ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the id 724.
} elseif ( is_page( '724' ) ) { //can use page id or slug
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.
} else {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
}
?>

Answer 1

I know 2 ways to do it:
1) Conditional tags:
With wordpress and woocommerce conditional tags that you will use on hooked functions (in the function.php file of your active theme) or directly in the wordpress or woocommerce templates.
Example: is_shop(), is_product_category(), is_product_tag(), is_product(), is_cart(), is_checkout() …
You will be able to conditionally add classes or IDs to the html tags in the templates for example.
Usage example:
<?php
// Shop page
if (is_shop())
$class = ' the-shop';
// single products
if (is_product())
$class = ' single-product';
// Cart page
if (is_cart())
$class = ' the-cart';
?>
<div class="some-class<?php $class; ?>">
Click me
</div>
Then for example, for shop page you will get this generated code:
<div class="some-class the-shop">
Click me
</div>
Then you will be able to use the-shop class in your CSS file to show/hide, make changes…
Is also possible to build your custom conditional functions…
2) CSS Classes:
With CSS based on the body CSS classes (and some other CSS classes), that are specific to woocommerce pages. You can discover them with the developer tools of your browser when navigating in the WooCommerce frontend pages of your web site.
In the body class specific to WoocommerCe shop page you get this classes for example:
<body class="archive post-type-archive post-type-archive-product woocommerce woocommerce-page">
That you can use in the style.css file of your child theme to show/hide DOM elements…
Advice: Is much better to use a child theme.
UPDATE BASED ON YOUR UPDATE
I have inserted the is_shop() conditional tag in your code
<?php
// This is targeting the front page as set in Dashboard => Settings => Reading and uses the logo as setup in Divi Options.
if ( is_front_page( )) {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
// ### HERE ==> THE WOOCOMMERCE SHOP PAGE (YOU CAN EDIT THE CODE BELOW)
} elseif ( is_shop() ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the slug page-name-slug.
} elseif ( is_page( 'botanical-collection' ) ) {
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is targeting the page with the id 724.
} elseif ( is_page( '724' ) ) { //can use page id or slug
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img class="custom-logo" src="https://www.example.com/wp-content/uploads/2016/12/logo_ORIGINAL_sm.png" /><!-- Replace image path with the url to you image -->
</a>
</div>
<?php
//This is what we show if previous conditions are not met. In this case, it defaults back to the logo as set in Divi options.
} else {
?>
<?php
$logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
? $user_logo
: $template_directory_uri . '/wp-content/uploads/2016/12/logo_WHITE_sm.png';
?>
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
<?php
}
?>
References:
WooCommerce conditional tags
Template Structure + Overriding Templates via a Theme