「製品を見る」ボタンを追加するWooCommerceのアーカイブページにカートのボタンを追加

Question

インターネット上のほとんどの記事はです。「製品を見る」または「もっと読む」ボタンを削除/置換する方法。
両方のボタンを併用することに関連するものが見つかりませんでした。

私は両方のボタンを同時に（同時に）動作させることに興味があります。表示される 最初のボタンは、「ビュー製品」でなければなりません（同じページ上で開くことにする）、次に下現時点で

を「カートに追加」、私の店は唯一をカートに入れる表示しますボタン。 Storefrontテーマ（+カスタムチャイルドテーマ）を使用しています。

誰もとても親切で、これを行う方法を教えてください。

Answer 1

使用woocommerce_after_shop_loop_itemアクションフックに引っかけ、このカスタム関数を、製品にリンクされているカスタムボタンを追加するには：

add_action('woocommerce_after_shop_loop_item', 'add_a_custom_button', 5); 
function add_a_custom_button() { 
    global $product; 

    // Not for variable and grouped products that doesn't have an "add to cart" button 
    if($product->is_type('variable') || $product->is_type('grouped')) return; 

    // Output the custom button linked to the product 
    echo '<div style="margin-bottom:10px;"> 
     <a class="button custom-button" href="' . esc_attr($product->get_permalink()) . '">' . __('View product') . '</a> 
    </div>'; 
} 

コードは、あなたのアクティブな子テーマ（またはテーマ）のfunction.phpファイルに行きますまたは任意のプラグインファイルでも使用できます。

テスト済みで動作します。 あなたのスタイルを埋め込み

---

（コメントの作成に関連する）：

add_action('wp_head', 'custom_button_styles', 9999); 
function custom_button_styles() { 
    if(is_shop() || is_product_category() || is_product_tag()): 

    // The styles 
    ?> 
    <style> 
     .button.custom-button { background-color: white !important; 
      color: black !important; border: 2px solid #4CAF50 !important; } 
     .button.custom-button:hover { background-color: black !important; 
      color: white !important; border: 2px solid black !important; } 
    </style> 
    <?php 
    endif; 
} 

コードは、あなたのアクティブな子テーマ（またはテーマ）のfunction.phpファイルやも任意のプラグインファイルになります。

テスト済みで動作します。