購入手続きページ詳細

  • 著者:管理人
  • 記事の最終変更日:2024年8月25日

CSS

ダッシュボード>外観>カスタマイズ>追加CSSや、Scripts n Styles（プラグイン）等でコピペして使用します。

				
					/*購入手続きページはブロックテンプレートを選択使用*/

/*ブロック、クラシックテンプレート共通分*/

/*メニューカート非表示（PC&モバイル）*/
li.woo-menu-icon.wcmenucart-toggle-custom_link.toggle-cart-widget {
    display: none;
}
a.wcmenucart {
    display: none;
}

/*Payment Plugins for PayPal WooCommerce概要欄のページ遷移イラスト、いじれない文言削除*/
.wc-ppcp-popup__container img,.wc-ppcp-popup__container p {
    display: none;
}

/*PayPal説明文付加（ブロックエディタでは「Woo>設定>決済>PayPal」でのディスクリプションが反映されない）*/
.wc-ppcp-popup__container::after {
    content: "アカウントをお持ちのお客様は、「PayPalで支払う」ボタンからポップアップウィンドウが開いて決済が可能になります";
    font-size: 14px;
}

/*ブロックテンプレート分*/

/*フォームでの国非表示*/
.wc-block-components-address-form__country.wc-block-components-country-input {
    display: none;
}

/*デフォルト決済手段アイコン非表示*/
.wc-block-components-payment-method-icons {
    display: none !important;
}

/*Payment Plugins for Stripe WooCommerceアイコン付加*/
label[for="radio-control-wc-payment-method-options-stripe_cc"] {
    background-image: url(/wp-content/uploads/2024/03/Stripe3824.svg);
    background-repeat: no-repeat;
    background-size: 38px auto;
    background-position: right 24px top 4px/*WooCommerce8.8.2は18px*/;
}

/*Payment Plugins for PayPal WooCommerceアイコン付加*/
label[for="radio-control-wc-payment-method-options-ppcp"] {
    background-image: url(/wp-content/uploads/2024/03/paypal_logo3824.svg);
    background-repeat: no-repeat;
    background-size: 38px auto;
    background-position: right 24px top 8px/*WooCommerce8.8.2は22px*/;
}

/*Japanized for WooCommerce銀振アイコン付加*/
label[for="radio-control-wc-payment-method-options-bankjp"] {
    background-image: url(/wp-content/uploads/2024/03/ATMcustom3824.svg);
    background-repeat: no-repeat;
    background-size: 38px 24px;
    background-position: right 24px top 0px/*WooCommerce8.8.2は14px*/;
}

/*Japanized for WooCommerce代引アイコン付加*/
label[for="radio-control-wc-payment-method-options-cod"] {
    background-image: url(/wp-content/uploads/2024/03/yamatonewmainmini3824.svg);
    background-repeat: no-repeat;
    background-size: 38px 24px;
    background-position: right 24px top 0px/*WooCommerce8.8.2は14px*/;
}

/*ボタン文字色調整*/
span.wc-block-components-button__text {
    color: #fff;
    font-weight:600;
}

/*ボタン枠線削除*/
button.components-button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
    border: 0;
}

/*注文概要スティッキー（スマホでは効かないので対策不要）*/
/*WooCommerce8.9まで*/
.wp-block-woocommerce-checkout-order-summary-block {
    position: sticky;
    top: 140px;
}
@media (max-width: 959px) and (min-width:768px){
.wp-block-woocommerce-checkout-order-summary-block {
    position: sticky;
    top: 160px;
}
}
/*WooCommerce9.0以降標準搭載、微調整*/
.is-large .wc-block-checkout__sidebar {
    align-self: flex-start;
    top: 140px!important;
}

/*注文概要の上の線消し*/
.wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper {
    border-top: 0px solid hsla(0, 0%, 7%, .11);
}

/*注文概要の見出しスタイルを他と揃える*/
span.wc-block-components-order-summary__button-text {
    font-size: 1.25em;
    font-weight: 700;
	color:#333;
}

/*モバイルのみ注文概要を枠線で囲む*/
@media(max-width:918px){
.wp-block-woocommerce-checkout-order-summary-block {
    margin-top: -20px;
    border: 1px solid hsla(0, 0%, 7%, .11);
    border-radius: 4px;
}
}

/*クラシックテンプレート分/////購入手続き>注文の支払い（アカウント>注文>支払いボタンから遷移）に自動適用*/

/*ブロックテンプレートと統一感をもたせるレイアウト調整*/
@media(min-width:826px){
form#order_review {
    display: flex;
    align-items: flex-start;
    float: none !important;
    width: 100% !important;
}
div#payment {
    margin-left: 50px;
}
}
.content-full-width .content-area, body.content-full-screen #content-wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 84px !important;
    border: 0 !important;
}
@media (max-width: 959px) and (min-width:768px){
#main #content-wrap.container {
    width: auto !important;
    margin: 0 88px!important;
}
}
form#order_review {
    margin-top: 10px;
}

/*背景色変更*/
.woocommerce table.shop_table thead,.woocommerce #order_review table.shop_table tbody td,.woocommerce-checkout #payment ul.payment_methods li {
    background-color: rgb(255, 255, 255);
}

/*注文概要枠線付加*/
.woocommerce #order_review table.shop_table {
    border: 1px solid hsla(0, 0%, 7%, .11);
    border-radius:4px;
}

/*見出し付加*/
div#payment:before {
    content: "支払いオプション";
    font-weight: 600;
    font-size: 18px;
    padding: 10px;
}

/*注文の支払いページで前回未完の決済手段をグレーアウト*/
table.shop_table tfoot tr:nth-child(2) th, table.shop_table tfoot tr:nth-child(2) td {
    color: #bbb !important;
}

/*決済手段選択後の展開エリア調整*/
.woocommerce-checkout #payment div.payment_box {
    margin: -10px 0 0;
    padding: 0 1.4em;
    color: #4a4a4a;
}

/*決済手段選択ラベル調整*/
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method>label {
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
}

/*決済手段ホバー背景色削除*/
.woocommerce-checkout #payment ul.payment_methods li:hover {
    background-color: #fff;
}

/*デフォルト決済手段アイコン一括非表示（Google Payには効かないので放置、Apple Payは除外）*/
ul.wc_payment_methods.payment_methods.methods label img:not(li.payment_method_stripe_applepay label:first-of-type img) {
    display: none;
}

/*Payment Plugins for Stripe WooCommerceアイコン付加*/
label[for="payment_method_stripe_cc"]{
    background-image: url(/wp-content/uploads/2024/03/Stripe3824.svg);
    background-repeat: no-repeat;
    background-size: 38px auto;
    background-position: right 20px top 19px;
}

/*Payment Plugins for PayPal WooCommerceアイコン付加*/
label[for="payment_method_ppcp"]{
    background-image: url(/wp-content/uploads/2024/03/paypal_logo3824.svg);
    background-repeat: no-repeat;
    background-size: 38px auto;
    background-position: right 20px top 23px;
}

/*Japanized for WooCommerce銀振アイコン付加*/
label[for="payment_method_bankjp"] {
    background-image: url(/wp-content/uploads/2024/03/ATMcustom3824.svg);
    background-repeat: no-repeat;
    background-size: 38px 24px;
    background-position: right 20px top 18px;
}

/*Japanized for WooCommerce代引アイコン付加*/
label[for="payment_method_cod"] {
    background-image: url(/wp-content/uploads/2024/03/yamatonewmainmini3824.svg);
    background-repeat: no-repeat;
    background-size: 38px 24px;
    background-position: right 20px top 16px;
}

/*デフォルトGoogle Payアイコン調整*/
img.wc-stripe-paymentRequest-icon.gpay.ls-is-cached.lazyloaded {
    width: 45px;
    position: relative;
    top: 0px;
}

/*デフォルトApple Payアイコン調整*/
li.payment_method_stripe_applepay img {
    width: 42px!important;
    position: relative;
    bottom: 3px;
    right: 3px;
}

/*Payment Plugins for Stripe WooCommerce概要欄下余白追加*/
.wc-stripe-gateway-desc {
   margin-bottom: 10px;
}

/*ボタン（PayPalが該当）の大文字化封じ*/
button[type=submit], .button{
    text-transform: none;
}

/*Google Pay選択時のボタン幅調整（Apple Payは調整不要）*/
.woocommerce-checkout #wc-stripe-payment-request-container.StripeElement {
    width: 100%!important;
}

/*サンキューページの代引手数料表挿入*/
.woocommerce-order img.ls-is-cached.lazyloaded {
    max-width: 470px;
    margin-top: 10px;
}
				
			
				
					/*Elementorのポップアップセレクタをボタン化（ブロックテンプレートの場合*/
.wc-block-checkout__terms.wp-block-woocommerce-checkout-terms-block span a:nth-child(3) {
    line-height: 3;
    padding: 5px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 11px;
}

/*Elementorのポップアップセレクタをボタン化（クラシックテンプレート-注文の支払いの場合*/
span.woocommerce-terms-and-conditions-checkbox-text span a:nth-child(3) {
    line-height: 3;
    padding: 5px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 11px;
}

HTML追加（直上CSSとセット）

購入手続きページブロックエディタおよびダッシュボード>外観>カスタマイズ>WooCommerce>購入手続き>利用規約へ記述します。
※Elementorポップアップは、セレクターを指定することで機能するはずですが、うまく動作しないバグがあります。そのため、トリガーとしてのボタンを非表示でフッターに設置し、ブラウザのデベロッパーツールでセレクターを取得して記述しています。

				
					<span>
    購入を続行すると、当サイトの
    <a href="https://randm.moe/law-page/" target="_blank">
    法律に関するページ
    </a>
    すべてに同意したことになります
    <br>
    <a href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjI0NTUiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D">
    ページ遷移せずに、こちらからすべてを確認できます
    </a>
</span>