如何仅在 WooCommerce 结帐页面中启用 Bootstrap css

Question

我有 WordPress woocommerce 主题。 我想让我的结帐页面更漂亮。

我只想在我的结帐中启用 Bootstrap css 和 js。 在我的结帐页面中，我有表单字段 + 选择框等。

请在这方面帮助我。

Answer 1

为了给你正确的答案，缺少很多信息。 需要查看您如何布置代码。

最简单的答案是：

如果您为 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>

希望这可以帮助你...

Answer 2

在您使用 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 } ?>

Answer 3

简单添加以下 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 结帐页面中启用 Bootstrap css

问题描述

3 个解决方案

解决方案1
0 2018-08-03 16:57:03

解决方案2
0 2018-08-03 17:08:35

解决方案3
0 2019-12-11 12:48:57

如何仅在 WooCommerce 结帐页面中启用 Bootstrap css

问题描述

3 个解决方案

解决方案1 0 2018-08-03 16:57:03

解决方案2 0 2018-08-03 17:08:35

解决方案3 0 2019-12-11 12:48:57

解决方案1
0 2018-08-03 16:57:03

解决方案2
0 2018-08-03 17:08:35

解决方案3
0 2019-12-11 12:48:57