針對Woocommerce商店頁面菜單

我試圖隱藏/交換Woocommerce中的標誌和菜單項顏色，但無濟於事。基本上我的大多數網站使用標準的導航，但我想要一個不同的標誌和不同的導航顏色出現在所有商店相關的頁面。因此隱藏一個，然後顯示另一個，具體取決於頁面。針對Woocommerce商店頁面菜單

由於我的導航是透明的，我只希望在商店頁面上顯示。我明白，我可以針對通過有條件代碼的網頁時，（例如

is_product_category()

，但不知道怎麼寫都針對那些頁數和交換/隱藏上面了。我使用的是航空維修的主題。我可以供給圖像澄清如果有必要...

欣賞的幫助從WordPress的頭!!感謝

編輯>

<?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 
} 
?>

來源

2016-12-14 Gray

我知道2點的方式來做到這一點：

1）有條件標籤：

與WordPress和woocommerce，你將在大呼過癮函數使用（在function.php條件標籤您活動主題的文件）或直接在wordpress或woocommerce模板中。

例：is_shop()，is_product_category()，is_product_tag(），is_product()，is_cart()，is_checkout() ...

您將可以有條件地添加類或ID的例如，模板中的html標籤。

用例：

<?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; ?>"> 
    <a href="/some-link">Click me</a> 
</div>

再比如說，對店鋪頁面，你會得到這樣生成的代碼：

<div class="some-class the-shop"> 
    <a href="/some-link">Click me</a> 
</div>

然後，你將能夠使用the-shop類在你的CSS文件來顯示/隱藏，進行更改...

也可以構建您的自定義條件功能...

2）CSS類：基於身體的CSS類（和其他一些CSS類），特定於woocommerce頁面

隨着CSS。在您的網站的WooCommerce前端頁面中導航時，您可以使用瀏覽器的開發人員工具發現它們。

在特定WoocommerCe店鋪頁面，你得到這個類例如體類：

<body class="archive post-type-archive post-type-archive-product woocommerce woocommerce-page">

，你可以在style.css文件的子主題的使用顯示/隱藏DOM元素...

建議：使用兒童主題要好得多。

根據您的UPDATE UPDATE

我插入了is_shop()有條件的標籤在你的代碼

<?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" /> </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" /> </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" /> </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 } ?>

參考文獻：

WooCommerce conditional tags

Template Structure + Overriding Templates via a Theme

來源

2016-12-14 16:24:18 LoicTheAztec

謝謝好心的幫助盧瓦克。即時通訊使用兒童主題，所以我很好。我的問題是我對PHP不熟悉，但設法擺弄這個代碼（雖然它沒有工作！） – Gray

嘿Loic，CSS不是正確的目標是這個網頁的問題是非常具有挑戰性的。無論如何謝謝 – Gray

感謝您的幫助Loic ...我修改了代碼，如果我放在funtions.php中，它會打破我的網站。但是，當我在header.php中使用上面示例1中的初始代碼時，它會出現在所有頁面上，但不知道如何定位divi徽標，隱藏它，並在每個woocommerce頁面上顯示一個新的代碼！ – Gray

針對Woocommerce商店頁面菜單

回答

相關問題