web-dev-qa-db-ja.com

カートに追加ボタン、WoocommerceにCSSクラスを追加

Woocommerceのsingle-product.phpページのカートに追加ボタンにカスタムクラスを追加する方法を探しています。私は何の結果もなしに以下を試みました：

  1. Woocommerceフォルダ全体を "plugins"フォルダから "themes/MY-THEME/woocommerce"にコピーします。
  2. "themes/MY-THEME/woocommerce/loop/add-to-cart.php"の中のファイル "add-to-cart.php"を修正する
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button MY-TEST-CLASS-HERE' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

ソースコードに "MY-TEST-CLASS-HERE"はありません。何がおかしいのですか？

pluginscsswoocommerce
2
JohnF

で説明されているように彼らのドキュメンテーション WooCommerceはテンプレート構造を提供します。あなたのテーマにWCをコピーしてもどこにも行きません。

  1. テーマにwoocommerceフォルダを作成します。
  2. templatesテーマフォルダー内のWCのwoocommerceフォルダー内の任意のテンプレートをコピーします。これを機能させるには、templatesフォルダの構造をwoocommerceテーマのフォルダにそのまま残しておく必要があります。
  3. テーマのwoocommerceフォルダ内のテンプレートを好みに合わせて変更します。彼らはプラグインのtemplatesの中のものよりもロード優先順位を持っています。

ヒント：テーマ内のプラグインからすべてのテンプレートをコピーしないでください。変更したいものだけ。時々WCは彼らのテンプレートを更新し、機能性を追加します。また、WooCommerceでは、アップグレード後に、テーマに保持しているテンプレートのプラグイン内にアップグレードされたバージョンがある可能性がある場合にも通知されます。

ちなみに、私は、投票が質問そのものではなく、タイトルについてのものであったと思います。ボタンにクラスを追加する方法を知っていると思います。あなたが知らなかったのは、WooCommerceのテンプレートシステムの使い方です。あなたはそれをグーグルしなかったので、私はあなたが（技術的に）やり方を知っていると思う。どうか私の皮肉を許してください、それはどちらかまたはもう一つのマイナス投票でした。

4
Andrei Gheorghiu

私が見つけた最も簡単な方法（ちょっとハッキー）は、spanタグでボタンをラップし、spanにクラスを追加してから、あなたのcssでspanから継承したボタンにプロパティを適用することです：

<span class="my-Nice-class">
    <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
</span>

そして、CSSで：

.my-Nice-class .button {
    color: black;
}
1
drjorgepolanco

あなたは子供のテーマを使っていますか？そうでなければ、私はそれをお勧めします。次に、 "add_to_cart_button"のスタイルを編集して新しいクラスを作成することで、子テーマの "style.css"ファイルのボタンのスタイルをカスタマイズできます。

0
grlwondr