mrsmith11さん、こんにちは。
ボタンを追加で表示するなどの場合は、残念ながらCSSの記述だけではどうにもならないと思います。
理想としては子テーマを作成して、該当のテンプレートをコピーしてきて改造だと思われますが、現在は子テーマを作成して管理をされておりますか？
PHPでの記述等が含まれてくると思われますので、まずは確認してみることをお勧めいたします。
ご参考になれば。
mrsmith11さん、こんにちは。
簡単に確認したところ、該当のボタンはやはりWooCommerceが表示を担っているようです。
子テーマを作成し、functions.php に以下のように記述すれば、とりあえず表示させることはできます。
function show_checkout_button(){
wc_get_template( 'cart/proceed-to-checkout-button.php' );
}
add_action( 'woocommerce_cart_actions', 'show_checkout_button' );
※ デザインや位置などまったく調整していませんし、動作の確認も行っておりません。
※ プラグインファイルを作って記述でもOK。その方法で表示確認しています。
ご参考になれば。
ありがとうございます。
やってみたら、できました。
しかし、タブレットとスマホ版の表示だけ、
「お支払いを進む」の文字が少し上にズレて表示されます。
（PC表示は問題ないのですが）
これを解決する方法はないでしょうか？
また、商品をカゴの中に入れた時に表示される「View Cart（お買い物かごを表示）」ボタンの下、もしくは横にも「PROCEED TO CHECKOUT（お支払へ進む）」のボタンを表示させたいです。
これはなんと記述すればいいのでしょうか？
質問ばかりで恐れ入りますが、差し支えなければお教えいただけないでしょうか。
よろしくお願いいたします。
画像を載せようとしたのですが、
「この投稿は自動化システムにより承認待ちとなっています。モデレーターが手動でレビューします。」
と表示され、投稿できませんでした。
以前、この状態で待っていたら２～３週間ほどトピックがたたなかったので画像無しで投稿しました。
文章のみでわかりにくくですみませんが、以上よろしくお願いいたします。
mrsmith11さん、こんにちは。
しかし、タブレットとスマホ版の表示だけ、
「お支払いを進む」の文字が少し上にズレて表示されます。
単純にCSSの問題だと思います。
Chrome等のデベロッパーツールでスマホ表示に切り替えて、該当箇所のCSSがどこに記述されているのか確認し、同じ指定方法で自身の用意したCSSファイルに修正したCSSを記述すればなんとかなると思います。
メディアクエリの記述方法を調べてみてください。
また、商品をカゴの中に入れた時に表示される「View Cart（お買い物かごを表示）」ボタンの下、もしくは横にも「PROCEED TO CHECKOUT（お支払へ進む）」のボタンを表示させたいです。
同様にWooCommerceが表示を担っていますが、明確に分かるフックがなかったので、ちょっと分かりかねます。WooCommerce独自のfunctionを使っているようなので、もう少しWooCommerceに詳しい方の登場待ちでしょうか…
ご参考になれば。
単純にCSSの問題だと思います。
Chrome等のデベロッパーツールでスマホ表示に切り替えて、該当箇所のCSSがどこに記述されているのか確認し、同じ指定方法で自身の用意したCSSファイルに修正したCSSを記述すればなんとかなると思います。
メディアクエリの記述方法を調べてみてください。
ありがとうございます。
cssでいうと、「line-height: 20px;」の部分が影響しているのですが、
これをいじってしまうと、なぜか、オリジナルのほうの「お支払へ進む」ボタンのレイアウトまで崩れてしまうんですよね・・・。
そもそもなぜか今回追加したほうの「お支払へ進む」ボタンだけレイアウトが崩れるのか不明です。
（しかもスマホとタブレット表示のみ）
同様にWooCommerceが表示を担っていますが、明確に分かるフックがなかったので、ちょっと分かりかねます。WooCommerce独自のfunctionを使っているようなので、もう少しWooCommerceに詳しい方の登場待ちでしょうか…
なるほど、そうでしたか。
ありがとうございます。
他に分かる人がいればいいのですが・・・。
mrsmith11さん、こんにちは。
CSSを個別に充てたいのであれば、私が最初に記載したコードにhtmlを追記することでも対応可能かと考えられます。
wc_get_template( 'cart/proceed-to-checkout-button.php' );
この部分がボタンを呼び出している箇所ですので、これの上下をhtmlで囲ってあげます。
例えば…
echo '<span class="after-checkout-button">';
wc_get_template( 'cart/proceed-to-checkout-button.php' );
echo '</span>';
のように、タグの追加とclassの追加を行えば、CSSが充てやすくなるかと思います。
ご参考になれば。
ありがとうございます。
やってみたのですが、なぜかそこの部分を追加CSSを使って指定しても、全く反映されないんですよね・・・（ボタンの中の文字を場所を変えたいのに、そのボタンごと動いてしまう）
普通に
.after-checkout-button{
}
で書いてもだめで、
@media screen and (min-width:480px) {
/* for iPhone Landscape (iPhone 横) */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* for iPad */
}
@media screen and (min-width:1024px) {
/* for PC */
}
こんなかんじのメディアクエリで指定しても、反映されないんですよね。（ボタンの中の文字を場所を変えたいのに、そのボタンごと動いてしまう）
なので、ボタンの中の
<code>.checkout-button.button.alt.wc-forward{}</code>
で指定すればちゃんと動くのですが、そうすると、オリジナルの「お支払いへ進む」も同様に動いてしまって・・・
オリジナルの「お支払いへ進む」の文字はそのままでいいので、新しく追加したほうの「お支払いへ進む」の文字だけ動かしたくて。
そもそも、最初にお教えいただいた、
function show_checkout_button(){
wc_get_template( 'cart/proceed-to-checkout-button.php' );
}
add_action( 'woocommerce_cart_actions', 'show_checkout_button' );
に、直にCSSを追加する方法はないのでしょうか？
ここで直に指定できれば、手っ取り早いのですが。。。
すみませんが、よろしくお願い致します。
※CSSは勉強中ですが、覚えることが多く、追いついていません。。。訊いてばかりですみません。
mrsmith11さん、こんにちは。
実際のコードを確認している訳でもなく、どこをどう動かしたいのか、具体的に分からないので、合っているのかわかりませんが、メディアクエリの記述もできていそうで、実際に動くCSSも判明しているっぽいので、そこから想像すると…
@media screen and (min-width:480px) {
/* for iPhone Landscape (iPhone 横) */
.checkout-button.button.alt.wc-forward {
動かしたいCSS
}
}
のような記載でスマホだけとか調整できないですかね。
試してみてください。
ご参考になれば。
ありがとうございます。でも、ダメなんですよね・・・
わかりません。
諦めました。
色々ご丁寧にお教えいただきありがとうございました。
@mrsmith11 さん、こんにちは。
諦めたらそこで試合終了ですねｗ
ちょっと時間が取れたので検証してみました。
以前説明したボタンを<span>等タグで挟む方法ですが、その中のaタグがfloatしているので、単純にclass指定しただけでは難しいですね。
.actions a.checkout-button.button.alt.wc-forward {
margin-top: .5em;
}
単純にスペースを空けたいだけなら、上記のような指定でどうでしょう。
キモは下の同じボタンに影響しないように.actionsを指定しているところです。
スマホとタブレットに対応させるなら上記にメディアクエリを組み合わせれば大丈夫かと思います。
ご参考になれば。
ありがとうございます！
なるほど、「.actions」というやり方ははじめて知りました。そんな方法があるのですね。
その方法で色々試したら、完璧に機能いたしました！
諦めていましたが、本当にありがとうございます。
大変厚かましいのですが、
商品をカゴの中に入れた時に表示される「View Cart（お買い物かごを表示）」ボタンの下、もしくは横にも「PROCEED TO CHECKOUT（お支払へ進む）」のボタンを表示させたいです。
これはやはり明確に分かるフックがないため、無理なのでしょうか？
ちなみにそのフックというのは、どこかに記載されているのでしょうか？
今回の例でいうと、
cart/proceed-to-checkout-button.php
woocommerce_cart_actions
show_checkout_button
下の２つがフックということですよね？
よろしくお願いいたします。
@mrsmith11 さん、こんにちは。
フックとはWordPressが持つ機能（関数）のひとつです。
フック、アクションとフィルタ
WooCommerceも独自のフックを用意しています。
今回はadd_actionでフックを呼び出してwoocommerce_cart_actionsというフックを利用しました。
商品をかごの中に入れたときに呼び出される個所はおそらく以下の場所です。
wp-content/plugins/woocommerce/includes/wc-cart-functions.php 125行目
$message = sprintf( '<a href="%s" tabindex="1" class="button wc-forward">%s</a> %s', esc_url( wc_get_cart_ur
l() ), esc_html__( 'View cart', 'woocommerce' ), esc_html( $added_text ) );
この$messageで該当のリンクを作成しているようですので、$messageの内容をフックできればよさそうです。
周辺でおそらく表示を担っているフィルターフックが使用されている箇所があるのですが、該当のフィルターフックを作っている場所は以下かと思われます。
133 $message = apply_filters( 'wc_add_to_cart_message_html', $message, $products, $show_qty );
これらを踏まえて以下のように記述してみました。
function filter_wc_add_to_cart_message_html( $message, $products ) {
$pattern = '/(<a href=")(.*)(\/cart\/".*)(<\/a>)(.*)/';
$replacement = '$1$2$3$4<a href="$2/checkout/" class="checkout-button button alt wc-forward">Proceed to checkout</a>$5';
$message = preg_replace($pattern, $replacement, $message);
return $message;
}
add_filter( 'wc_add_to_cart_message_html', 'filter_wc_add_to_cart_message_html', 10, 2 );
ごめんなさい、正規表現は結構適当です。
おそらくお買い物カゴを表示ボタンがCSSでFloatされているので、上記記述だとボタンは左側に表示されるかと思います。CSSで調整してみてください。
ご参考になれば。
とても詳しくお教えいただきありがとうございます。
少しCSSでいじると、完璧に機能しました！
しかし、どうしても左側に表示されますね・・・。
いろいろ試してみましたが、左右を逆転できません。
（proceed to checkoutを右にしたいのですが）
これを解決するには、なにか方法があるのでしょうか？
また、
wp-content/plugins/woocommerce/includes/wc-cart-functions.php 125行目
周辺でおそらく表示を担っているフィルターフックが使用されている箇所があるのですが、該当のフィルターフックを作っている場所は以下かと思われます。
とおっしゃっておりますが、
たとえばwc-cart-functions.php 125行目の記述は、予めwc-cart-functions.phpに記述されていることをご存知だったのか、それともこういうのはひとつひとつファイルを見て特定していくのかどちらでしょうか？
woocommerceを長年触っていくと、自然とわかるようになるのでしょうか？
すみませんがよろしくお願いいたします。
mrsmith11さん、こんにちは。
ちょっと時間が取れないので、追加の調査ができていませんが、もともと表示されているお買い物カゴへのボタンがfloat:right;されていたように記憶しております。なので、追加で表示したボタンのclassである「checkout-button button alt wc-forward」にfloat:right;すれば動きそうな気がしたのですが、だめだったかな？
たとえばwc-cart-functions.php 125行目の記述は、予めwc-cart-functions.phpに記述されていることをご存知だったのか、それともこういうのはひとつひとつファイルを見て特定していくのかどちらでしょうか？
人によって調べ方は違うかもしれませんが、私の場合は、まず該当箇所で使われているソースコードを確認し、独特のタグやclassなど、検索できそうな要素を探します。
次にテーマファイルで該当のページを構成しているファイルを実際に確認してみます。今回の場合お買い物カゴに関連するコードはテーマファイルに書かれていなかったため、プラグインであろうと予想しました。
カゴを作っているプラグインは限られていますので、WooCommerceであろうと予測し、WooCommerceがインストールされているディレクトリ（wp-content/plugins/woocommerce）に移動して、最初に調べていたclass等でgrepしています。例えば以下のように
grep -r wc-forward ./*
調べ方によってはたくさん表示されてしまいますが、単語を増やしてみたりして絞っていきます。
ソースコードを作っていそうな場所を発見したら、該当のファイルを実際に開いて確認します。
本当に該当箇所が表示を担っているか確認するために、前後にTESTやhogeなどと記載して確認することもあります。
表示を担っている箇所が特定できたら、その周辺（通常は該当箇所よりも後ろ）を確認し、アクションフックやフィルターフックが存在していたら、テーマファイルのfunctions.phpや独自のプラグインを用意して、表示を変更できるか実際にフックを使ったコードを書いて試してみます。
あとは思ったようなコードが書き出せるように調整すればOKですね。
よく作られたプラグインならフックが用意されていることが多いので、改修が楽でいいですね。フックが用意されていないプラグインももちろんあります。むしろ無い方が多いかもですね。
慣れれば思うように自身で改修してサイトが構築できるようになりますので、ぜひ挑戦してみてください。
ご参考になれば。
