1. wordpress建站教程首页
  2. WordPress
  3. WordPress建站教程

在WooCommerce中添加“立即购买”按钮-WordPress安装教程

在进一步讨论之前,我假设你已经熟悉了WooCommerce。如果你只是一个技术爱好者,在那里学习新东西,我会尝试为这篇文章提供一些基础知识。 WooCommerce简单如他们所说: 为WordPress构建的完全可定制的开源电子商务平台。 要了解更多信息,请单击此链接。 要查看使用WooCommerce的实际 WP网站建设

在进一步讨论之前,我假设你已经熟悉了WooCommerce。如果你只是一个技术爱好者,在那里学习新东西,我会尝试为这篇文章提供一些基础知识。

WooCommerce简单如他们所说:

WordPress构建的完全可定制的开源电子商务平台。

要了解更多信息,请单击此链接。

要查看使用WooCommerce的实际网站,请检查我正在开发的网站。转到现场演示。

典型的WooCommerce网站的工作流程如下:

  1. 用户点击Home / Shop页面上显示的任何产品。
  2. 现在,他/她正在“单一产品页面”上。此页面提供有关产品的更多深入信息。
  3. 点击“添加到购物车”按钮。该产品已添加到购物车中。
  4. 访问’购物车页面’。然后单击“结帐”按钮。
  5. 在“结账页面”填写详细信息,然后继续付款。

所有这些功能都是通过WooCommerce免费提供的,并且适用于大多数用例。

但…

每个解决方案都可以进一步优化

您是否在上述工作流程中找到了一些开销?

如果我们的用户只想购买该产品,我们真的需要第4步吗?

我们应该直接将他发送到结账页面。我们不应该吗?

所以现在我们遇到了问题:

我们需要在“添加到购物车”按钮旁添加一个简单的“立即购买”按钮,该按钮将直接将我们的用户发送到结帐页面而不是购物车页面。

让我们为此找到一些解决方案。

首先是第一件事。谷歌一下。搜索插件。

疑难杂症!。找到一个。

哦,等等。我不希望在那里显示按钮。它的风格不匹配。它看起来像开箱即用的东西。

我是一个非技术人员。我现在被困住了。我应该聘请开发人员吗?

你有这种情况吗?

不要担心人们。解决方案非常简单。跟我来吧

我假设您可以访问您的主题文件。

注意:我们永远不应该直接更新主题文件。相反,使用子主题。如果您想学习如何创建一个,请阅读本文。如果您的主题提供者提供了儿童主题,请上传并激活它。请注意,在某些情况下,您可能需要再次添加自定义程序设置。因此,请务必仔细检查您的网站。如果某些内容被破坏而您不知道如何修复它,请重新激活您的父主题,一切都会好的。

但为了简单起见,我将直接对父主题进行更改。我们有兴趣更改的文件应位于:

/wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/simple.php

如果没有,只需创建它保持相同的文件夹结构。如果您使用子主题,请创建相同的文件夹结构。它看起来像:

您的孩子主题/ woocommerce /单品/添加到购物车/ simple.php

你会在这里看到几行代码。我们感兴趣的代码部分如下所示:

<button class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr( $product->get_id() ); ?>"><!–?php echo esc_html( $product->single_add_to_cart_text() ); ?–></button>

如果您的代码看起来有些不同,请不要担心。它非常好,因为您的主题开发人员添加了一些额外的代码。我们必须确保找到“添加到购物车”按钮的代码。

现在根据我们的任务,我们必须在它旁边添加“立即购买”按钮。只需添加下面的代码即可。

<button id="buy_now_button" class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr($product->get_id()); ?>">
<!–?php _e('立即购买','salong'); ?–>
</button>
<input id="is_buy_now" name="is_buy_now" type="hidden" value="0" />

注意:使用主题用于“添加到购物车”按钮的相同类。或者只需复制并粘贴相同的“添加到购物车”按钮并进行必要的更改。

这段代码的作用是,它会在“添加到购物车”按钮后添加一个新的“立即购买”按钮。

你注意到两个按钮之间的区别吗?

  1. 我们已经提供了新的按钮ID“buy_now_button”,稍后我们将在提交表单时使用。
  2. 我们添加了额外的隐藏输入字段,其ID为“is_buy_now”,值为0.这将帮助我们了解用户是否已点击“立即购买”按钮。

我希望一切都适合你。如果您是开发人员,那么对您来说很容易。我正在为非技术人员详细解释它。

现在我们已经有了按钮。如果您保存并访问产品页面,则会看到添加的按钮。现在点击它。

哦,等等。它与“添加到购物车”按钮的工作方式相同。对。我们还没有处理主要逻辑。

现在我们必须为我们的逻辑添加一些javascript才能工作。在主题文件夹中打开functions.php文件。它将在:

你的主题/ functions.php中

或者如果您正在使用子主题,则在您的子主题文件夹中创建它。

在functions.php文件的末尾添加以下代码:

<button id="buy_now_button" class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr($product->get_id()); ?>">
<!–?php _e('立即购买','salong'); ?–>
</button>
<input id="is_buy_now" name="is_buy_now" type="hidden" value="0" />

此代码添加以下javascript代码添加到购物车表单。我们的javascript代码会在“立即购买”按钮上收听点击事件。当有人点击按钮时,我们将id为’is_buy_now’的隐藏输入值设置为1.我们稍后会使用此值来检查是否点击了“立即购买”按钮。

注意:您还可以在主题的主javascript文件中添加此代码。但为了简单起见,我更喜欢在这里添加它。

现在在相同的functions.php文件末尾添加以下php代码:

function buy_now_submit_form() {
?>
<script>
jQuery(document).ready(function(){
// listen if someone clicks 'Buy Now' button
jQuery('#buy_now_button').click(function(){
// set value to 1
jQuery('#is_buy_now').val('1');
//submit the form
jQuery('form.cart').submit();
});
});
</script>
<!–?php <br ?–> }
add_action('woocommerce_after_add_to_cart_form', 'buy_now_submit_form');

这是帮助我们将用户重定向到结帐页面的主要代码。默认情况下,重定向网址是购物车页面的网址。

请记住,我们已将ID为’is_buy_now’的隐藏输入设置为值1.此处,我们使用它来区分用户是单击“立即购买”按钮还是常规“添加到购物车”按钮。

因此,如果点击“立即购买”按钮,我们会将重定向网址设置为结帐页面的网址。

而已。我们完了!

保存该文件,一切都应该正常。

综上所述:

  1. 我们在“添加到购物车”按钮旁添加了“立即购买”按钮,可将用户直接重定向到结帐页面。
  2. 为了区分单击了哪个按钮,我们使用了一个id为’is_buy_now’的隐藏输入元素。
  3. 如果点击“立即购买”按钮,我们将此重定向网址更改为结帐页面的网址。

如果在某些情况下你只需要一个重定向到结帐页面的按钮,你只需要在functions.php文件中使用以下代码

add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($redirect_url) {
if (isset($_REQUEST['is_buy_now']) && $_REQUEST['is_buy_now']) {
global $woocommerce;
$redirect_url = wc_get_checkout_url();
}
return $redirect_url;
}

不需要那个javascript代码。另外,不要忘记在simple.php文件中重命名“添加到购物车”按钮(如果需要)。

请注意,此解决方案仅适用于“简单产品”,不适用于“可变产品”或任何其他产品类型。为此,您必须使用我们在simple.php文件中使用的相同逻辑在同一文件夹中的其他文件中(例如,variation-add-to-cart-button.php)

原创文章,作者:网站建设,如若转载,请注明出处:http://jc.51jztj.com/archives/130555

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注