[英]How to enable Bootstrap css in only WooCommerce Checkout Page
我有 WordPress woocommerce 主題。 我想讓我的結帳頁面更漂亮。
我只想在我的結帳中啟用 Bootstrap css 和 js。 在我的結帳頁面中，我有表單字段 + 選擇框等。
請在這方面幫助我。
為了給你正確的答案，缺少很多信息。 需要查看您如何布置代碼。
最簡單的答案是：
如果您為 checkoutPage 創建了單獨的 HTML 文件。 確保在“頭部”部分啟用它您可以 A：從這里的 URL 下載引導包https://getbootstrap.com/如果您選擇下載包，則必須解壓縮下載的文件並放置將 bootstrap 的“css”和“js”的適當文件放入包含代碼的文件夾中，但請確保將 css 文件放在 css 文件夾中，將 js 文件放在 js 文件夾中，依此類推。 或 B：您可以簡單地將其與以下代碼鏈接
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
希望這可以幫助你...
在您使用 WordPress 的地方，您可以使用 WordPress 掛鈎。 如果您有一個結帳模板設置，您可以通過它引用它。 有關在模板頁面中設置標題的信息，請參見下文。
模板頁面文件名應始終以 page- 開頭，因此您可以擁有一個名為 page-checkout.php 的模板，其標題為...
<?php
/**
*
** Template Name: Checkout Page
*
*/
get_header(); ?>
然后在你的 header.php 文件中，你可以在結賬頁面調用 CSS 和 JS，你可以編寫一個簡單的 PHP if 語句，使用 WordPress 鈎子只將它拉到那個頁面上。
<?php
if(is_page_template('page-checkout.php') { ?>
<style>
</style>
<script>
</script>
<?php } ?>
您也可以使用 is_page 而不是 is_page_template。 這里有更多信息is_page和is_page_template 。
<?php
if(is_page('checkout') { ?>
<style>
</style>
<script>
</script>
<?php } ?>
簡單添加以下 CSS 代碼，您的問題將得到解決。 它對我很好
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row
{
display: block;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
max-width: unset;
}
WooCommerce-如何僅添加自定義國家/地區以在結帳頁面上進行選擇並保持自動完成功能？
[英]WooCommerce - How to add only custom countries to select on checkout page and keep autocomplete feature?
WooCommerce CSS和Checkout按鈕未在單個產品頁面中加載
[英]WooCommerce CSS And Checkout button Is Not Loading In Single Product Page
如何在單個結帳頁面中禁用來自 WooCommerce 的 Ajax 調用？
[英]How to disable Ajax Call from WooCommerce in a single checkout page?
如何在woocommerce結帳頁面中添加另一個電話字段以進行確認
[英]how to add another phone field for confirmation in woocommerce checkout page
Javascript 執行但不在 Woocommerce 結帳頁面上保持價值
[英]Javascript executing but not keeping value on Woocommerce checkout page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.